@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/esm/ui/common/modal/search-count/search-count-old.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Flex, xcss } from '@atlaskit/primitives';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+import { N800 } from '@atlaskit/theme/colors';
+import { footerMessages } from '../../../table-footer/messages';
+import { searchCountMessages } from './messages';
+var searchCountStyles = xcss({
+  flex: 1
+});
+var ItemCountWrapper = function ItemCountWrapper(_ref) {
+  var url = _ref.url,
+    children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: testId,
+    xcss: searchCountStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(LinkUrl, {
+    href: url,
+    target: "_blank",
+    testId: "item-count-url"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      color: "var(--ds-text-accent-gray, ".concat(N800, ")"),
+      textDecoration: !url ? 'none' : ''
+    }
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xxsmall"
+  }, children)));
+};
+export var AssetsItemCountOld = function AssetsItemCountOld(_ref2) {
+  var searchCount = _ref2.searchCount,
+    url = _ref2.url,
+    testId = _ref2.testId;
+  var capCount = searchCount >= 1000;
+  var displayCount = capCount ? 1000 : searchCount;
+  var countModifier = capCount ? '+' : '';
+  return /*#__PURE__*/React.createElement(ItemCountWrapper, {
+    testId: testId,
+    url: url
+  }, /*#__PURE__*/React.createElement(FormattedNumber, {
+    value: displayCount
+  }), countModifier, ' ', /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, footerMessages.itemText, {
+    values: {
+      itemCount: searchCount
+    }
+  })));
+};
+var TableSearchCount = function TableSearchCount(_ref3) {
+  var url = _ref3.url,
+    searchCount = _ref3.searchCount,
+    _ref3$testId = _ref3.testId,
+    testId = _ref3$testId === void 0 ? 'datasource-table-total-results-count' : _ref3$testId,
+    _ref3$prefixTextType = _ref3.prefixTextType,
+    prefixTextType = _ref3$prefixTextType === void 0 ? 'issue' : _ref3$prefixTextType;
+  var isIssue = prefixTextType === 'issue';
+  var messageKey = isIssue && fg('confluence-issue-terminology-refresh') ? 'issueCountTextIssueTermRefresh' : "".concat(prefixTextType, "CountText");
+  return /*#__PURE__*/React.createElement(ItemCountWrapper, {
+    testId: testId,
+    url: url
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, searchCountMessages[messageKey], {
+    values: {
+      searchCount: searchCount
+    }
+  })));
+};
+export default TableSearchCount;

package/dist/esm/ui/common/modal/site-selector/index.compiled.css

@@ -0,0 +1,6 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._1pbyibnn{z-index:11}
+._1tke1ylp{min-height:40px}
+._4cvr1h6o{align-items:center}

package/dist/esm/ui/common/modal/site-selector/index.js

@@ -1,34 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["width"];
+var _excluded = ["width"],
+  _excluded2 = ["width"];
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box } from '@atlaskit/primitives/compiled';
 import Select from '@atlaskit/select';
-import { siteSelectorIndex } from '../../../../common/zindex';
 import { siteSelectorMessages } from './messages';
