@atlaskit/link-datasource 1.29.5 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.30.0
+
+### Minor Changes
+
+- [#92396](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92396) [`f13614517fe4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f13614517fe4) - [ux] Introduces a custom date range filter for confluence smart link list view modal
+
 ## 1.29.5
 
 ### Patch Changes

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -6,43 +6,94 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateRangePicker = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _datetimePicker = require("@atlaskit/datetime-picker");
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _types = require("../../types");
 var _messages = require("./messages");
 var _PopupComponent = require("./PopupComponent");
 var _styled = require("./styled");
 var _trigger = require("./trigger");
+var _utils = require("./utils");
 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 && Object.prototype.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 lastModifiedValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days', 'pastYear', 'custom'];
 var defaultOptionValue = 'anyTime';
-var filterName = _types.CLOLBasicFilters.lastModified;
 var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
-  var onSelectionChange = _ref.onSelectionChange;
-  var _useState = (0, _react.useState)(null),
+  var onSelectionChange = _ref.onSelectionChange,
+    selection = _ref.selection;
+  var _useState = (0, _react.useState)(selection === null || selection === void 0 ? void 0 : selection.value),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentOption = _useState2[0],
     setCurrentOption = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)((0, _utils.getInvalidDateRange)(selection === null || selection === void 0 ? void 0 : selection.from, selection === null || selection === void 0 ? void 0 : selection.to)),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isPickerOpen = _useState4[0],
