@atlaskit/link-datasource 1.29.4 → 1.30.0

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

@@ -1,38 +1,89 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState } from 'react';
+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, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import { DatePicker } from '@atlaskit/datetime-picker';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Popup from '@atlaskit/popup';
+import { R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { CLOLBasicFilters } from '../../types';
 import { dateRangeMessages } from './messages';
 import { PopupComponent } from './PopupComponent';
-import { CustomDropdown, CustomDropdownItem } from './styled';
+import { CustomDateWrapper, CustomDropdown, CustomDropdownItem, DatePickersWrapper, DateRangeErrorMessage, SelectDateRangeButton } from './styled';
 import { PopupTrigger } from './trigger';
+import { getCurrentOptionLabel, getDropdownLabel, getInvalidDateRange } from './utils';
 var lastModifiedValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days', 'pastYear', 'custom'];
 var defaultOptionValue = 'anyTime';
-var filterName = CLOLBasicFilters.lastModified;
 export var DateRangePicker = function DateRangePicker(_ref) {
-  var onSelectionChange = _ref.onSelectionChange;
-  var _useState = useState(null),
+  var onSelectionChange = _ref.onSelectionChange,
+    selection = _ref.selection;
+  var _useState = useState(selection === null || selection === void 0 ? void 0 : selection.value),
     _useState2 = _slicedToArray(_useState, 2),
     currentOption = _useState2[0],
     setCurrentOption = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState(getInvalidDateRange(selection === null || selection === void 0 ? void 0 : selection.from, selection === null || selection === void 0 ? void 0 : selection.to)),
     _useState4 = _slicedToArray(_useState3, 2),
-    isPickerOpen = _useState4[0],
-    setIsPickerOpen = _useState4[1];
+    invalidDateRange = _useState4[0],
+    setInvalidDateRange = _useState4[1];
+  var customFromDate = useRef(selection === null || selection === void 0 ? void 0 : selection.from);
+  var customToDate = useRef(selection === null || selection === void 0 ? void 0 : selection.to);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isPickerOpen = _useState6[0],
+    setIsPickerOpen = _useState6[1];
   var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var onClickFilterOption = 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();
+  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(getInvalidDateRange(customFromDate.current, customToDate.current));
+  };
+  var handleToOnChange = function handleToOnChange(date) {
+    customToDate.current = date;
+    setInvalidDateRange(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(CLOLBasicFilters.lastModified, {
+      optionType: 'dateRange',
+      label: label,
+      value: 'custom',
+      from: customFromDate.current,
+      to: customToDate.current
+    });
     setIsPickerOpen(false);
-    onSelectionChange(filterName, [{
-      optionType: 'defaultOption',
+  };
+  var handleClickFilterOption = useCallback(function (option) {
+    setCurrentOption(option);
+    onSelectionChange(CLOLBasicFilters.lastModified, {
+      optionType: 'dateRange',
       label: option,
       value: option
-    }]);
+    });
+    if (option !== 'custom') {
+      setIsPickerOpen(false);
+    }
   }, [onSelectionChange]);
   var handleTogglePopup = 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.createElement(Popup, {
@@ -44,36 +95,78 @@ export var DateRangePicker = function DateRangePicker(_ref) {
       return /*#__PURE__*/React.createElement(CustomDropdown, null, lastModifiedValues.map(function (option) {
         return /*#__PURE__*/React.createElement(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);
+          }
+        }, getDropdownLabel(option, formatMessage));
+      }), isPickerOpen && isCustomSelected && /*#__PURE__*/React.createElement(CustomDateWrapper, null, /*#__PURE__*/React.createElement(DatePickersWrapper, null, /*#__PURE__*/React.createElement(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(dateRangeMessages.dateRangeFrom),
+        isInvalid: Boolean(invalidDateRange),
+        locale: locale,
+        selectProps: {
+          styles: {
+            placeholder: function placeholder(base) {
+              return _objectSpread(_objectSpread({}, base), {}, {
+                width: 'max-content'
+              });
+            }
           }
-        }, /*#__PURE__*/React.createElement(FormattedMessage, getCurrentOptionLabel(option)));
-      }));
+        }
+      }), /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeToLabel), /*#__PURE__*/React.createElement(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(dateRangeMessages.dateRangeTo),
+        isInvalid: Boolean(invalidDateRange),
+        locale: locale,
+        selectProps: {
+          styles: {
+            placeholder: function placeholder(base) {
+              return _objectSpread(_objectSpread({}, base), {}, {
+                width: 'max-content'
+              });
+            }
+          }
+        }
+      })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessage, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+        size: "small",
+        primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+        label: "Date range error"
+      }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
+        "data-testId": "custom-date-range-update-button",
+        disabled: Boolean(invalidDateRange),
+        onClick: handleClickUpdateDateRange
+      }, formatMessage(dateRangeMessages.dateRangeUpdateButton))));
     },
     placement: "bottom-start",
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(PopupTrigger, {
         triggerProps: triggerProps,
-        optionSelected: !!currentOption,
-        label: formatMessage(dateRangeMessages.dateRangeTitle),
-        selectedLabel: formatMessage(getCurrentOptionLabel(currentOption)),
-        onClickButton: handleTogglePopup
+        isSelected: !!(selection !== null && selection !== void 0 && selection.value) || isPickerOpen,
+        labelPrefix: formatMessage(dateRangeMessages.dateRangeTitle),
+        selectedLabel: 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 ? dateRangeMessages[mapping[option]] : dateRangeMessages[mapping['anyTime']];
 };

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

@@ -39,5 +39,55 @@ export var dateRangeMessages = defineMessages({
     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/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled';
 import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
 export var PopupComponentContainer = styled.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(N0, ")"),
   ':focus': {
     outline: 'none'
@@ -12,11 +14,11 @@ export var PopupComponentContainer = styled.div({
   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))"
 });
 export var CustomDropdown = styled.div({
-  width: '360px',
+  width: '340px',
   background: "var(--ds-background-input, ".concat(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: layers.modal()
 });
 export var CustomDropdownItem = styled.div(function (props) {
   return {
@@ -53,7 +55,7 @@ export var SelectDateRangeButton = styled.button({
   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(N30, ")"),
     cursor: 'pointer'

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

@@ -4,14 +4,14 @@ import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 export var 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.createElement(Button, _extends({}, triggerProps, {
     testId: 'confluence-search-modal--date-range-button',
-    onClick: onClickButton,
-    isSelected: optionSelected,
+    onClick: onClick,
+    isSelected: isSelected,
     iconAfter: /*#__PURE__*/React.createElement("span", {
       style: {
         display: 'flex',
@@ -21,5 +21,5 @@ export var PopupTrigger = function PopupTrigger(_ref) {
       size: "medium",
       label: ""
     }))
-  }), label, selectedLabel ? ": ".concat(selectedLabel) : '');
+  }), labelPrefix, selectedLabel ? ": ".concat(selectedLabel) : '');
 };

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { getFormattedDate } from '../../../../../ui/issue-like-table/render-type/date-time';
+import { dateRangeMessages } from './messages';
+export var 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(dateRangeMessages[mapping[option]]);
+};
+export var 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 = getFormattedDate((selection === null || selection === void 0 ? void 0 : selection.from) || '', 'date', formatDate);
+    var formattedToDate = getFormattedDate((selection === null || selection === void 0 ? void 0 : selection.to) || '', 'date', formatDate);
+    if (hasFromDate && !hasToDate) {
+      return formatMessage(dateRangeMessages.dateRangeAfterLabel, {
+        date: formattedFromDate
+      });
+    }
+    if (!hasFromDate && hasToDate) {
+      return formatMessage(dateRangeMessages.dateRangeBeforeLabel, {
+        date: formattedToDate
+      });
+    }
+    if (hasFromDate && hasToDate) {
+      return "".concat(formattedFromDate, " - ").concat(formattedToDate);
+    }
+  }
+  return getDropdownLabel(selectedOption, formatMessage);
+};
+export var 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.createElement(FormattedMessage, dateRangeMessages.dateRangeCustomInvalidDateAfterToday);
+  }
+  if (dateFrom > dateTo) {
+    return /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeCustomInvalidDateAfterEnd);
+  }
+  if (dateTo > now) {
+    return /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeCustomInvalidToDateAfterToday);
+  }
+  return null;
+};

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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
 import { DateRangePicker } from './filters/date-range-picker';
