@atlaskit/link-datasource 1.27.4 → 1.28.0

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

@@ -0,0 +1,68 @@
+import React, { useCallback, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Popup from '@atlaskit/popup';
+import { layers } from '@atlaskit/theme/constants';
+import { CLOLBasicFilters } from '../../types';
+import { dateRangeMessages } from './messages';
+import { PopupComponent } from './PopupComponent';
+import { CustomDropdown, CustomDropdownItem } from './styled';
+import { PopupTrigger } from './trigger';
+const lastModifiedValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days', 'pastYear', 'custom'];
+const defaultOptionValue = 'anyTime';
+const filterName = CLOLBasicFilters.lastModified;
+export const DateRangePicker = ({
+  onSelectionChange
+}) => {
+  const [currentOption, setCurrentOption] = useState(null);
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const {
+    formatMessage
+  } = useIntl();
+  const onClickFilterOption = useCallback(option => {
+    setCurrentOption(option);
+    setIsPickerOpen(false);
+    onSelectionChange(filterName, [{
+      optionType: 'defaultOption',
+      label: option,
+      value: option
+    }]);
+  }, [onSelectionChange]);
+  const handleTogglePopup = useCallback(() => {
+    setIsPickerOpen(!isPickerOpen);
+  }, [isPickerOpen]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isPickerOpen,
+    onClose: handleTogglePopup,
+    popupComponent: PopupComponent,
+    zIndex: layers.modal(),
+    content: () => {
+      return /*#__PURE__*/React.createElement(CustomDropdown, null, lastModifiedValues.map(option => /*#__PURE__*/React.createElement(CustomDropdownItem, {
+        key: option
+        //want to show Anytime as selected if none of the other options are selected
+        ,
+        isSelected: currentOption ? option === currentOption : option === defaultOptionValue,
+        onClick: () => onClickFilterOption(option)
+      }, /*#__PURE__*/React.createElement(FormattedMessage, getCurrentOptionLabel(option)))));
+    },
+    placement: "bottom-start",
+    trigger: triggerProps => /*#__PURE__*/React.createElement(PopupTrigger, {
+      triggerProps: triggerProps,
+      optionSelected: !!currentOption,
+      label: formatMessage(dateRangeMessages.dateRangeTitle),
+      selectedLabel: formatMessage(getCurrentOptionLabel(currentOption)),
+      onClickButton: handleTogglePopup
+    })
+  });
+};
+const getCurrentOptionLabel = option => {
+  const 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/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/messages.js

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl-next';
+export const dateRangeMessages = defineMessages({
+  dateRangeTitle: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.title',
+    defaultMessage: 'Last updated',
+    description: 'Filter by the date content was modified'
+  },
+  dateRangeAnyTime: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.any.time',
+    defaultMessage: 'Anytime',
+    description: 'Option to show content from any time'
+  },
+  dateRangeToday: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.today',
+    defaultMessage: 'Today',
+    description: 'Date range of content modified today'
+  },
+  dateRangeYesterday: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.yesterday',
+    defaultMessage: 'Yesterday',
+    description: 'Date range of content modified yesterday'
+  },
+  dateRangeLastWeek: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.last.week',
+    defaultMessage: 'Past 7 days',
+    description: 'Date range of content modified in the last 7 days'
+  },
+  dateRangeLastMonth: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.last.month',
+    defaultMessage: 'Past 30 days',
+    description: 'Date range of content modified in the last 30 days'
+  },
+  dateRangeLastYear: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.last.year',
+    defaultMessage: 'Past year',
+    description: 'Date range of content modified in the last 365 days'
+  },
+  dateRangeCustom: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.custom',
+    defaultMessage: 'Custom',
+    description: 'Custom date range'
+  }
+});

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

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
+export const PopupComponentContainer = styled.div({
+  boxSizing: 'border-box',
+  display: 'block',
+  flex: '1 1 auto',
+  overflow: 'visible',
+  background: `var(--ds-background-input, ${N0})`,
+  ':focus': {
+    outline: 'none'
+  },
+  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 const CustomDropdown = styled.div({
+  width: '360px',
+  background: `var(--ds-background-input, ${N0})`,
+  borderRadius: '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'
+});
+export const CustomDropdownItem = styled.div(props => ({
+  height: '36px',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  paddingLeft: props.isSelected ? '15px' : '16px',
+  boxSizing: 'border-box',
+  color: props.isSelected ? `var(--ds-text-selected, ${B400})` : 'inherit',
+  background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : 'transparent',
+  borderLeft: props.isSelected ? `2px solid ${`var(--ds-text-selected, ${B400})`}` : 'none',
+  '&:hover': {
+    background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : `var(--ds-background-input-hovered, ${N20})`,
+    cursor: 'default'
+  }
+}));
+export const CustomDateWrapper = styled.div({
+  padding: "var(--ds-space-150, 12px)",
+  boxSizing: 'border-box'
+});
+export const DatePickersWrapper = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%'
+});
+export const SelectDateRangeButton = styled.button({
+  background: `var(--ds-background-accent-gray-subtler, ${N20})`,
+  border: 'none',
+  font: 'inherit',
+  width: '70px',
+  height: '40px',
+  marginTop: "var(--ds-space-150, 12px)",
+  borderRadius: '3px',
+  '&:hover': {
+    background: `var(--ds-background-accent-gray-subtler, ${N30})`,
+    cursor: 'pointer'
+  }
+});
+export const DateRangeErrorMessage = styled.div({
+  display: 'flex',
+  lineHeight: 1.3333,
+  marginTop: "var(--ds-space-050, 4px)",
+  fontSize: '12px',
+  color: `var(--ds-text-danger, ${R400})`
+});

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

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+export const PopupTrigger = ({
+  triggerProps,
+  optionSelected,
+  label,
+  selectedLabel,
+  onClickButton
+}) => {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
+    testId: 'confluence-search-modal--date-range-button',
+    onClick: onClickButton,
+    isSelected: optionSelected,
+    iconAfter: /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      size: "medium",
+      label: ""
+    }))
+  }), label, selectedLabel ? `: ${selectedLabel}` : '');
+};

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

