@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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");
+var _editedOrCreatedBy = _interopRequireDefault(require("./filters/edited-or-created-by"));
+var _types = require("./types");
+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 basicFilterContainerStyles = (0, _primitives.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 = (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(updatedOption) {
+    onChange(_types.CLOLBasicFilters.lastModified, _objectSpread({
+      optionType: 'dateRange',
+      label: updatedOption.value
+    }, updatedOption));
+  };
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "clol-basic-filter-container"
+  }, /*#__PURE__*/_react.default.createElement(_editedOrCreatedBy.default, {
+    cloudId: cloudId,
+    onSelectionChange: onChange,
+    selection: editedOrCreatedBy || [],
+    isHydrating: isHydrating
+  }), /*#__PURE__*/_react.default.createElement(_dateRangePicker.DateRangePicker, {
+    selection: lastModifiedSelection,
+    onSelectionChange: onDateRangePickerChange,
+    filterName: "clol-basic-filter-".concat(_types.CLOLBasicFilters.lastModified)
+  }));
+};
+var _default = exports.default = BasicFilterContainer;

package/dist/cjs/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/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/PopupComponent.js

@@ -1,3 +1,4 @@
+/* PopupComponent.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,15 +6,53 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopupComponent = void 0;
+exports.PopupComponentOld = exports.PopupComponentNew = exports.PopupComponent = void 0;
+require("./PopupComponent.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _styled = require("./styled");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _styledOld = require("./styled-old");
+var _excluded = ["as", "style"];
 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 && {}.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; }
-var PopupComponent = exports.PopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_styled.PopupComponentContainer, (0, _extends2.default)({}, props, {
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var PopupComponentContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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';
+}
+var PopupComponentNew = exports.PopupComponentNew = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(PopupComponentContainer, (0, _extends2.default)({}, props, {
     "data-testId": 'confluence-search-datasource-popup-container',
     ref: ref
   }));
+});
+var PopupComponentOld = exports.PopupComponentOld = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_styledOld.PopupComponentContainerOld, (0, _extends2.default)({}, props, {
+    "data-testId": 'confluence-search-datasource-popup-container',
+    ref: ref
+  }));
+});
+var PopupComponent = exports.PopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/_react.default.createElement(PopupComponentNew, (0, _extends2.default)({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(PopupComponentOld, (0, _extends2.default)({}, props, {
+      ref: ref
+    }));
+  }
 });

package/dist/cjs/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/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,9 +7,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateRangePicker = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _reactIntlNext = require("react-intl-next");
 var _datetimePicker = require("@atlaskit/datetime-picker");
 var _error = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
@@ -20,23 +25,108 @@ var _analytics = require("../../../../../analytics");
 var _messages = require("./messages");
 var _PopupComponent = require("./PopupComponent");
 var _styled = require("./styled");
+var _styledOld = require("./styled-old");
 var _trigger = require("./trigger");
 var _utils = require("./utils");
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"];
 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 && {}.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; }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var DateRangeErrorMessage = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "div" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "button" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "div" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "div" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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';
-var DateRangePicker = exports.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;
+var DateRangePicker = exports.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 = (0, _reactIntlNext.useIntl)(),
     locale = _useIntl.locale,
@@ -104,15 +194,9 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
       fireEvent('ui.dropdown.closed.basicSearchDropdown', analyticsPayload);
     }
   }, [analyticsPayload, fireEvent, isPickerOpen]);
-  return /*#__PURE__*/_react.default.createElement(_popup.default, {
-    isOpen: !!isPickerOpen,
-    onClose: handlePickerToggle
-    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
-    popupComponent: _PopupComponent.PopupComponent,
-    zIndex: _constants.layers.modal(),
-    content: function content() {
-      return /*#__PURE__*/_react.default.createElement(_styled.CustomDropdown, null, dateRangeValues.map(function (option) {
+  var popupContent = function popupContent() {
+    if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+      return /*#__PURE__*/_react.default.createElement(CustomDropdown, null, dateRangeValues.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
@@ -122,7 +206,7 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
             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, {
+      }), isPickerOpen && isCustomSelected && /*#__PURE__*/_react.default.createElement(CustomDateWrapper, null, /*#__PURE__*/_react.default.createElement(DatePickersWrapper, null, /*#__PURE__*/_react.default.createElement(_datetimePicker.DatePicker, {
         maxDate: todayDate,
         innerProps: {
           style: {
@@ -168,17 +252,92 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
             }
           }
         }
-      })), invalidDateRange && /*#__PURE__*/_react.default.createElement(_styled.DateRangeErrorMessage, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+      })), invalidDateRange && /*#__PURE__*/_react.default.createElement(DateRangeErrorMessage, null, /*#__PURE__*/_react.default.createElement(_error.default, {
         LEGACY_size: "small",
         color: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
         label: (0, _platformFeatureFlags.fg)('bandicoots-update-sllv-icons') ? formatMessage(_messages.dateRangeMessages.dateRangeError) : 'Date range error',
         LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
-      }), invalidDateRange), /*#__PURE__*/_react.default.createElement(_styled.SelectDateRangeButton, {
+      }), invalidDateRange), /*#__PURE__*/_react.default.createElement(SelectDateRangeButton, {
         "data-testId": "custom-date-range-update-button",
         disabled: Boolean(invalidDateRange),
         onClick: handleClickUpdateDateRange
       }, formatMessage(_messages.dateRangeMessages.dateRangeUpdateButton))));
-    },
+    }
+    return /*#__PURE__*/_react.default.createElement(_styledOld.CustomDropdownOld, null, dateRangeValues.map(function (option) {
+      return /*#__PURE__*/_react.default.createElement(_styledOld.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);
+        }
+      }, (0, _utils.getDropdownLabel)(option, formatMessage));
+    }), isPickerOpen && isCustomSelected && /*#__PURE__*/_react.default.createElement(_styledOld.CustomDateWrapperOld, null, /*#__PURE__*/_react.default.createElement(_styledOld.DatePickersWrapperOld, null, /*#__PURE__*/_react.default.createElement(_datetimePicker.DatePicker, {
+      maxDate: todayDate,
+      innerProps: {
+        style: {
+          width: 140
+        }
+      },
+      testId: "date-from-picker",
+      dateFormat: "D MMM YYYY",
+      onChange: setCustomFromDate,
+      defaultValue: fromDate,
+      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, _messages.dateRangeMessages.dateRangeToLabel), /*#__PURE__*/_react.default.createElement(_datetimePicker.DatePicker, {
+      maxDate: todayDate,
+      innerProps: {
+        style: {
+          width: 140
+        }
+      },
+      testId: "date-to-picker",
+      dateFormat: "D MMM YYYY",
+      onChange: setCustomToDate,
+      defaultValue: toDate,
+      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(_styledOld.DateRangeErrorMessageOld, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+      LEGACY_size: "small",
+      color: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
+      label: "Date range error",
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
+    }), invalidDateRange), /*#__PURE__*/_react.default.createElement(_styledOld.SelectDateRangeButtonOld, {
+      "data-testId": "custom-date-range-update-button",
+      disabled: Boolean(invalidDateRange),
+      onClick: handleClickUpdateDateRange
+    }, formatMessage(_messages.dateRangeMessages.dateRangeUpdateButton))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_popup.default, {
+    isOpen: !!isPickerOpen,
+    onClose: handlePickerToggle
+    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+    ,
+    popupComponent: _PopupComponent.PopupComponent,
+    zIndex: _constants.layers.modal(),
+    content: popupContent,
     placement: "bottom-start",
     trigger: function trigger(triggerProps) {
       var labelText = (0, _utils.getCurrentOptionLabel)(formatDate, formatMessage, selectedValue, toDate, fromDate);

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectDateRangeButtonOld = exports.PopupComponentContainerOld = exports.DateRangeErrorMessageOld = exports.DatePickersWrapperOld = exports.CustomDropdownOld = exports.CustomDropdownItemOld = exports.CustomDateWrapperOld = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var PopupComponentContainerOld = exports.PopupComponentContainerOld = _styled.default.div({
+  boxSizing: 'border-box',
+  display: 'block',
+  flex: '1 1 auto',
+  overflow: 'visible',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  background: "var(--ds-background-input, ".concat(_colors.N0, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':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))"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var CustomDropdownOld = exports.CustomDropdownOld = _styled.default.div({
+  width: '340px',
+  background: "var(--ds-background-input, ".concat(_colors.N0, ")"),
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  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: _constants.layers.modal()
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+var CustomDropdownItemOld = exports.CustomDropdownItemOld = _styled.default.div(function (props) {
+  return {
+    height: '36px',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    paddingLeft: props.isSelected ? '15px' : '16px',
+    boxSizing: 'border-box',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    color: props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : 'inherit',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    background: props.isSelected ? "var(--ds-background-accent-blue-subtlest, ".concat(_colors.B50, ")") : 'transparent',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    borderLeft: props.isSelected ? "2px solid ".concat("var(--ds-text-selected, ".concat(_colors.B400, ")")) : 'none',
+    '&:hover': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      background: props.isSelected ? "var(--ds-background-accent-blue-subtlest, ".concat(_colors.B50, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N20, ")"),
+      cursor: 'default'
+    }
+  };
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var CustomDateWrapperOld = exports.CustomDateWrapperOld = _styled.default.div({
+  padding: "var(--ds-space-150, 12px)",
+  boxSizing: 'border-box'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var DatePickersWrapperOld = exports.DatePickersWrapperOld = _styled.default.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SelectDateRangeButtonOld = exports.SelectDateRangeButtonOld = _styled.default.button({
+  background: "var(--ds-background-accent-gray-subtler, ".concat(_colors.N20, ")"),
+  border: 'none',
+  font: 'inherit',
+  width: '70px',
+  height: '40px',
+  marginTop: "var(--ds-space-150, 12px)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  '&:hover': {
+    background: "var(--ds-background-accent-gray-subtler, ".concat(_colors.N30, ")"),
+    cursor: 'pointer'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var DateRangeErrorMessageOld = exports.DateRangeErrorMessageOld = _styled.default.div({
+  display: 'flex',
+  marginTop: "var(--ds-space-050, 2px)",
+  gap: "var(--ds-space-025, 2px)",
+  paddingInlineStart: "var(--ds-space-025, 2px)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
+  alignItems: 'center'
+});

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

@@ -0,0 +1,17 @@
+
+._1kl7ge6l{border-left:var(--_lthtsj)}
+._1kl7glyw{border-left:none}._19bvo7ao{padding-left:15px}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bah1y6m{justify-content:flex-start}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i14no{height:36px}
+._bfhk18uv{background-color:initial}
+._bfhkuu0u{background-color:var(--_1k02qo)}
+._syaz1kw7{color:inherit}
+._syazln51{color:var(--_1hfkvbo)}
+._vchhusvi{box-sizing:border-box}
+._d0al73ad:hover{cursor:default}
+._irr318n0:hover{background-color:var(--_hyt33l)}
+._irr3uu0u:hover{background-color:var(--_1k02qo)}