-var dropdownContainerStyles = xcss({
-  display: 'flex',
-  alignItems: 'center',
-  gap: 'space.100',
-  minHeight: '40px' // to prevent vertical shifting when site selector pops in
-});
-var selectStyles = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: siteSelectorIndex
-});
-export var SiteSelector = function SiteSelector(props) {
+import { SiteSelectorOld } from './site-selector-old';
+var styles = {
+  dropdownContainerStyles: "_zulpu2gc _1e0c1txw _4cvr1h6o _1tke1ylp"
+};
+var selectStyles = null;
+var SiteSelectorNew = function SiteSelectorNew(props) {
   var availableSites = props.availableSites,
     onSiteSelection = props.onSiteSelection,
     selectedSite = props.selectedSite,
@@ -56,12 +47,11 @@ export var SiteSelector = function SiteSelector(props) {
     label: selectedSite.displayName,
     value: selectedSite.cloudId
   };
-  return jsx(Box, {
-    xcss: dropdownContainerStyles
-  }, formatMessage(label), availableSites && availableSites.length > 1 && jsx("span", {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.dropdownContainerStyles
+  }, formatMessage(label), availableSites && availableSites.length > 1 && /*#__PURE__*/React.createElement("span", {
     "data-testid": "".concat(testId, "--trigger")
-  }, jsx(Select, {
-    css: selectStyles,
+  }, /*#__PURE__*/React.createElement(Select, {
     classNamePrefix: testId,
     isLoading: !availableSites,
     onChange: onChange,
@@ -75,11 +65,29 @@ export var SiteSelector = function SiteSelector(props) {
           css = _objectWithoutProperties(_ref, _excluded);
         return _objectSpread(_objectSpread({}, css), {}, {
           minWidth: '100%',
-          width: 'max-content'
+          width: 'max-content',
+          // font-weight has to be overridden here so that it gets applied after the font styles in teh css element above
+          fontWeight: "var(--ds-font-weight-medium, 500)"
+        });
+      },
+      valueContainer: function valueContainer(_ref2) {
+        var width = _ref2.width,
+          css = _objectWithoutProperties(_ref2, _excluded2);
+        return _objectSpread(_objectSpread({}, css), {}, {
+          // font-weight has to be overridden here so that it gets applied after the font styles in teh css element above
+          fontWeight: "var(--ds-font-weight-medium, 500)"
         });
       }
     },
     testId: testId,
-    value: selectedSiteOption
+    value: selectedSiteOption,
+    className: ax(["_11c81oud _1pbyibnn"])
   })));
+};
+export var SiteSelector = function SiteSelector(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(SiteSelectorNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(SiteSelectorOld, props);
+  }
 };

package/dist/esm/ui/common/modal/site-selector/site-selector-old.js

@@ -0,0 +1,85 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["width"];
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { Box, xcss } from '@atlaskit/primitives';
+import Select from '@atlaskit/select';
+import { siteSelectorIndex } from '../../../../common/zindex';
+import { siteSelectorMessages } from './messages';
+var dropdownContainerStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.100',
+  minHeight: '40px' // to prevent vertical shifting when site selector pops in
+});
+var selectStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: siteSelectorIndex
+});
+export var SiteSelectorOld = function SiteSelectorOld(props) {
+  var availableSites = props.availableSites,
+    onSiteSelection = props.onSiteSelection,
+    selectedSite = props.selectedSite,
+    label = props.label,
+    testId = props.testId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onChange = function onChange(newValue) {
+    var selectedSite = availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(function (site) {
+      return site.cloudId === (newValue === null || newValue === void 0 ? void 0 : newValue.value);
+    });
+    if (selectedSite) {
+      onSiteSelection(selectedSite);
+    }
+  };
+  var availableSitesOptions = useMemo(function () {
+    return availableSites === null || availableSites === void 0 ? void 0 : availableSites.map(function (site) {
+      return {
+        label: site.displayName,
+        value: site.cloudId
+      };
+    });
+  }, [availableSites]);
+  var selectedSiteOption = selectedSite && {
+    label: selectedSite.displayName,
+    value: selectedSite.cloudId
+  };
+  return jsx(Box, {
+    xcss: dropdownContainerStyles
+  }, formatMessage(label), availableSites && availableSites.length > 1 && jsx("span", {
+    "data-testid": "".concat(testId, "--trigger")
+  }, jsx(Select, {
+    css: selectStyles,
+    classNamePrefix: testId,
+    isLoading: !availableSites,
+    onChange: onChange,
+    options: availableSitesOptions,
+    placeholder: formatMessage(siteSelectorMessages.chooseSite),
+    styles: {
+      // prevents the popup menu with available sites from being too narrow
+      // if the selected site is much shorter than the other options
+      menu: function menu(_ref) {
+        var width = _ref.width,
+          css = _objectWithoutProperties(_ref, _excluded);
+        return _objectSpread(_objectSpread({}, css), {}, {
+          minWidth: '100%',
+          width: 'max-content'
+        });
+      }
+    },
+    testId: testId,
+    value: selectedSiteOption
+  })));
+};

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

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 { Flex, xcss } from '@atlaskit/primitives';
+import { DateRangePicker } from './filters/date-range-picker';
+import EditedOrCreatedByFilter from './filters/edited-or-created-by';
+import { CLOLBasicFilters } from './types';
+var basicFilterContainerStyles = xcss({
+  paddingLeft: 'space.100'
+});
+var BasicFilterContainer = function BasicFilterContainer(_ref) {
+  var cloudId = _ref.cloudId,
+    onChange = _ref.onChange,
+    _ref$selections = _ref.selections,
+    selections = _ref$selections === void 0 ? {} : _ref$selections,
+    isHydrating = _ref.isHydrating;
+  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(updatedOption) {
+    onChange(CLOLBasicFilters.lastModified, _objectSpread({
+      optionType: 'dateRange',
+      label: updatedOption.value
+    }, updatedOption));
+  };
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "clol-basic-filter-container"
+  }, /*#__PURE__*/React.createElement(EditedOrCreatedByFilter, {
+    cloudId: cloudId,
+    onSelectionChange: onChange,
+    selection: editedOrCreatedBy || [],
+    isHydrating: isHydrating
+  }), /*#__PURE__*/React.createElement(DateRangePicker, {
+    selection: lastModifiedSelection,
+    onSelectionChange: onDateRangePickerChange,
+    filterName: "clol-basic-filter-".concat(CLOLBasicFilters.lastModified)
+  }));
+};
+export default BasicFilterContainer;

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