@@ -1,13 +1,18 @@
 import React from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
+import { DateRangePicker } from './filters/date-range-picker';
 const basicFilterContainerStyles = xcss({
   paddingLeft: 'space.100'
 });
-const BasicFilterContainer = ({}) => {
+const BasicFilterContainer = ({
+  onChange
+}) => {
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
     testId: "clol-basic-filter-container"
-  }, /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(React.Fragment, null));
+  }, /*#__PURE__*/React.createElement(DateRangePicker, {
+    onSelectionChange: onChange
+  }), /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 export default BasicFilterContainer;

package/dist/es2019/ui/confluence-search-modal/basic-filters/types.js

@@ -0,0 +1,5 @@
+export let CLOLBasicFilters = /*#__PURE__*/function (CLOLBasicFilters) {
+  CLOLBasicFilters["editedOrCreatedBy"] = "editedOrCreatedBy";
+  CLOLBasicFilters["lastModified"] = "lastModified";
+  return CLOLBasicFilters;
+}({});

package/dist/es2019/ui/confluence-search-modal/confluence-search-container/index.js

@@ -15,6 +15,7 @@ const ConfluenceSearchContainer = ({
 }) => {
   const currentCloudId = useRef(cloudId);
   const [searchBarSearchString, setSearchBarSearchString] = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : '');