-    setIsPickerOpen = _useState4[1];
+    invalidDateRange = _useState4[0],
+    setInvalidDateRange = _useState4[1];
+  var customFromDate = (0, _react.useRef)(selection === null || selection === void 0 ? void 0 : selection.from);
+  var customToDate = (0, _react.useRef)(selection === null || selection === void 0 ? void 0 : selection.to);
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isPickerOpen = _useState6[0],
+    setIsPickerOpen = _useState6[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  var onClickFilterOption = (0, _react.useCallback)(function (option) {
-    setCurrentOption(option);
+    locale = _useIntl.locale,
+    formatMessage = _useIntl.formatMessage,
+    formatDate = _useIntl.formatDate;
+  var isCustomSelected = currentOption === 'custom' || (selection === null || selection === void 0 ? void 0 : selection.value) === 'custom';
+  var maxDate = new Date().toISOString();
+  (0, _react.useEffect)(function () {
+    if (isPickerOpen) {
+      customFromDate.current = selection === null || selection === void 0 ? void 0 : selection.from;
+      customToDate.current = selection === null || selection === void 0 ? void 0 : selection.to;
+    }
+  }, [isPickerOpen, selection === null || selection === void 0 ? void 0 : selection.from, selection === null || selection === void 0 ? void 0 : selection.to]);
+  var handleFromOnChange = function handleFromOnChange(date) {
+    customFromDate.current = date;
+    setInvalidDateRange((0, _utils.getInvalidDateRange)(customFromDate.current, customToDate.current));
+  };
+  var handleToOnChange = function handleToOnChange(date) {
+    customToDate.current = date;
+    setInvalidDateRange((0, _utils.getInvalidDateRange)(customFromDate.current, customToDate.current));
+  };
+  var handleClickUpdateDateRange = function handleClickUpdateDateRange() {
+    var label = 'custom';
+    if (customFromDate.current && !customToDate.current) {
+      label = customFromDate.current;
+    } else if (customToDate.current && !customFromDate.current) {
+      label = customToDate.current;
+    }
+    onSelectionChange(_types.CLOLBasicFilters.lastModified, {
+      optionType: 'dateRange',
+      label: label,
+      value: 'custom',
+      from: customFromDate.current,
+      to: customToDate.current
+    });
     setIsPickerOpen(false);
-    onSelectionChange(filterName, [{
-      optionType: 'defaultOption',
+  };
+  var handleClickFilterOption = (0, _react.useCallback)(function (option) {
+    setCurrentOption(option);
+    onSelectionChange(_types.CLOLBasicFilters.lastModified, {
+      optionType: 'dateRange',
       label: option,
       value: option
-    }]);
+    });
+    if (option !== 'custom') {
+      setIsPickerOpen(false);
+    }
   }, [onSelectionChange]);
   var handleTogglePopup = (0, _react.useCallback)(function () {
+    // If users click out of popup, we let selection prop define the current option when opened again until user sets state
+    setCurrentOption(undefined);
     setIsPickerOpen(!isPickerOpen);
   }, [isPickerOpen]);
   return /*#__PURE__*/_react.default.createElement(_popup.default, {
@@ -54,36 +105,78 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
       return /*#__PURE__*/_react.default.createElement(_styled.CustomDropdown, null, lastModifiedValues.map(function (option) {
         return /*#__PURE__*/_react.default.createElement(_styled.CustomDropdownItem, {
           key: option
-          //want to show Anytime as selected if none of the other options are selected
+          // want to show Anytime as selected if none of the other options are selected
           ,
-          isSelected: currentOption ? option === currentOption : option === defaultOptionValue,
+          isSelected: selection !== null && selection !== void 0 && selection.value ? option === selection.value : option === defaultOptionValue,
           onClick: function onClick() {
-            return onClickFilterOption(option);
+            return handleClickFilterOption(option);
+          }
+        }, (0, _utils.getDropdownLabel)(option, formatMessage));
+      }), isPickerOpen && isCustomSelected && /*#__PURE__*/_react.default.createElement(_styled.CustomDateWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.DatePickersWrapper, null, /*#__PURE__*/_react.default.createElement(_datetimePicker.DatePicker, {
+        maxDate: maxDate,
+        innerProps: {
+          style: {
+            width: 140
+          }
+        },
+        testId: "date-from-picker",
+        dateFormat: "D MMM YYYY",
+        onChange: handleFromOnChange,
+        defaultValue: selection === null || selection === void 0 ? void 0 : selection.from,
+        placeholder: formatMessage(_messages.dateRangeMessages.dateRangeFrom),
+        isInvalid: Boolean(invalidDateRange),
+        locale: locale,
+        selectProps: {
+          styles: {
+            placeholder: function placeholder(base) {
+              return _objectSpread(_objectSpread({}, base), {}, {
+                width: 'max-content'
+              });
+            }
           }
-        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getCurrentOptionLabel(option)));
-      }));
+        }
+      }), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.dateRangeMessages.dateRangeToLabel), /*#__PURE__*/_react.default.createElement(_datetimePicker.DatePicker, {
+        maxDate: maxDate,
+        innerProps: {
+          style: {
+            width: 140
+          }
+        },
+        testId: "date-to-picker",
+        dateFormat: "D MMM YYYY",
+        onChange: handleToOnChange,
+        defaultValue: selection === null || selection === void 0 ? void 0 : selection.to,
+        placeholder: formatMessage(_messages.dateRangeMessages.dateRangeTo),
+        isInvalid: Boolean(invalidDateRange),
+        locale: locale,
+        selectProps: {
+          styles: {
+            placeholder: function placeholder(base) {
+              return _objectSpread(_objectSpread({}, base), {}, {
+                width: 'max-content'
+              });
+            }
+          }
+        }
+      })), invalidDateRange && /*#__PURE__*/_react.default.createElement(_styled.DateRangeErrorMessage, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+        size: "small",
+        primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
+        label: "Date range error"
+      }), invalidDateRange), /*#__PURE__*/_react.default.createElement(_styled.SelectDateRangeButton, {
+        "data-testId": "custom-date-range-update-button",
+        disabled: Boolean(invalidDateRange),
+        onClick: handleClickUpdateDateRange
+      }, formatMessage(_messages.dateRangeMessages.dateRangeUpdateButton))));
     },
     placement: "bottom-start",
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/_react.default.createElement(_trigger.PopupTrigger, {
         triggerProps: triggerProps,
-        optionSelected: !!currentOption,
-        label: formatMessage(_messages.dateRangeMessages.dateRangeTitle),
-        selectedLabel: formatMessage(getCurrentOptionLabel(currentOption)),
-        onClickButton: handleTogglePopup
+        isSelected: !!(selection !== null && selection !== void 0 && selection.value) || isPickerOpen,
+        labelPrefix: formatMessage(_messages.dateRangeMessages.dateRangeTitle),
+        selectedLabel: (0, _utils.getCurrentOptionLabel)(formatDate, formatMessage, selection),
+        onClick: handleTogglePopup
       });
     }
   });
-};
-var getCurrentOptionLabel = function getCurrentOptionLabel(option) {
-  var mapping = {
-    anyTime: 'dateRangeAnyTime',
-    today: 'dateRangeToday',
-    yesterday: 'dateRangeYesterday',
-    past7Days: 'dateRangeLastWeek',
-    past30Days: 'dateRangeLastMonth',
-    pastYear: 'dateRangeLastYear',
-    custom: 'dateRangeCustom'
-  };
-  return option ? _messages.dateRangeMessages[mapping[option]] : _messages.dateRangeMessages[mapping['anyTime']];
 };

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/messages.js

