@atlaskit/link-datasource 4.29.4 → 4.30.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 4.30.0
+
+### Minor Changes
+
+- [`a477f1382d9c3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a477f1382d9c3) -
+  [ux] Add support for daterange data type in link-datasource to better represents data ranges like
+  day, month or quarter
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.29.4
 
 ### Patch Changes

package/dist/cjs/ui/issue-like-table/render-type/date-range/index.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DATERANGE_TYPE_TEST_ID = void 0;
+exports.getFormattedDateRange = getFormattedDateRange;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
+var _differenceInDays = _interopRequireDefault(require("date-fns/differenceInDays"));
+var _endOfDay = _interopRequireDefault(require("date-fns/endOfDay"));
+var _getDaysInMonth = _interopRequireDefault(require("date-fns/getDaysInMonth"));
+var _isFirstDayOfMonth = _interopRequireDefault(require("date-fns/isFirstDayOfMonth"));
+var _isLastDayOfMonth = _interopRequireDefault(require("date-fns/isLastDayOfMonth"));
+var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay"));
+var _isSameMonth = _interopRequireDefault(require("date-fns/isSameMonth"));
+var _isSameYear = _interopRequireDefault(require("date-fns/isSameYear"));
+var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay"));
+var _reactIntlNext = require("react-intl-next");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _messages = require("./messages");
+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 DATERANGE_TYPE_TEST_ID = exports.DATERANGE_TYPE_TEST_ID = 'link-datasource-render-type--daterange';
+var dateOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric'
+};
+var timeOptions = {
+  hour12: false,
+  hour: '2-digit',
+  minute: '2-digit'
+};
+var isDayRange = function isDayRange(startDate, endDate) {
+  // Naivly, we could just check
+  // return startDate.getTime() === endDate.getTime();
+  return (0, _isSameYear.default)(startDate, endDate) && (0, _isSameMonth.default)(startDate, endDate) && (0, _isSameDay.default)(startDate, endDate);
+};
+var isMonthRange = function isMonthRange(startDate, endDate) {
+  return (0, _isSameYear.default)(startDate, endDate) && (0, _isSameMonth.default)(startDate, endDate) && (0, _isFirstDayOfMonth.default)(startDate) && (0, _isLastDayOfMonth.default)(endDate);
+};
+
+/**
+ * Checks if the date range is a quarter range.
+ * A quarter range is a range of 3 months.
+ * The start date must be the first day of the month.
+ * The end date must be the last day of the month.
+ * Quarters can span across multiple years.
+ */
+var isQuarterRange = function isQuarterRange(startDate, endDate) {
+  // We need to add 1 to the difference in days
+  // because the differenceInDays method returns the number of full days between the two dates
+  // and we want to include the start and end dates
+  var diffDays = Math.abs((0, _differenceInDays.default)(startDate, endDate)) + 1;
+  var firstMonthDays = (0, _getDaysInMonth.default)(startDate);
+  var secondMonthDays = (0, _getDaysInMonth.default)((0, _addMonths.default)(startDate, 1));
+  var thirdMonthDays = (0, _getDaysInMonth.default)(endDate);
+  return diffDays === firstMonthDays + secondMonthDays + thirdMonthDays && (0, _isFirstDayOfMonth.default)(startDate) && (0, _isLastDayOfMonth.default)(endDate);
+};
+var getDateScale = function getDateScale(startDate, endDate) {
+  if (isDayRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2025-11-01
+    return 'day';
+  }
+  if (isMonthRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2025-11-30
+    return 'month';
+  }
+  if (isQuarterRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2026-01-31
+    return 'quarter';
+  }
+
+  // start: 2025-11-02
+  // end: 2026-05-19
+  return 'full';
+};
+
+// I decided to reuse the same logic as we use currently in the date-time render type
+// Alternatively, we could also use here `parseISO` from `date-fns`
+var shiftUtcToLocal = function shiftUtcToLocal(dateString) {
+  // In some cases we get a value of `2023-12-20` which when parsed by JS assumes meantime timezone, causing the date
+  // to be one day off in some timezones. We want it to display the date without converting timezones and a solution
+  // is to replace the hyphens with slashes. So it should be 20th Dec regardless of the timezone in this case.
+  // See https://stackoverflow.com/a/31732581
+  var dateValue = /^\d{4}-\d{2}-\d{2}$/.exec(dateString) ? dateString.replace(/-/g, '/') : dateString;
+  return new Date(dateValue);
+};
+var isDateTimeString = function isDateTimeString(dateString) {
+  return dateString.match(/^\d{4}-\d{2}-\d{2}/) !== null && dateString.includes('T');
+};
+function getFormattedDateRange(startValue, endValue, formatDate, formatMessage) {
+  if (!startValue || !endValue) {
+    return '';
+  }
+  var isDateTime = isDateTimeString(startValue) && isDateTimeString(endValue);
+  var startDate = isDateTime ? new Date(startValue) : (0, _startOfDay.default)(shiftUtcToLocal(startValue));
+  var endDate = isDateTime ? new Date(endValue) : (0, _endOfDay.default)(shiftUtcToLocal(endValue));
+  if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+    return '';
+  }
+
+  // If startValue and endValue are valid ISO date strings, we consider it a full range
+  var dateScale = isDateTime ? 'full' : getDateScale(startDate, endDate);
+  switch (dateScale) {
+    case 'day':
+      // Nov 1, 2025
+      return formatDate(startDate, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+      });
+    case 'month':
+      // Nov 2025
+      return formatDate(startDate, {
+        month: 'short',
+        year: 'numeric'
+      });
+    case 'quarter':
+      {
+        // Jan-Mar, 2025
+        if ((0, _isSameYear.default)(startDate, endDate)) {
+          return formatMessage(_messages.messages.quarterRange, {
+            startMonth: formatDate(startDate, {
+              month: 'short'
+            }),
+            endMonth: formatDate(endDate, {
+              month: 'short'
+            }),
+            year: formatDate(startDate, {
+              year: 'numeric'
+            })
+          });
+        }
+        // Dec-Feb, 2025-2026
+        return formatMessage(_messages.messages.quarterRangeOverYears, {
+          startMonth: formatDate(startDate, {
+            month: 'short'
+          }),
+          endMonth: formatDate(endDate, {
+            month: 'short'
+          }),
+          startYear: formatDate(startDate, {
+            year: 'numeric'
+          }),
+          endYear: formatDate(endDate, {
+            year: 'numeric'
+          })
+        });
+      }
+    case 'full':
+      // Nov 1, 2025 - May 19, 2026
+      // Jan 1, 2025, 00:00 - Mar 31, 2025, 23:59
+      return formatMessage(_messages.messages.fullRange, {
+        start: formatDate(startDate, _objectSpread(_objectSpread({}, dateOptions), timeOptions)),
+        end: formatDate(endDate, _objectSpread(_objectSpread({}, dateOptions), timeOptions))
+      });
+  }
+}
+var DateRangeRenderType = function DateRangeRenderType(_ref) {
+  var value = _ref.value,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? DATERANGE_TYPE_TEST_ID : _ref$testId;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatDate = _useIntl.formatDate,
+    formatMessage = _useIntl.formatMessage;
+  var formattedString = getFormattedDateRange(value.start, value.end, formatDate, formatMessage);
+  if (formattedString === '') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    testId: testId
+  }, formattedString);
+};
+var _default = exports.default = DateRangeRenderType;

package/dist/cjs/ui/issue-like-table/render-type/date-range/messages.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  quarterRange: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.quarterRange',
+    description: 'The formatted date range for a quarter range',
+    defaultMessage: '{startMonth}-{endMonth}, {year}'
+  },
+  quarterRangeOverYears: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.quarterRangeOverYears',
+    description: 'The formatted date range for a quarter range that spans across multiple years',
+    defaultMessage: '{startMonth}-{endMonth}, {startYear}-{endYear}'
+  },
+  fullRange: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.fullRange',
+    description: 'The formatted date range for a full range (day, month, quarter, or full)',
+    defaultMessage: '{start} - {end}'
+  }
+});

package/dist/cjs/ui/issue-like-table/render-type/index.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _boolean = _interopRequireDefault(require("./boolean"));
+var _dateRange = _interopRequireWildcard(require("./date-range"));
 var _dateTime = _interopRequireWildcard(require("./date-time"));
 var _icon = _interopRequireDefault(require("./icon"));
 var _link = _interopRequireDefault(require("./link"));
@@ -32,6 +33,13 @@ var stringifyType = exports.stringifyType = function stringifyType(_ref, formatM
       return (0, _dateTime.getFormattedDate)(value, 'date', formatDate);
     case 'datetime':
       return (0, _dateTime.getFormattedDate)(value, 'datetime', formatDate);
+    case 'daterange':
+      {
+        if ((0, _platformFeatureFlags.fg)('jpd_confluence_date_fields_improvements')) {
+          return (0, _dateRange.getFormattedDateRange)(value.start, value.end, formatDate, formatMessage);
+        }
+        return '';
+      }
     case 'time':
       return (0, _dateTime.getFormattedDate)(value, 'time', formatDate);
     case 'icon':
@@ -78,6 +86,17 @@ var renderType = exports.renderType = function renderType(item) {
           display: "datetime"
         });
       });
+    case 'daterange':
+      {
+        if ((0, _platformFeatureFlags.fg)('jpd_confluence_date_fields_improvements')) {
+          return item.values.map(function (dateRangeValue) {
+            return /*#__PURE__*/_react.default.createElement(_dateRange.default, {
+              value: dateRangeValue
+            });
+          });
+        }
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+      }
     case 'icon':
       return item.values.map(function (iconValue) {
         return /*#__PURE__*/_react.default.createElement(_icon.default, iconValue);

package/dist/es2019/ui/issue-like-table/render-type/date-range/index.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import addMonths from 'date-fns/addMonths';
+import differenceInDays from 'date-fns/differenceInDays';
+import endOfDay from 'date-fns/endOfDay';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import isFirstDayOfMonth from 'date-fns/isFirstDayOfMonth';
+import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
+import isSameDay from 'date-fns/isSameDay';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameYear from 'date-fns/isSameYear';
+import startOfDay from 'date-fns/startOfDay';
+import { useIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives/compiled';
+import { messages } from './messages';
+export const DATERANGE_TYPE_TEST_ID = 'link-datasource-render-type--daterange';
+const dateOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric'
+};
+const timeOptions = {
+  hour12: false,
+  hour: '2-digit',
+  minute: '2-digit'
+};
+const isDayRange = (startDate, endDate) => {
+  // Naivly, we could just check
+  // return startDate.getTime() === endDate.getTime();
+  return isSameYear(startDate, endDate) && isSameMonth(startDate, endDate) && isSameDay(startDate, endDate);
+};
+const isMonthRange = (startDate, endDate) => {
+  return isSameYear(startDate, endDate) && isSameMonth(startDate, endDate) && isFirstDayOfMonth(startDate) && isLastDayOfMonth(endDate);
+};
+
+/**
+ * Checks if the date range is a quarter range.
+ * A quarter range is a range of 3 months.
+ * The start date must be the first day of the month.
+ * The end date must be the last day of the month.
+ * Quarters can span across multiple years.
+ */
+const isQuarterRange = (startDate, endDate) => {
+  // We need to add 1 to the difference in days
+  // because the differenceInDays method returns the number of full days between the two dates
+  // and we want to include the start and end dates
+  const diffDays = Math.abs(differenceInDays(startDate, endDate)) + 1;
+  const firstMonthDays = getDaysInMonth(startDate);
+  const secondMonthDays = getDaysInMonth(addMonths(startDate, 1));
+  const thirdMonthDays = getDaysInMonth(endDate);
+  return diffDays === firstMonthDays + secondMonthDays + thirdMonthDays && isFirstDayOfMonth(startDate) && isLastDayOfMonth(endDate);
+};
+const getDateScale = (startDate, endDate) => {
+  if (isDayRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2025-11-01
+    return 'day';
+  }
+  if (isMonthRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2025-11-30
+    return 'month';
+  }
+  if (isQuarterRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2026-01-31
+    return 'quarter';
+  }
+
+  // start: 2025-11-02
+  // end: 2026-05-19
+  return 'full';
+};
+
+// I decided to reuse the same logic as we use currently in the date-time render type
+// Alternatively, we could also use here `parseISO` from `date-fns`
+const shiftUtcToLocal = dateString => {
+  // In some cases we get a value of `2023-12-20` which when parsed by JS assumes meantime timezone, causing the date
+  // to be one day off in some timezones. We want it to display the date without converting timezones and a solution
+  // is to replace the hyphens with slashes. So it should be 20th Dec regardless of the timezone in this case.
+  // See https://stackoverflow.com/a/31732581
+  const dateValue = /^\d{4}-\d{2}-\d{2}$/.exec(dateString) ? dateString.replace(/-/g, '/') : dateString;
+  return new Date(dateValue);
+};
+const isDateTimeString = dateString => {
+  return dateString.match(/^\d{4}-\d{2}-\d{2}/) !== null && dateString.includes('T');
+};
+export function getFormattedDateRange(startValue, endValue, formatDate, formatMessage) {
+  if (!startValue || !endValue) {
+    return '';
+  }
+  const isDateTime = isDateTimeString(startValue) && isDateTimeString(endValue);
+  const startDate = isDateTime ? new Date(startValue) : startOfDay(shiftUtcToLocal(startValue));
+  const endDate = isDateTime ? new Date(endValue) : endOfDay(shiftUtcToLocal(endValue));
+  if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+    return '';
+  }
+
+  // If startValue and endValue are valid ISO date strings, we consider it a full range
+  const dateScale = isDateTime ? 'full' : getDateScale(startDate, endDate);
+  switch (dateScale) {
+    case 'day':
+      // Nov 1, 2025
+      return formatDate(startDate, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+      });
+    case 'month':
+      // Nov 2025
+      return formatDate(startDate, {
+        month: 'short',
+        year: 'numeric'
+      });
+    case 'quarter':
+      {
+        // Jan-Mar, 2025
+        if (isSameYear(startDate, endDate)) {
+          return formatMessage(messages.quarterRange, {
+            startMonth: formatDate(startDate, {
+              month: 'short'
+            }),
+            endMonth: formatDate(endDate, {
+              month: 'short'
+            }),
+            year: formatDate(startDate, {
+              year: 'numeric'
+            })
+          });
+        }
+        // Dec-Feb, 2025-2026
+        return formatMessage(messages.quarterRangeOverYears, {
+          startMonth: formatDate(startDate, {
+            month: 'short'
+          }),
+          endMonth: formatDate(endDate, {
+            month: 'short'
+          }),
+          startYear: formatDate(startDate, {
+            year: 'numeric'
+          }),
+          endYear: formatDate(endDate, {
+            year: 'numeric'
+          })
+        });
+      }
+    case 'full':
+      // Nov 1, 2025 - May 19, 2026
+      // Jan 1, 2025, 00:00 - Mar 31, 2025, 23:59
+      return formatMessage(messages.fullRange, {
+        start: formatDate(startDate, {
+          ...dateOptions,
+          ...timeOptions
+        }),
+        end: formatDate(endDate, {
+          ...dateOptions,
+          ...timeOptions
+        })
+      });
+  }
+}
+const DateRangeRenderType = ({
+  value,
+  testId = DATERANGE_TYPE_TEST_ID
+}) => {
+  const {
+    formatDate,
+    formatMessage
+  } = useIntl();
+  const formattedString = getFormattedDateRange(value.start, value.end, formatDate, formatMessage);
+  if (formattedString === '') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement(Text, {
+    testId: testId
+  }, formattedString);
+};
+export default DateRangeRenderType;

package/dist/es2019/ui/issue-like-table/render-type/date-range/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  quarterRange: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.quarterRange',
+    description: 'The formatted date range for a quarter range',
+    defaultMessage: '{startMonth}-{endMonth}, {year}'
+  },
+  quarterRangeOverYears: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.quarterRangeOverYears',
+    description: 'The formatted date range for a quarter range that spans across multiple years',
+    defaultMessage: '{startMonth}-{endMonth}, {startYear}-{endYear}'
+  },
+  fullRange: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.fullRange',
+    description: 'The formatted date range for a full range (day, month, quarter, or full)',
+    defaultMessage: '{start} - {end}'
+  }
+});

package/dist/es2019/ui/issue-like-table/render-type/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import BooleanRenderType from './boolean';
+import DateRangeRenderType, { getFormattedDateRange } from './date-range';
 import DateTimeRenderType, { getFormattedDate } from './date-time';
 import IconRenderType from './icon';
 import LinkRenderType from './link';
@@ -24,6 +25,13 @@ export const stringifyType = ({
       return getFormattedDate(value, 'date', formatDate);
     case 'datetime':
       return getFormattedDate(value, 'datetime', formatDate);
+    case 'daterange':
+      {
+        if (fg('jpd_confluence_date_fields_improvements')) {
+          return getFormattedDateRange(value.start, value.end, formatDate, formatMessage);
+        }
+        return '';
+      }
     case 'time':
       return getFormattedDate(value, 'time', formatDate);
     case 'icon':
@@ -64,6 +72,15 @@ export const renderType = item => {
         value: datTimeValue,
         display: "datetime"
       }));
+    case 'daterange':
+      {
+        if (fg('jpd_confluence_date_fields_improvements')) {
+          return item.values.map(dateRangeValue => /*#__PURE__*/React.createElement(DateRangeRenderType, {
+            value: dateRangeValue
+          }));
+        }
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+      }
     case 'icon':
       return item.values.map(iconValue => /*#__PURE__*/React.createElement(IconRenderType, iconValue));
     case 'link':

package/dist/esm/ui/issue-like-table/render-type/date-range/index.js

@@ -0,0 +1,173 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 from 'react';
+import addMonths from 'date-fns/addMonths';
+import differenceInDays from 'date-fns/differenceInDays';
+import endOfDay from 'date-fns/endOfDay';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import isFirstDayOfMonth from 'date-fns/isFirstDayOfMonth';
+import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
+import isSameDay from 'date-fns/isSameDay';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameYear from 'date-fns/isSameYear';
+import startOfDay from 'date-fns/startOfDay';
+import { useIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives/compiled';
+import { messages } from './messages';
+export var DATERANGE_TYPE_TEST_ID = 'link-datasource-render-type--daterange';
+var dateOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric'
+};
+var timeOptions = {
+  hour12: false,
+  hour: '2-digit',
+  minute: '2-digit'
+};
+var isDayRange = function isDayRange(startDate, endDate) {
+  // Naivly, we could just check
+  // return startDate.getTime() === endDate.getTime();
+  return isSameYear(startDate, endDate) && isSameMonth(startDate, endDate) && isSameDay(startDate, endDate);
+};
+var isMonthRange = function isMonthRange(startDate, endDate) {
+  return isSameYear(startDate, endDate) && isSameMonth(startDate, endDate) && isFirstDayOfMonth(startDate) && isLastDayOfMonth(endDate);
+};
+
+/**
+ * Checks if the date range is a quarter range.
+ * A quarter range is a range of 3 months.
+ * The start date must be the first day of the month.
+ * The end date must be the last day of the month.
+ * Quarters can span across multiple years.
+ */
+var isQuarterRange = function isQuarterRange(startDate, endDate) {
+  // We need to add 1 to the difference in days
+  // because the differenceInDays method returns the number of full days between the two dates
+  // and we want to include the start and end dates
+  var diffDays = Math.abs(differenceInDays(startDate, endDate)) + 1;
+  var firstMonthDays = getDaysInMonth(startDate);
+  var secondMonthDays = getDaysInMonth(addMonths(startDate, 1));
+  var thirdMonthDays = getDaysInMonth(endDate);
+  return diffDays === firstMonthDays + secondMonthDays + thirdMonthDays && isFirstDayOfMonth(startDate) && isLastDayOfMonth(endDate);
+};
+var getDateScale = function getDateScale(startDate, endDate) {
+  if (isDayRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2025-11-01
+    return 'day';
+  }
+  if (isMonthRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2025-11-30
+    return 'month';
+  }
+  if (isQuarterRange(startDate, endDate)) {
+    // start: 2025-11-01
+    // end: 2026-01-31
+    return 'quarter';
+  }
+
+  // start: 2025-11-02
+  // end: 2026-05-19
+  return 'full';
+};
+
+// I decided to reuse the same logic as we use currently in the date-time render type
+// Alternatively, we could also use here `parseISO` from `date-fns`
+var shiftUtcToLocal = function shiftUtcToLocal(dateString) {
+  // In some cases we get a value of `2023-12-20` which when parsed by JS assumes meantime timezone, causing the date
+  // to be one day off in some timezones. We want it to display the date without converting timezones and a solution
+  // is to replace the hyphens with slashes. So it should be 20th Dec regardless of the timezone in this case.
+  // See https://stackoverflow.com/a/31732581
+  var dateValue = /^\d{4}-\d{2}-\d{2}$/.exec(dateString) ? dateString.replace(/-/g, '/') : dateString;
+  return new Date(dateValue);
+};
+var isDateTimeString = function isDateTimeString(dateString) {
+  return dateString.match(/^\d{4}-\d{2}-\d{2}/) !== null && dateString.includes('T');
+};
+export function getFormattedDateRange(startValue, endValue, formatDate, formatMessage) {
+  if (!startValue || !endValue) {
+    return '';
+  }
+  var isDateTime = isDateTimeString(startValue) && isDateTimeString(endValue);
+  var startDate = isDateTime ? new Date(startValue) : startOfDay(shiftUtcToLocal(startValue));
+  var endDate = isDateTime ? new Date(endValue) : endOfDay(shiftUtcToLocal(endValue));
+  if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+    return '';
+  }
+
+  // If startValue and endValue are valid ISO date strings, we consider it a full range
+  var dateScale = isDateTime ? 'full' : getDateScale(startDate, endDate);
+  switch (dateScale) {
+    case 'day':
+      // Nov 1, 2025
+      return formatDate(startDate, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+      });
+    case 'month':
+      // Nov 2025
+      return formatDate(startDate, {
+        month: 'short',
+        year: 'numeric'
+      });
+    case 'quarter':
+      {
+        // Jan-Mar, 2025
+        if (isSameYear(startDate, endDate)) {
+          return formatMessage(messages.quarterRange, {
+            startMonth: formatDate(startDate, {
+              month: 'short'
+            }),
+            endMonth: formatDate(endDate, {
+              month: 'short'
+            }),
+            year: formatDate(startDate, {
+              year: 'numeric'
+            })
+          });
+        }
+        // Dec-Feb, 2025-2026
+        return formatMessage(messages.quarterRangeOverYears, {
+          startMonth: formatDate(startDate, {
+            month: 'short'
+          }),
+          endMonth: formatDate(endDate, {
+            month: 'short'
+          }),
+          startYear: formatDate(startDate, {
+            year: 'numeric'
+          }),
+          endYear: formatDate(endDate, {
+            year: 'numeric'
+          })
+        });
+      }
+    case 'full':
+      // Nov 1, 2025 - May 19, 2026
+      // Jan 1, 2025, 00:00 - Mar 31, 2025, 23:59
+      return formatMessage(messages.fullRange, {
+        start: formatDate(startDate, _objectSpread(_objectSpread({}, dateOptions), timeOptions)),
+        end: formatDate(endDate, _objectSpread(_objectSpread({}, dateOptions), timeOptions))
+      });
+  }
+}
+var DateRangeRenderType = function DateRangeRenderType(_ref) {
+  var value = _ref.value,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? DATERANGE_TYPE_TEST_ID : _ref$testId;
+  var _useIntl = useIntl(),
+    formatDate = _useIntl.formatDate,
+    formatMessage = _useIntl.formatMessage;
+  var formattedString = getFormattedDateRange(value.start, value.end, formatDate, formatMessage);
+  if (formattedString === '') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement(Text, {
+    testId: testId
+  }, formattedString);
+};
+export default DateRangeRenderType;

package/dist/esm/ui/issue-like-table/render-type/date-range/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  quarterRange: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.quarterRange',
+    description: 'The formatted date range for a quarter range',
+    defaultMessage: '{startMonth}-{endMonth}, {year}'
+  },
+  quarterRangeOverYears: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.quarterRangeOverYears',
+    description: 'The formatted date range for a quarter range that spans across multiple years',
+    defaultMessage: '{startMonth}-{endMonth}, {startYear}-{endYear}'
+  },
+  fullRange: {
+    id: 'linkDataSource.issueLikeTable.renderType.dateRange.fullRange',
+    description: 'The formatted date range for a full range (day, month, quarter, or full)',
+    defaultMessage: '{start} - {end}'
+  }
+});

package/dist/esm/ui/issue-like-table/render-type/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import BooleanRenderType from './boolean';
+import DateRangeRenderType, { getFormattedDateRange } from './date-range';
 import DateTimeRenderType, { getFormattedDate } from './date-time';
 import IconRenderType from './icon';
 import LinkRenderType from './link';
@@ -23,6 +24,13 @@ export var stringifyType = function stringifyType(_ref, formatMessage, formatDat
       return getFormattedDate(value, 'date', formatDate);
     case 'datetime':
       return getFormattedDate(value, 'datetime', formatDate);
+    case 'daterange':
+      {
+        if (fg('jpd_confluence_date_fields_improvements')) {
+          return getFormattedDateRange(value.start, value.end, formatDate, formatMessage);
+        }
+        return '';
+      }
     case 'time':
       return getFormattedDate(value, 'time', formatDate);
     case 'icon':
@@ -69,6 +77,17 @@ export var renderType = function renderType(item) {
           display: "datetime"
         });
       });
+    case 'daterange':
+      {
+        if (fg('jpd_confluence_date_fields_improvements')) {
+          return item.values.map(function (dateRangeValue) {
+            return /*#__PURE__*/React.createElement(DateRangeRenderType, {
+              value: dateRangeValue
+            });
+          });
+        }
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+      }
     case 'icon':
       return item.values.map(function (iconValue) {
         return /*#__PURE__*/React.createElement(IconRenderType, iconValue);

package/dist/types/ui/issue-like-table/render-type/date-range/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type IntlShape } from 'react-intl-next';
+import { type DateRangeType } from '@atlaskit/linking-types';
+export interface DateRangeProps {
+    testId?: string;
+    value: DateRangeType['value'];
+}
+export declare const DATERANGE_TYPE_TEST_ID = "link-datasource-render-type--daterange";
+export declare function getFormattedDateRange(startValue: string, endValue: string, formatDate: IntlShape['formatDate'], formatMessage: IntlShape['formatMessage']): string;
+declare const DateRangeRenderType: ({ value, testId }: DateRangeProps) => React.JSX.Element;
+export default DateRangeRenderType;

package/dist/types/ui/issue-like-table/render-type/date-range/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const messages: {
+    quarterRange: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    quarterRangeOverYears: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    fullRange: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types-ts4.5/ui/issue-like-table/render-type/date-range/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type IntlShape } from 'react-intl-next';
+import { type DateRangeType } from '@atlaskit/linking-types';
+export interface DateRangeProps {
+    testId?: string;
+    value: DateRangeType['value'];
+}
+export declare const DATERANGE_TYPE_TEST_ID = "link-datasource-render-type--daterange";
+export declare function getFormattedDateRange(startValue: string, endValue: string, formatDate: IntlShape['formatDate'], formatMessage: IntlShape['formatMessage']): string;
+declare const DateRangeRenderType: ({ value, testId }: DateRangeProps) => React.JSX.Element;
+export default DateRangeRenderType;

package/dist/types-ts4.5/ui/issue-like-table/render-type/date-range/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const messages: {
+    quarterRange: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    quarterRangeOverYears: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    fullRange: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "4.29.4",
+	"version": "4.30.0",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -61,14 +61,14 @@
 		"@atlaskit/jql-ast": "^3.3.0",
 		"@atlaskit/jql-editor": "^5.8.0",
 		"@atlaskit/jql-editor-autocomplete-rest": "^3.0.0",
-		"@atlaskit/layering": "^3.2.0",
+		"@atlaskit/layering": "^3.3.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-client-extension": "^6.0.0",
 		"@atlaskit/linking-common": "^9.8.0",
-		"@atlaskit/linking-types": "^14.1.0",
+		"@atlaskit/linking-types": "^14.2.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.1.0",
-		"@atlaskit/modal-dialog": "^14.6.0",
+		"@atlaskit/modal-dialog": "^14.7.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.6.0",
@@ -77,13 +77,13 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^2.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/react-select": "^3.8.0",
-		"@atlaskit/select": "^21.3.0",
+		"@atlaskit/react-select": "^3.9.0",
+		"@atlaskit/select": "^21.4.0",
 		"@atlaskit/smart-card": "^43.6.0",
 		"@atlaskit/smart-user-picker": "^8.4.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tag": "^14.1.0",
-		"@atlaskit/textfield": "^8.0.0",
+		"@atlaskit/textfield": "^8.1.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tokens": "^8.0.0",
 		"@atlaskit/tooltip": "^20.8.0",
@@ -92,6 +92,7 @@
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"@types/dompurify": "^2.2.3",
+		"date-fns": "^2.17.0",
 		"debounce-promise": "^3.1.2",
 		"dompurify": "^2.5.6",
 		"lodash": "^4.17.21",
@@ -110,7 +111,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/json-ld-types": "^1.4.0",
 		"@atlaskit/link-provider": "^4.0.0",
-		"@atlaskit/link-test-helpers": "^8.4.0",
+		"@atlaskit/link-test-helpers": "^8.5.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@faker-js/faker": "^7.5.0",
@@ -189,6 +190,9 @@
 		},
 		"platform_navx_jira_sllv_rich_text_gate": {
 			"type": "boolean"
+		},
+		"jpd_confluence_date_fields_improvements": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/9c893299-a527-4457-9b46-f3bc4c828766"