+  const [filterSelections, setFilterSelections] = useState({});
   const handleSearchChange = useCallback(e => {
     const rawSearch = e.currentTarget.value;
     setSearchBarSearchString(rawSearch);
@@ -28,6 +29,15 @@ const ConfluenceSearchContainer = ({
       currentCloudId.current = cloudId;
     }
   }, [cloudId]);
+  const handleBasicFilterSelectionChange = useCallback((filterType, options) => {
+    const updatedSelection = {
+      ...filterSelections,
+      [filterType]: options
+    };
+    setFilterSelections(updatedSelection);
+    //TODO: move to debounce fn in https://product-fabric.atlassian.net/browse/EDM-9485
+    onSearch(searchBarSearchString, updatedSelection);
+  }, [filterSelections, onSearch, searchBarSearchString]);
   const showBasicFilters = useMemo(() => {
     if (getBooleanFF('platform.linking-platform.datasource.show-clol-basic-filters')) {
       return true;
@@ -45,6 +55,8 @@ const ConfluenceSearchContainer = ({
     searchTerm: searchBarSearchString,
     placeholder: searchMessages.searchLabel,
     fullWidth: !showBasicFilters
-  }), showBasicFilters && /*#__PURE__*/React.createElement(BasicFilters, null));
+  }), showBasicFilters && /*#__PURE__*/React.createElement(BasicFilters, {
+    onChange: handleBasicFilterSelectionChange
+  }));
 };
 export default ConfluenceSearchContainer;

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

@@ -78,6 +78,7 @@ export const PlainConfluenceSearchConfigModal = props => {
   const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
   const [searchString, setSearchString] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString);
   const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+  const [lastModified, setLastModified] = useState();
 
   // analytics related parameters
   const searchCount = useRef(0);