@@ -45,5 +45,55 @@ var dateRangeMessages = exports.dateRangeMessages = (0, _reactIntlNext.defineMes
     id: 'linkDataSource.confluence-search.configmodal.date.range.custom',
     defaultMessage: 'Custom',
     description: 'Custom date range'
+  },
+  dateRangeFrom: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.from',
+    defaultMessage: 'From',
+    description: 'Filter starting from a custom date'
+  },
+  dateRangeTo: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.to',
+    defaultMessage: 'To',
+    description: 'Filter up to a custom date'
+  },
+  dateRangeDateInputPlaceholder: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.input.placeholder',
+    defaultMessage: 'Choose a date',
+    description: 'Placeholder text for date input'
+  },
+  dateRangeCustomInvalidDateAfterToday: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.after.today',
+    defaultMessage: 'The From date can’t be in the future',
+    description: 'error displayed when a date range begins after the current date'
+  },
+  dateRangeCustomInvalidToDateAfterToday: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.to.after.today',
+    defaultMessage: 'The To date can’t be in the future',
+    description: 'error displayed when a date range ends after the current date'
+  },
+  dateRangeCustomInvalidDateAfterEnd: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.after.end',
+    defaultMessage: 'The From date has to be before the To date',
+    description: 'error displayed when a date range begins after the end date'
+  },
+  dateRangeToLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.to.Label',
+    defaultMessage: 'to',
+    description: "'to' in between from and to date pickers"
+  },
+  dateRangeUpdateButton: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.update.button',
+    defaultMessage: 'Update',
+    description: 'Text for update button in date filter picker'
+  },
+  dateRangeBeforeLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.before.label',
+    defaultMessage: 'before {date}',
+    description: '`before date` for date picker dropdown'
+  },
+  dateRangeAfterLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.after.label',
+    defaultMessage: 'after {date}',
+    description: '`after date` for date picker dropdown'
   }
 });

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectDateRangeButton = exports.PopupComponentContainer = exports.DateRangeErrorMessage = exports.DatePickersWrapper = exports.CustomDropdownItem = exports.CustomDropdown = exports.CustomDateWrapper = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
 var PopupComponentContainer = exports.PopupComponentContainer = _styled.default.div({
   boxSizing: 'border-box',
   display: 'block',
   flex: '1 1 auto',
   overflow: 'visible',
+  borderRadius: "var(--ds-border-radius-200, 3px)",
   background: "var(--ds-background-input, ".concat(_colors.N0, ")"),
   ':focus': {
     outline: 'none'
@@ -19,11 +21,11 @@ var PopupComponentContainer = exports.PopupComponentContainer = _styled.default.
   boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
 });
 var CustomDropdown = exports.CustomDropdown = _styled.default.div({
-  width: '360px',
+  width: '340px',
   background: "var(--ds-background-input, ".concat(_colors.N0, ")"),
-  borderRadius: '3px',
+  borderRadius: "var(--ds-border-radius-200, 3px)",
   boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
-  zIndex: '900'
+  zIndex: _constants.layers.modal()
 });
 var CustomDropdownItem = exports.CustomDropdownItem = _styled.default.div(function (props) {
   return {
@@ -60,7 +62,7 @@ var SelectDateRangeButton = exports.SelectDateRangeButton = _styled.default.butt
   width: '70px',
   height: '40px',
   marginTop: "var(--ds-space-150, 12px)",
-  borderRadius: '3px',
+  borderRadius: "var(--ds-border-radius-200, 3px)",
   '&:hover': {
     background: "var(--ds-background-accent-gray-subtler, ".concat(_colors.N30, ")"),
     cursor: 'pointer'

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -11,14 +11,14 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
   var triggerProps = _ref.triggerProps,
-    optionSelected = _ref.optionSelected,
-    label = _ref.label,
+    isSelected = _ref.isSelected,
+    labelPrefix = _ref.labelPrefix,
     selectedLabel = _ref.selectedLabel,
-    onClickButton = _ref.onClickButton;
+    onClick = _ref.onClick;
   return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, triggerProps, {
     testId: 'confluence-search-modal--date-range-button',
-    onClick: onClickButton,
-    isSelected: optionSelected,
+    onClick: onClick,
+    isSelected: isSelected,
     iconAfter: /*#__PURE__*/_react.default.createElement("span", {
       style: {
         display: 'flex',
@@ -28,5 +28,5 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
       size: "medium",
       label: ""
     }))
-  }), label, selectedLabel ? ": ".concat(selectedLabel) : '');
+  }), labelPrefix, selectedLabel ? ": ".concat(selectedLabel) : '');
 };

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/utils.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInvalidDateRange = exports.getDropdownLabel = exports.getCurrentOptionLabel = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _dateTime = require("../../../../../ui/issue-like-table/render-type/date-time");
+var _messages = require("./messages");
+var getDropdownLabel = exports.getDropdownLabel = function getDropdownLabel() {
+  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'anyTime';
+  var formatMessage = arguments.length > 1 ? arguments[1] : undefined;
+  var mapping = {
+    anyTime: 'dateRangeAnyTime',
+    today: 'dateRangeToday',
+    yesterday: 'dateRangeYesterday',
+    past7Days: 'dateRangeLastWeek',
+    past30Days: 'dateRangeLastMonth',
+    pastYear: 'dateRangeLastYear',
+    custom: 'dateRangeCustom'
+  };
+  return formatMessage(_messages.dateRangeMessages[mapping[option]]);
+};
+var getCurrentOptionLabel = exports.getCurrentOptionLabel = function getCurrentOptionLabel(formatDate, formatMessage, selection) {
+  var selectedOption = selection === null || selection === void 0 ? void 0 : selection.value;
+  if (selectedOption === 'custom') {
+    var hasFromDate = !!(selection !== null && selection !== void 0 && selection.from);
+    var hasToDate = !!(selection !== null && selection !== void 0 && selection.to);
+    var formattedFromDate = (0, _dateTime.getFormattedDate)((selection === null || selection === void 0 ? void 0 : selection.from) || '', 'date', formatDate);
+    var formattedToDate = (0, _dateTime.getFormattedDate)((selection === null || selection === void 0 ? void 0 : selection.to) || '', 'date', formatDate);
+    if (hasFromDate && !hasToDate) {
+      return formatMessage(_messages.dateRangeMessages.dateRangeAfterLabel, {
+        date: formattedFromDate
+      });
+    }
+    if (!hasFromDate && hasToDate) {
+      return formatMessage(_messages.dateRangeMessages.dateRangeBeforeLabel, {
+        date: formattedToDate
+      });
+    }
+    if (hasFromDate && hasToDate) {
+      return "".concat(formattedFromDate, " - ").concat(formattedToDate);
+    }
+  }
+  return getDropdownLabel(selectedOption, formatMessage);
+};
+var getInvalidDateRange = exports.getInvalidDateRange = function getInvalidDateRange(from, to) {
+  if (!from && !to) {
+    return null;
+  }
+  var dateFrom = new Date("".concat(from).concat(from ? 'T00:00:00' : ''));
+  var dateTo = new Date("".concat(to).concat(to ? 'T00:00:00' : ''));
+  var now = new Date();
+  if (dateFrom > now) {
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.dateRangeMessages.dateRangeCustomInvalidDateAfterToday);
+  }
+  if (dateFrom > dateTo) {
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.dateRangeMessages.dateRangeCustomInvalidDateAfterEnd);
+  }
+  if (dateTo > now) {
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.dateRangeMessages.dateRangeCustomInvalidToDateAfterToday);
+  }
+  return null;
+};