@@ -0,0 +1,13 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._16jlkb7n{flex-grow:1}
+._16qs1sus{box-shadow:var(--ds-shadow-overlay,0 0 1px 0 rgba(9,30,66,.31),0 3px 5px 0 rgba(9,30,66,.2))}
+._18m9ewfl{overflow-y:visible}
+._1e0c1ule{display:block}
+._1o9zkb7n{flex-shrink:1}
+._1reoewfl{overflow-x:visible}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._i0dl1wug{flex-basis:auto}
+._vchhusvi{box-sizing:border-box}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

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

@@ -1,9 +1,49 @@
+/* PopupComponent.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"];
+import "./PopupComponent.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
-import { PopupComponentContainer } from './styled';
-export var PopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
+import { fg } from "@atlaskit/platform-feature-flags";
+import { N0 } from "@atlaskit/theme/colors";
+import { PopupComponentContainerOld } from './styled-old';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var PopupComponentContainer = /*#__PURE__*/forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1reoewfl _18m9ewfl _2rkoiti9 _vchhusvi _1e0c1ule _bfhk1j9a _16qs1sus _nt751r31 _49pcglyw _1hvw1o36", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  PopupComponentContainer.displayName = 'PopupComponentContainer';
+}
+export var PopupComponentNew = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(PopupComponentContainer, _extends({}, props, {
     "data-testId": 'confluence-search-datasource-popup-container',
     ref: ref
   }));
+});
+export var PopupComponentOld = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(PopupComponentContainerOld, _extends({}, props, {
+    "data-testId": 'confluence-search-datasource-popup-container',
+    ref: ref
+  }));
+});
+export var PopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(PopupComponentNew, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(PopupComponentOld, _extends({}, props, {
+      ref: ref
+    }));
+  }
 });

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