@@ -89,8 +90,11 @@ export const PlainConfluenceSearchConfigModal = props => {
   const parameters = useMemo(() => ({
     ...initialParameters,
     cloudId,
-    searchString
-  }), [cloudId, initialParameters, searchString /** Add more parameters when more filters are added */]);
+    searchString,
+    ...(lastModified && {
+      lastModified
+    })
+  }), [cloudId, lastModified, initialParameters, searchString /** Add more parameters when more filters are added */]);
   const isParametersSet = useMemo(() => !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(v => v !== undefined).length > 1, [cloudId, parameters]);
   const parametersToSend = useMemo(() => {
     if (!isParametersSet) {
@@ -360,9 +364,13 @@ export const PlainConfluenceSearchConfigModal = props => {
     userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
-  const onSearch = useCallback(newSearchString => {
+  const onSearch = useCallback((newSearchString, filters) => {
     searchCount.current++;
     userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+    if (filters !== null && filters !== void 0 && filters.lastModified) {
+      const lastModifiedValue = filters.lastModified.find(range => range.value);
+      setLastModified(lastModifiedValue === null || lastModifiedValue === void 0 ? void 0 : lastModifiedValue.value);
+    }
     setSearchString(newSearchString);
     reset({
       shouldForceRequest: true

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -173,6 +173,7 @@ const DatasourceTableViewWithoutAnalytics = ({
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), jsx(TableFooter, {
+    datasourceId: datasourceId,
     itemCount: isDataReady ? totalCount : undefined,
     onRefresh: onRefresh,
     isLoading: !isDataReady || status === 'loading',

package/dist/es2019/ui/table-footer/index.js

@@ -7,9 +7,12 @@ import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import Heading from '@atlaskit/heading';
 import RefreshIcon from '@atlaskit/icon/glyph/refresh';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
+import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
 import { footerMessages } from './messages';
+import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { SyncInfo } from './sync-info';
 const FooterWrapper = styled.div({
   padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-200, 16px)"}`,
@@ -40,6 +43,7 @@ const SyncTextWrapper = styled.div({
   fontSize: '12px'
 });
 export const TableFooter = ({
+  datasourceId,
   itemCount,
   onRefresh,
   isLoading,
@@ -77,7 +81,9 @@ export const TableFooter = ({
     values: {
       itemCount
     }
-  }))))), jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
+  }))))), getBooleanFF('platform.linking-platform.datasource-assets_objects_add_jsm_promotional_tag') && datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(PoweredByJSMAssets, {
+    text: intl.formatMessage(footerMessages.powerByJSM)
+  }) : null, jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
     "data-testid": "sync-text"
   }, isLoading ? jsx(FormattedMessage, footerMessages.loadingText) : jsx(SyncInfo, {
     lastSyncTime: lastSyncTime

package/dist/es2019/ui/table-footer/messages.js

@@ -14,5 +14,10 @@ export const footerMessages = defineMessages({
     id: 'linkDataSource.table-footer.refresh',
     description: 'Label for refresh icon',
     defaultMessage: 'Refresh'
+  },
+  powerByJSM: {
+    id: 'linkDataSource.table-footer.power-by-jsm',
+    description: 'Displayed on the issue like table footer to increase JSM Assets visibility',
+    defaultMessage: 'Powered by Assets in Jira Service Management'
   }
 });

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { JiraServiceManagementIcon } from '@atlaskit/logo';
+import { Box, xcss } from '@atlaskit/primitives';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+const jsmTextStyles = xcss({
+  fontSize: 'small',
+  color: 'color.text.subtle',
+  marginLeft: "var(--ds-space-075, 6px)",
+  ':hover': {
+    color: 'color.link.pressed'
+  }
+});
+const jsmContainerStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row-reverse'
+});
+export const PoweredByJSMAssets = props => {
+  const ASSETS_LINK = '/jira/servicedesk/assets';
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: jsmContainerStyles,
+    padding: "space.150"
+  }, /*#__PURE__*/React.createElement("a", {
+    "data-testid": 'powered-by-jsm-assets-link',
+    onClick: () => fireEvent('ui.link.clicked.poweredBy', {
+      componentHierarchy: 'datasourceTable',
+      extensionKey: 'jsm-cmdb-gateway'
+    }),
+    href: ASSETS_LINK,
+    rel: "noreferrer",
+    target: "_blank",
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(JiraServiceManagementIcon, {
+    size: "xsmall",
+    appearance: "brand",
+    label: props.text
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: jsmTextStyles
+  }, props.text)));
+};

package/dist/esm/ui/common/modal/popup-select/formatOptionLabel.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import Avatar from '@atlaskit/avatar';
 import PeopleGroupIcon from '@atlaskit/icon/glyph/people-group';
 import Lozenge from '@atlaskit/lozenge';
@@ -63,6 +63,9 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
   }, data.label));
 };
 var formatOptionLabel = function formatOptionLabel(data) {
+  if (data.optionType === 'defaultOption') {
+    return /*#__PURE__*/React.createElement(Fragment, null);
+  }
   if (data.optionType === 'lozengeLabel') {
     return /*#__PURE__*/React.createElement(LozengeOptionLabel, {
       data: data

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

@@ -0,0 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { PopupComponentContainer } from './styled';
+export var PopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(PopupComponentContainer, _extends({}, props, {
+    "data-testId": 'confluence-search-datasource-popup-container',
+    ref: ref
+  }));
+});

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

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Popup from '@atlaskit/popup';
+import { layers } from '@atlaskit/theme/constants';
+import { CLOLBasicFilters } from '../../types';
+import { dateRangeMessages } from './messages';
+import { PopupComponent } from './PopupComponent';
+import { CustomDropdown, CustomDropdownItem } from './styled';
+import { PopupTrigger } from './trigger';
+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),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentOption = _useState2[0],
+    setCurrentOption = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPickerOpen = _useState4[0],
+    setIsPickerOpen = _useState4[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onClickFilterOption = useCallback(function (option) {
+    setCurrentOption(option);
+    setIsPickerOpen(false);
+    onSelectionChange(filterName, [{
+      optionType: 'defaultOption',
+      label: option,
+      value: option
+    }]);
+  }, [onSelectionChange]);
+  var handleTogglePopup = useCallback(function () {
+    setIsPickerOpen(!isPickerOpen);
+  }, [isPickerOpen]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isPickerOpen,
+    onClose: handleTogglePopup,
+    popupComponent: PopupComponent,
+    zIndex: layers.modal(),
+    content: function content() {
+      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
+          ,
+          isSelected: currentOption ? option === currentOption : option === defaultOptionValue,
+          onClick: function onClick() {
+            return onClickFilterOption(option);
+          }
+        }, /*#__PURE__*/React.createElement(FormattedMessage, getCurrentOptionLabel(option)));
+      }));
+    },
+    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
+      });
+    }
+  });
+};
+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

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl-next';
+export var dateRangeMessages = defineMessages({
+  dateRangeTitle: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.title',
+    defaultMessage: 'Last updated',
+    description: 'Filter by the date content was modified'
+  },
+  dateRangeAnyTime: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.any.time',
+    defaultMessage: 'Anytime',
+    description: 'Option to show content from any time'
+  },
+  dateRangeToday: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.today',
+    defaultMessage: 'Today',
+    description: 'Date range of content modified today'
+  },
+  dateRangeYesterday: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.yesterday',
+    defaultMessage: 'Yesterday',
+    description: 'Date range of content modified yesterday'
+  },
+  dateRangeLastWeek: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.last.week',
+    defaultMessage: 'Past 7 days',
+    description: 'Date range of content modified in the last 7 days'
+  },
+  dateRangeLastMonth: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.last.month',
+    defaultMessage: 'Past 30 days',
+    description: 'Date range of content modified in the last 30 days'
+  },
+  dateRangeLastYear: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.last.year',
+    defaultMessage: 'Past year',
+    description: 'Date range of content modified in the last 365 days'
+  },
+  dateRangeCustom: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.custom',
+    defaultMessage: 'Custom',
+    description: 'Custom date range'
+  }
+});

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