@@ -11,7 +12,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 = _slicedToArray(_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.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
@@ -22,7 +31,8 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     selection: editedOrCreatedBy || [],
     isHydrating: isHydrating
   }), /*#__PURE__*/React.createElement(DateRangePicker, {
-    onSelectionChange: onChange
+    selection: lastModifiedSelection,
+    onSelectionChange: onDateRangePickerChange
   }));
 };
 export default BasicFilterContainer;

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

@@ -99,14 +99,18 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     _useState10 = _slicedToArray(_useState9, 2),
     visibleColumnKeys = _useState10[0],
     setVisibleColumnKeys = _useState10[1];
-  var _useState11 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified),
+  var _useState11 = useState((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []),
     _useState12 = _slicedToArray(_useState11, 2),
-    lastModified = _useState12[0],
-    setLastModified = _useState12[1];
-  var _useState13 = useState((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []),
+    contributorAccountIds = _useState12[0],
+    setContributorAccountIds = _useState12[1];
+  var _useState13 = 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 = _slicedToArray(_useState13, 2),
-    contributorAccountIds = _useState14[0],
-    setContributorAccountIds = _useState14[1];
+    lastModified = _useState14[0],
+    setLastModified = _useState14[1];
 
   // analytics related parameters
   var searchCount = useRef(0);
@@ -116,15 +120,19 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829210
   var parameters = 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 = useMemo(function () {
     return {
       editedOrCreatedBy: (initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []
@@ -303,8 +311,17 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     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 = useMemo(function () {
     return {
       extensionKey: extensionKey,
@@ -444,10 +461,16 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
       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) {

package/dist/esm/ui/table-footer/powered-by-jsm-assets/index.js

@@ -5,7 +5,7 @@ import { useDatasourceAnalyticsEvents } from '../../../analytics';
 var jsmTextStyles = xcss({
   fontSize: 'small',
   color: 'color.text.subtle',
-  marginLeft: "var(--ds-space-075, 6px)",
+  marginLeft: 'space.075',
   ':hover': {
     color: 'color.link.pressed'
   }

package/dist/types/ui/common/modal/popup-select/types.d.ts

@@ -20,8 +20,10 @@ export type AvatarLabelOption = OptionBase & {
 };
 export type DateRangeType = 'anyTime' | 'today' | 'yesterday' | 'past7Days' | 'past30Days' | 'pastYear' | 'custom';
 export type DateRangeOption = OptionBase & {
-    optionType: 'defaultOption';
+    optionType: 'dateRange';
     value: DateRangeType;
+    from?: string;
+    to?: string;
 };
 export type SelectOption = IconLabelOption | LozengeLabelOption | AvatarLabelOption | DateRangeOption;
 export type FormatOptionLabel = (option: SelectOption) => ReactElement;

package/dist/types/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { SelectOption } from '../../../../common/modal/popup-select/types';
+import { type DateRangeOption } from '../../../../common/modal/popup-select/types';
 import { CLOLBasicFilters } from '../../types';
 interface DateRangeProps {
-    onSelectionChange: (filterType: CLOLBasicFilters, options: SelectOption[]) => void;
+    onSelectionChange: (filterType: CLOLBasicFilters, options: DateRangeOption) => void;
+    selection?: DateRangeOption;
 }
-export declare const DateRangePicker: ({ onSelectionChange }: DateRangeProps) => JSX.Element;
+export declare const DateRangePicker: ({ onSelectionChange, selection, }: DateRangeProps) => JSX.Element;
 export {};

package/dist/types/ui/confluence-search-modal/basic-filters/filters/date-range-picker/messages.d.ts

@@ -39,4 +39,54 @@ export declare const dateRangeMessages: {
         defaultMessage: string;
         description: string;
     };
+    dateRangeFrom: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeTo: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeDateInputPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeCustomInvalidDateAfterToday: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeCustomInvalidToDateAfterToday: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeCustomInvalidDateAfterEnd: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeToLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeUpdateButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeBeforeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeAfterLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.d.ts

@@ -2,9 +2,9 @@
 import type { TriggerProps } from '@atlaskit/popup/types';
 export interface PopupTriggerProps {
     triggerProps: TriggerProps;
-    optionSelected: boolean;
-    label?: string;
+    isSelected: boolean;
+    labelPrefix: string;
     selectedLabel?: string;
-    onClickButton: () => void;
+    onClick: () => void;
 }
-export declare const PopupTrigger: ({ triggerProps, optionSelected, label, selectedLabel, onClickButton, }: PopupTriggerProps) => JSX.Element;
+export declare const PopupTrigger: ({ triggerProps, isSelected, labelPrefix, selectedLabel, onClick, }: PopupTriggerProps) => JSX.Element;

package/dist/types/ui/confluence-search-modal/basic-filters/filters/date-range-picker/utils.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type IntlShape } from 'react-intl-next';
+import { type DateRangeOption, type DateRangeType } from '../../../../common/modal/popup-select/types';
+export declare const getDropdownLabel: (option: DateRangeType | undefined, formatMessage: IntlShape['formatMessage']) => string;
+export declare const getCurrentOptionLabel: (formatDate: IntlShape['formatDate'], formatMessage: IntlShape['formatMessage'], selection?: DateRangeOption) => string;
+export declare const getInvalidDateRange: (from: string | undefined, to: string | undefined) => JSX.Element | null;

package/dist/types/ui/confluence-search-modal/basic-filters/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SelectOption } from '../../common/modal/popup-select/types';
-import { CLOLBasicFilters, SelectedOptionsMap } from './types';
+import { type SelectOption } from '../../common/modal/popup-select/types';
+import { type CLOLBasicFilters, type SelectedOptionsMap } from './types';
 export interface BasicFilterContainerProps {
     cloudId?: string;
     selections: SelectedOptionsMap;

package/dist/types/ui/confluence-search-modal/confluence-search-container/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CLOLBasicFilters, SelectedOptionsMap } from '../basic-filters/types';
+import { CLOLBasicFilters, type SelectedOptionsMap } from '../basic-filters/types';
 export type FilterInitialSelectionMap = {
     [CLOLBasicFilters.editedOrCreatedBy]?: string[];
 };

package/dist/types/ui/confluence-search-modal/modal/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { jsx } from '@emotion/react';
 import { DatasourceAction } from '../../../analytics/types';
-import { ConfluenceSearchConfigModalProps } from '../types';
+import { type ConfluenceSearchConfigModalProps } from '../types';
 export declare const getColumnAction: (oldVisibleColumnKeys: string[], newVisibleColumnKeys: string[]) => DatasourceAction;
 export declare const PlainConfluenceSearchConfigModal: (props: ConfluenceSearchConfigModalProps) => jsx.JSX.Element;
 export declare const ConfluenceSearchConfigModal: import("react").ForwardRefExoticComponent<ConfluenceSearchConfigModalProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;