@@ -0,0 +1,27 @@
+._11c81kw7{font:inherit}
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19itglyw{border:none}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._zulpv77o{gap:var(--ds-space-025,2px)}
+._16qs1sus{box-shadow:var(--ds-shadow-overlay,0 0 1px 0 rgba(9,30,66,.31),0 3px 5px 0 rgba(9,30,66,.2))}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._19pk57x3{margin-top:var(--ds-space-050,2px)}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1bsb5x59{width:340px}
+._1bsbymf6{width:70px}
+._1e0c1txw{display:flex}
+._1pby16oo{z-index:510}
+._4cvr1h6o{align-items:center}
+._4t3i1ylp{height:40px}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhk1y9p{background-color:var(--ds-background-accent-gray-subtler,#f4f5f7)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._syaz1ick{color:var(--ds-text-danger,#de350b)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._vchhusvi{box-sizing:border-box}
+._d0altlke:hover{cursor:pointer}
+._irr3134c:hover{background-color:var(--ds-background-accent-gray-subtler,#ebecf0)}

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

@@ -1,5 +1,16 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"];
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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, useMemo, useState } from 'react';
@@ -8,25 +19,106 @@ import { DatePicker } from '@atlaskit/datetime-picker';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
-import { R400 } from '@atlaskit/theme/colors';
+import { N0, N20, N30, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
 import { dateRangeMessages } from './messages';
 import { PopupComponent } from './PopupComponent';
-import { CustomDateWrapper, CustomDropdown, CustomDropdownItem, DatePickersWrapper, DateRangeErrorMessage, SelectDateRangeButton } from './styled';
+import { CustomDropdownItem } from "./styled";
+import { CustomDateWrapperOld, CustomDropdownItemOld, CustomDropdownOld, DatePickersWrapperOld, DateRangeErrorMessageOld, SelectDateRangeButtonOld } from './styled-old';
 import { PopupTrigger } from './trigger';
 import { getCurrentOptionLabel, getDropdownLabel, useInvalidDateRange } from './utils';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var DateRangeErrorMessage = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_zulpv77o _11c8qk37 _1e0c1txw _19pk57x3 _bozgv77o _syaz1ick _4cvr1h6o", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  DateRangeErrorMessage.displayName = 'DateRangeErrorMessage';
+}
+var CustomDropdown = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "div" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_2rkoiti9 _1bsb5x59 _bfhk1j9a _16qs1sus _1pby16oo", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  CustomDropdown.displayName = 'CustomDropdown';
+}
+var SelectDateRangeButton = forwardRef(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "button" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_19itglyw _11c81kw7 _2rkoiti9 _bfhk1y9p _1bsbymf6 _4t3i1ylp _19pkutpp _irr3134c _d0altlke", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  SelectDateRangeButton.displayName = 'SelectDateRangeButton';
+}
+var CustomDateWrapper = forwardRef(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "div" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _vchhusvi", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  CustomDateWrapper.displayName = 'CustomDateWrapper';
+}
+var DatePickersWrapper = forwardRef(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "div" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _1bah1yb4 _4cvr1h6o _1bsb1osq", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  DatePickersWrapper.displayName = 'DatePickersWrapper';
+}
 var dateRangeValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days', 'pastYear', 'custom'];
 var defaultOptionValue = 'anyTime';
-export var DateRangePicker = function DateRangePicker(_ref) {
-  var onSelectionChange = _ref.onSelectionChange,
-    selection = _ref.selection,
-    _ref$filterName = _ref.filterName,
-    filterName = _ref$filterName === void 0 ? 'datasource-date-range-picker' : _ref$filterName;
-  var _ref2 = selection || {},
-    selectedValue = _ref2.value,
-    fromDate = _ref2.from,
-    toDate = _ref2.to;
+export var DateRangePicker = function DateRangePicker(_ref6) {
+  var onSelectionChange = _ref6.onSelectionChange,
+    selection = _ref6.selection,
+    _ref6$filterName = _ref6.filterName,
+    filterName = _ref6$filterName === void 0 ? 'datasource-date-range-picker' : _ref6$filterName;
+  var _ref7 = selection || {},
+    selectedValue = _ref7.value,
+    fromDate = _ref7.from,
+    toDate = _ref7.to;
   var todayDate = new Date().toISOString();
   var _useIntl = useIntl(),
     locale = _useIntl.locale,
@@ -94,14 +186,8 @@ export var DateRangePicker = function DateRangePicker(_ref) {
       fireEvent('ui.dropdown.closed.basicSearchDropdown', analyticsPayload);
     }
   }, [analyticsPayload, fireEvent, isPickerOpen]);
-  return /*#__PURE__*/React.createElement(Popup, {
-    isOpen: !!isPickerOpen,
-    onClose: handlePickerToggle
-    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
-    popupComponent: PopupComponent,
-    zIndex: layers.modal(),
-    content: function content() {
+  var popupContent = function popupContent() {
+    if (fg('bandicoots-compiled-migration-link-datasource')) {
       return /*#__PURE__*/React.createElement(CustomDropdown, null, dateRangeValues.map(function (option) {
         return /*#__PURE__*/React.createElement(CustomDropdownItem, {
           key: option
@@ -168,7 +254,82 @@ export var DateRangePicker = function DateRangePicker(_ref) {
         disabled: Boolean(invalidDateRange),
         onClick: handleClickUpdateDateRange
       }, formatMessage(dateRangeMessages.dateRangeUpdateButton))));
-    },
+    }
+    return /*#__PURE__*/React.createElement(CustomDropdownOld, null, dateRangeValues.map(function (option) {
+      return /*#__PURE__*/React.createElement(CustomDropdownItemOld, {
+        key: option
+        // want to show Anytime as selected if none of the other options are selected
+        ,
+        isSelected: selectedValue ? option === selectedValue : option === defaultOptionValue,
+        onClick: function onClick() {
+          return handleClickFilterOption(option);
+        }
+      }, getDropdownLabel(option, formatMessage));
+    }), isPickerOpen && isCustomSelected && /*#__PURE__*/React.createElement(CustomDateWrapperOld, null, /*#__PURE__*/React.createElement(DatePickersWrapperOld, null, /*#__PURE__*/React.createElement(DatePicker, {
+      maxDate: todayDate,
+      innerProps: {
+        style: {
+          width: 140
+        }
+      },
+      testId: "date-from-picker",
+      dateFormat: "D MMM YYYY",
+      onChange: setCustomFromDate,
+      defaultValue: fromDate,
+      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, dateRangeMessages.dateRangeToLabel), /*#__PURE__*/React.createElement(DatePicker, {
+      maxDate: todayDate,
+      innerProps: {
+        style: {
+          width: 140
+        }
+      },
+      testId: "date-to-picker",
+      dateFormat: "D MMM YYYY",
+      onChange: setCustomToDate,
+      defaultValue: toDate,
+      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(DateRangeErrorMessageOld, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+      LEGACY_size: "small",
+      color: "var(--ds-icon-danger, ".concat(R400, ")"),
+      label: "Date range error",
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
+    }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButtonOld, {
+      "data-testId": "custom-date-range-update-button",
+      disabled: Boolean(invalidDateRange),
+      onClick: handleClickUpdateDateRange
+    }, formatMessage(dateRangeMessages.dateRangeUpdateButton))));
+  };
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: !!isPickerOpen,
+    onClose: handlePickerToggle
+    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+    ,
+    popupComponent: PopupComponent,
+    zIndex: layers.modal(),
+    content: popupContent,
     placement: "bottom-start",
     trigger: function trigger(triggerProps) {
       var labelText = getCurrentOptionLabel(formatDate, formatMessage, selectedValue, toDate, fromDate);