@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
+export var PopupComponentContainer = styled.div({
+  boxSizing: 'border-box',
+  display: 'block',
+  flex: '1 1 auto',
+  overflow: 'visible',
+  background: "var(--ds-background-input, ".concat(N0, ")"),
+  ':focus': {
+    outline: 'none'
+  },
+  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',
+  background: "var(--ds-background-input, ".concat(N0, ")"),
+  borderRadius: '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'
+});
+export var CustomDropdownItem = styled.div(function (props) {
+  return {
+    height: '36px',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingLeft: props.isSelected ? '15px' : '16px',
+    boxSizing: 'border-box',
+    color: props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : 'inherit',
+    background: props.isSelected ? "var(--ds-background-accent-blue-subtlest, ".concat(B50, ")") : 'transparent',
+    borderLeft: props.isSelected ? "2px solid ".concat("var(--ds-text-selected, ".concat(B400, ")")) : 'none',
+    '&:hover': {
+      background: props.isSelected ? "var(--ds-background-accent-blue-subtlest, ".concat(B50, ")") : "var(--ds-background-input-hovered, ".concat(N20, ")"),
+      cursor: 'default'
+    }
+  };
+});
+export var CustomDateWrapper = styled.div({
+  padding: "var(--ds-space-150, 12px)",
+  boxSizing: 'border-box'
+});
+export var DatePickersWrapper = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%'
+});
+export var SelectDateRangeButton = styled.button({
+  background: "var(--ds-background-accent-gray-subtler, ".concat(N20, ")"),
+  border: 'none',
+  font: 'inherit',
+  width: '70px',
+  height: '40px',
+  marginTop: "var(--ds-space-150, 12px)",
+  borderRadius: '3px',
+  '&:hover': {
+    background: "var(--ds-background-accent-gray-subtler, ".concat(N30, ")"),
+    cursor: 'pointer'
+  }
+});
+export var DateRangeErrorMessage = styled.div({
+  display: 'flex',
+  lineHeight: 1.3333,
+  marginTop: "var(--ds-space-050, 4px)",
+  fontSize: '12px',
+  color: "var(--ds-text-danger, ".concat(R400, ")")
+});

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+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,
+    selectedLabel = _ref.selectedLabel,
+    onClickButton = _ref.onClickButton;
+  return /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
+    testId: 'confluence-search-modal--date-range-button',
+    onClick: onClickButton,
+    isSelected: optionSelected,
+    iconAfter: /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      size: "medium",
+      label: ""
+    }))
+  }), label, selectedLabel ? ": ".concat(selectedLabel) : '');
+};