package/dist/cjs/ui/confluence-search-modal/basic-filters/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _primitives = require("@atlaskit/primitives");
 var _dateRangePicker = require("./filters/date-range-picker");
@@ -18,7 +19,15 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     _ref$selections = _ref.selections,
     selections = _ref$selections === void 0 ? {} : _ref$selections,
     isHydrating = _ref.isHydrating;
-  var editedOrCreatedBy = selections.editedOrCreatedBy;
+  var lastModified = selections.lastModified,
+    editedOrCreatedBy = selections.editedOrCreatedBy;
+  var _ref2 = lastModified || [],
+    _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+    lastModifiedValue = _ref3[0];
+  var lastModifiedSelection = (lastModifiedValue === null || lastModifiedValue === void 0 ? void 0 : lastModifiedValue.optionType) === 'dateRange' ? lastModifiedValue : undefined;
+  var onDateRangePickerChange = function onDateRangePickerChange(filterType, updatedOption) {
+    onChange(filterType, [updatedOption]);
+  };
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
@@ -29,7 +38,8 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     selection: editedOrCreatedBy || [],
     isHydrating: isHydrating
   }), /*#__PURE__*/_react.default.createElement(_dateRangePicker.DateRangePicker, {
-    onSelectionChange: onChange
+    selection: lastModifiedSelection,
+    onSelectionChange: onDateRangePickerChange
   }));
 };
 var _default = exports.default = BasicFilterContainer;

