@atlaskit/datetime-picker 15.6.0 → 15.7.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/datetime-picker
 
+## 15.7.1
+
+### Patch Changes
+
+- [`2c624534e7b7d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c624534e7b7d) -
+  Updated dependency.
+
+## 15.7.0
+
+### Minor Changes
+
+- [#158791](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158791)
+  [`2dcea88bcb6c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2dcea88bcb6c7) -
+  Support React 18 SSR by removing use of react-uid
+
 ## 15.6.0
 
 ### Minor Changes

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

@@ -17,8 +17,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
-var _reactUid = require("react-uid");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
 var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
 var _locale = require("@atlaskit/locale");
@@ -42,11 +42,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.6.0";
+var packageVersion = "15.7.1";
 var dropdownIndicatorStyles = (0, _primitives.xcss)({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -636,11 +633,10 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           onCalendarSelect: calendarProps.onCalendarSelect,
           previousMonthLabel: previousMonthLabel,
           shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-        })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_reactUid.UID, {
-          name: function name(id) {
-            return "open-calendar-label--".concat(id);
-          }
-        }, function (openCalendarLabelId) {
+        })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_useId.IdProvider, {
+          prefix: "open-calendar-label--"
+        }, function (_ref3) {
+          var openCalendarLabelId = _ref3.id;
           return (0, _react2.jsx)("div", {
             css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
           }, inputLabelId && (0, _react2.jsx)(_visuallyHidden.default, {

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

@@ -13,8 +13,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
-var _reactUid = require("react-uid");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
 var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
 var _locale = require("@atlaskit/locale");
@@ -35,15 +35,12 @@ var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "op
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.6.0";
+var packageVersion = "15.7.1";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -553,7 +550,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
 
   // `label` takes precedence of the `inputLabel`
   var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, " , ").concat(openCalendarLabel) : openCalendarLabel;
-  var openCalendarLabelId = "open-calendar-label--".concat((0, _reactUid.useUID)());
+  var openCalendarLabelId = "open-calendar-label--".concat((0, _useId.useId)());
   return (
     // These event handlers must be on this element because the events come
     // from different child elements.

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

@@ -38,7 +38,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.6.0";
+var packageVersion = "15.7.1";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

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

@@ -37,7 +37,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.6.0";
+var packageVersion = "15.7.1";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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 = "15.6.0";
+var packageVersion = "15.7.1";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -9,11 +9,8 @@ import { Component, createRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
-import { UID } from 'react-uid';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
 import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
@@ -29,7 +26,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 = "15.6.0";
+const packageVersion = "15.7.1";
 const dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -612,9 +609,11 @@ class DatePickerComponent extends Component {
         onCalendarSelect: calendarProps.onCalendarSelect,
         previousMonthLabel: previousMonthLabel,
         shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-      })), shouldShowCalendarButton && !isDisabled ? jsx(UID, {
-        name: id => `open-calendar-label--${id}`
-      }, openCalendarLabelId => jsx("div", {
+      })), shouldShowCalendarButton && !isDisabled ? jsx(IdProvider, {
+        prefix: "open-calendar-label--"
+      }, ({
+        id: openCalendarLabelId
+      }) => jsx("div", {
         css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
       }, inputLabelId && jsx(VisuallyHidden, {
         id: openCalendarLabelId

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

@@ -8,11 +8,8 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
-import { useUID } from 'react-uid';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
 import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
@@ -28,7 +25,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 = "15.6.0";
+const packageVersion = "15.7.1";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,
@@ -479,7 +476,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 
   // `label` takes precedence of the `inputLabel`
   const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel} , ${openCalendarLabel}` : openCalendarLabel;
-  const openCalendarLabelId = `open-calendar-label--${useUID()}`;
+  const openCalendarLabelId = `open-calendar-label--${useId()}`;
   return (
     // These event handlers must be on this element because the events come
     // from different child elements.

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

@@ -22,7 +22,7 @@ import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
 const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.6.0";
+const packageVersion = "15.7.1";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({

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

@@ -21,7 +21,7 @@ import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
 const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.6.0";
+const packageVersion = "15.7.1";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -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 = "15.6.0";
+const packageVersion = "15.7.1";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -19,11 +19,8 @@ import { Component, createRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
-import { UID } from 'react-uid';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
 import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
@@ -39,7 +36,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 = "15.6.0";
+var packageVersion = "15.7.1";
 var dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -629,11 +626,10 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           onCalendarSelect: calendarProps.onCalendarSelect,
           previousMonthLabel: previousMonthLabel,
           shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-        })), shouldShowCalendarButton && !isDisabled ? jsx(UID, {
-          name: function name(id) {
-            return "open-calendar-label--".concat(id);
-          }
-        }, function (openCalendarLabelId) {
+        })), shouldShowCalendarButton && !isDisabled ? jsx(IdProvider, {
+          prefix: "open-calendar-label--"
+        }, function (_ref3) {
+          var openCalendarLabelId = _ref3.id;
           return jsx("div", {
             css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
           }, inputLabelId && jsx(VisuallyHidden, {

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

@@ -14,11 +14,8 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
-// This is a deprecated component but we will be able to use the actual hook
-// version very soon from converting this to functional. And also React 18 is on
-// the horizon
-import { useUID } from 'react-uid';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
 import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
@@ -34,7 +31,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 = "15.6.0";
+var packageVersion = "15.7.1";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -544,7 +541,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
 
   // `label` takes precedence of the `inputLabel`
   var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, " , ").concat(openCalendarLabel) : openCalendarLabel;
-  var openCalendarLabelId = "open-calendar-label--".concat(useUID());
+  var openCalendarLabelId = "open-calendar-label--".concat(useId());
   return (
     // These event handlers must be on this element because the events come
     // from different child elements.

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

@@ -34,7 +34,7 @@ var DatePicker = componentWithCondition(function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.6.0";
+var packageVersion = "15.7.1";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

@@ -30,7 +30,7 @@ var DatePicker = componentWithCondition(function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.6.0";
+var packageVersion = "15.7.1";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -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 = "15.6.0";
+var packageVersion = "15.7.1";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "15.6.0",
+	"version": "15.7.1",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,10 +47,10 @@
 		"@atlaskit/select": "^18.4.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
-		"date-fns": "^2.17.0",
-		"react-uid": "^2.2.0"
+		"date-fns": "^2.17.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"