package/dist/cjs/ui/confluence-search-modal/modal/index.js

@@ -108,14 +108,18 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     visibleColumnKeys = _useState10[0],
     setVisibleColumnKeys = _useState10[1];
-  var _useState11 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified),
+  var _useState11 = (0, _react.useState)((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    lastModified = _useState12[0],
-    setLastModified = _useState12[1];
-  var _useState13 = (0, _react.useState)((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []),
+    contributorAccountIds = _useState12[0],
+    setContributorAccountIds = _useState12[1];
+  var _useState13 = (0, _react.useState)(initialParameters !== null && initialParameters !== void 0 && initialParameters.lastModified ? {
+      value: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified,
+      from: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedFrom,
+      to: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedTo
+    } : undefined),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    contributorAccountIds = _useState14[0],
-    setContributorAccountIds = _useState14[1];
+    lastModified = _useState14[0],
+    setLastModified = _useState14[1];
 
   // analytics related parameters
   var searchCount = (0, _react.useRef)(0);
@@ -125,15 +129,19 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829210
   var parameters = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, initialParameters), {}, {
+    return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, initialParameters), {}, {
       cloudId: cloudId,
       searchString: searchString
-    }, ((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified) || lastModified) && {
-      lastModified: lastModified
+    }, ((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified) || (lastModified === null || lastModified === void 0 ? void 0 : lastModified.value)) && {
+      lastModified: lastModified === null || lastModified === void 0 ? void 0 : lastModified.value
+    }), ((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedFrom) || (lastModified === null || lastModified === void 0 ? void 0 : lastModified.from)) && {
+      lastModifiedFrom: lastModified === null || lastModified === void 0 ? void 0 : lastModified.from
+    }), ((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedTo) || (lastModified === null || lastModified === void 0 ? void 0 : lastModified.to)) && {
+      lastModifiedTo: lastModified === null || lastModified === void 0 ? void 0 : lastModified.to
     }), ((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || (contributorAccountIds === null || contributorAccountIds === void 0 ? void 0 : contributorAccountIds.length) > 0) && {
       contributorAccountIds: contributorAccountIds
     });
-  }, [cloudId, lastModified, contributorAccountIds, initialParameters, searchString /** Add more parameters when more filters are added */]);
+  }, [initialParameters, cloudId, searchString, lastModified, contributorAccountIds]);
   var initialFilterSelection = (0, _react.useMemo)(function () {
     return {
       editedOrCreatedBy: (initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []
@@ -312,8 +320,17 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     if (contributorAccountIds.length > 0) {
       params.append('contributors', contributorAccountIds.join(','));
     }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.value) {
+      params.append('lastModified', lastModified.value);
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.from) {
+      params.append('from', lastModified === null || lastModified === void 0 ? void 0 : lastModified.from);
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.to) {
+      params.append('to', lastModified === null || lastModified === void 0 ? void 0 : lastModified.to);
+    }
     return "".concat(selectedConfluenceSiteUrl, "/wiki/search?").concat(params.toString());
-  }, [contributorAccountIds, searchString, selectedConfluenceSiteUrl]);
+  }, [contributorAccountIds, lastModified, searchString, selectedConfluenceSiteUrl]);
   var analyticsPayload = (0, _react.useMemo)(function () {
     return {
       extensionKey: extensionKey,
@@ -453,10 +470,16 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
       var editedOrCreatedBy = filters.editedOrCreatedBy,
         _lastModified = filters.lastModified;
       if (_lastModified) {
-        var lastModifiedValue = _lastModified.find(function (range) {
+        var updatedDateRangeOption = _lastModified.find(function (range) {
           return range.value;
         });
-        setLastModified(lastModifiedValue === null || lastModifiedValue === void 0 ? void 0 : lastModifiedValue.value);
+        if ((updatedDateRangeOption === null || updatedDateRangeOption === void 0 ? void 0 : updatedDateRangeOption.optionType) === 'dateRange') {
+          setLastModified({
+            value: updatedDateRangeOption.value,
+            from: updatedDateRangeOption.from,
+            to: updatedDateRangeOption.to
+          });
+        }
       }
       if (editedOrCreatedBy) {
         var accountIds = editedOrCreatedBy.map(function (user) {