@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/es2019/ui/common/modal/popup-select/menu-list/index.js

@@ -1,18 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box, Flex } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 import Spinner from '@atlaskit/spinner';
 import CustomErrorMessage from './errorMessage';
 import CustomDropdownLoadingMessage from './loadingMessage';
+import CustomMenuListOld from './menuListOld';
 import CustomNoOptionsMessage from './noOptionsMessage';
 import ShowMoreButton from './showMoreButton';
-const inlineSpinnerStyles = xcss({
-  paddingTop: 'space.075'
-});
-const showMoreButtonBoxStyles = xcss({
-  paddingLeft: 'space.075',
-  paddingTop: 'space.100'
-});
+const styles = {
+  inlineSpinnerStyles: "_ca0q12x7",
+  showMoreButtonBoxStyles: "_19bv12x7 _ca0qu2gc"
+};
 const CustomMenuList = ({
   children,
   ...props
@@ -33,7 +35,7 @@ const CustomMenuList = ({
   const isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   const InlineSpinner = () => /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "center",
-    xcss: inlineSpinnerStyles
+    xcss: styles.inlineSpinnerStyles
   }, /*#__PURE__*/React.createElement(Spinner, {
     size: "medium"
   }));
@@ -55,7 +57,7 @@ const CustomMenuList = ({
       });
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && handleShowMore && /*#__PURE__*/React.createElement(Box, {
-      xcss: showMoreButtonBoxStyles
+      xcss: styles.showMoreButtonBoxStyles
     }, /*#__PURE__*/React.createElement(ShowMoreButton, {
       onShowMore: handleShowMore,
       filterName: filterName
@@ -63,4 +65,11 @@ const CustomMenuList = ({
   };
   return /*#__PURE__*/React.createElement(components.MenuList, props, renderChildren());
 };
-export default CustomMenuList;
+export const CustomMenuListExported = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(CustomMenuList, props);
+  } else {
+    return /*#__PURE__*/React.createElement(CustomMenuListOld, props);
+  }
+};
+export default CustomMenuListExported;

package/dist/es2019/ui/common/modal/popup-select/menu-list/menuListOld.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { components } from '@atlaskit/select';
+import Spinner from '@atlaskit/spinner';
+import CustomErrorMessage from './errorMessage';
+import CustomDropdownLoadingMessage from './loadingMessage';
+import CustomNoOptionsMessage from './noOptionsMessage';
+import ShowMoreButton from './showMoreButton';
+const inlineSpinnerStyles = xcss({
+  paddingTop: 'space.075'
+});
+const showMoreButtonBoxStyles = xcss({
+  paddingLeft: 'space.075',
+  paddingTop: 'space.100'
+});
+const CustomMenuList = ({
+  children,
+  ...props
+}) => {
+  const {
+    filterName,
+    isLoading,
+    isLoadingMore,
+    isError,
+    isEmpty,
+    errors,
+    showMore,
+    handleShowMore
+  } =
+  // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+  props.selectProps.menuListProps;
+  const shouldDisplayShowMore = showMore && !isLoadingMore;
+  const isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
+  const InlineSpinner = () => /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "center",
+    xcss: inlineSpinnerStyles
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "medium"
+  }));
+  const renderChildren = () => {
+    if (isLoading) {
+      return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, {
+        filterName: filterName
+      });
+    }
+    if (isError) {
+      return /*#__PURE__*/React.createElement(CustomErrorMessage, {
+        filterName: filterName,
+        errors: errors
+      });
+    }
+    if (isEmpty) {
+      return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, {
+        filterName: filterName
+      });
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && handleShowMore && /*#__PURE__*/React.createElement(Box, {
+      xcss: showMoreButtonBoxStyles
+    }, /*#__PURE__*/React.createElement(ShowMoreButton, {
+      onShowMore: handleShowMore,
+      filterName: filterName
+    })), isLoadingMoreData && /*#__PURE__*/React.createElement(InlineSpinner, null));
+  };
+  return /*#__PURE__*/React.createElement(components.MenuList, props, renderChildren());
+};
+export default CustomMenuList;

package/dist/es2019/ui/common/modal/popup-select/menu-list/selectMessage.compiled.css

@@ -0,0 +1,6 @@
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._4t3ivbgk{height:4pc}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/es2019/ui/common/modal/popup-select/menu-list/selectMessage.js

@@ -1,32 +1,38 @@
+/* selectMessage.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./selectMessage.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
-import { Flex, Stack, xcss } from '@atlaskit/primitives';
-const boxStyles = xcss({
-  height: "var(--ds-space-800, 64px)",
-  marginBottom: 'space.200'
-});
-const stackStyles = xcss({
-  paddingTop: 'space.100',
-  paddingBottom: 'space.100',
-  paddingLeft: 'space.150',
-  paddingRight: 'space.150'
-});
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Flex, Stack } from '@atlaskit/primitives/compiled';
+import CustomSelectMessageOld from './selectMessageOld';
+const styles = {
+  boxStyles: "_4t3ivbgk _otyrpxbi",
+  stackStyles: "_ca0qu2gc _n3tdu2gc _19bvutpp _u5f3utpp"
+};
 const CustomSelectMessage = ({
   icon,
   message,
   testId
 }) => {
   return /*#__PURE__*/React.createElement(Stack, {
-    xcss: stackStyles,
+    xcss: styles.stackStyles,
     testId: testId,
     alignInline: "center"
   }, /*#__PURE__*/React.createElement(Flex, {
-    xcss: boxStyles,
+    xcss: styles.boxStyles,
     alignItems: "center",
     justifyContent: "center"
   }, icon), /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall"
   }, /*#__PURE__*/React.createElement(FormattedMessage, message)));
 };
-export default CustomSelectMessage;
+export const CustomSelectMessageExported = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(CustomSelectMessage, props);
+  } else {
+    return /*#__PURE__*/React.createElement(CustomSelectMessageOld, props);
+  }
+};
+export default CustomSelectMessageExported;

package/dist/es2019/ui/common/modal/popup-select/menu-list/selectMessageOld.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import { Flex, Stack, xcss } from '@atlaskit/primitives';
+const boxStyles = xcss({
+  height: "var(--ds-space-800, 64px)",
+  marginBottom: 'space.200'
+});
+const stackStyles = xcss({
+  paddingTop: 'space.100',
+  paddingBottom: 'space.100',
+  paddingLeft: 'space.150',
+  paddingRight: 'space.150'
+});
+const CustomSelectMessage = ({
+  icon,
+  message,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: stackStyles,
+    testId: testId,
+    alignInline: "center"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: boxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, icon), /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, message)));
+};
+export default CustomSelectMessage;

package/dist/es2019/ui/common/modal/popup-select/trigger-old.js

@@ -0,0 +1,83 @@
+import React, { forwardRef, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import Badge from '@atlaskit/badge';
+import Button from '@atlaskit/button/standard-button';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+const triggerButtonLabelStyles = xcss({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
+});
+const badgeStyles = xcss({
+  marginLeft: 'space.050'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const LoadingStateAnimationWrapper = styled.div({
+  position: 'relative',
+  animation: 'flickerAnimation 2s infinite',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '@keyframes flickerAnimation': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '0%': {
+      opacity: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '50%': {
+      opacity: 0.5
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '100%': {
+      opacity: 1
+    }
+  }
+});
+const PopupTrigger = /*#__PURE__*/forwardRef(({
+  isSelected,
+  isDisabled,
+  isLoading,
+  selectedOptions,
+  testId,
+  label
+}, ref) => {
+  const [firstOption] = selectedOptions || [];
+  const hasOptions = selectedOptions && selectedOptions.length > 0;
+  const showButtonLoading = !isDisabled && isLoading;
+  const triggerButtonTestId = `${testId}-trigger`;
+  const LoadingButton = useCallback(() => /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    iconAfter: /*#__PURE__*/React.createElement(Spinner, {
+      size: 'xsmall'
+    }),
+    testId: `${triggerButtonTestId}--loading-button`
+  }, label)), [label, triggerButtonTestId]);
+  const DefaultButton = useCallback(() => /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    isSelected: isSelected || hasOptions,
+    isDisabled: isDisabled,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: "",
+      color: "currentColor"
+    }),
+    testId: `${triggerButtonTestId}--button`
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: triggerButtonLabelStyles
+  }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+    xcss: badgeStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    appearance: "primary"
+  }, "+", selectedOptions.length - 1)))), [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId]);
+
+  /**
+   * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
+   * Hence introducing a Box to make sure ref is always the same and only content is refreshed on re-renders
+   */
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    testId: triggerButtonTestId
+  }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
+});
+export default PopupTrigger;

package/dist/es2019/ui/common/modal/popup-select/trigger.compiled.css

@@ -0,0 +1,7 @@
+
+._y44vkmg5{animation:flickerAnimation 2s infinite}._18m915vq{overflow-y:hidden}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._kqswh2mm{position:relative}
+@keyframes flickerAnimation{0%{opacity:1}50%{opacity:.5}to{opacity:1}}

package/dist/es2019/ui/common/modal/popup-select/trigger.js

@@ -1,40 +1,35 @@
+/* trigger.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./trigger.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
-import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
-const triggerButtonLabelStyles = xcss({
-  textOverflow: 'ellipsis',
-  overflow: 'hidden'
-});
-const badgeStyles = xcss({
-  marginLeft: 'space.050'
-});
+import PopupTriggerOld from './trigger-old';
+const styles = {
+  triggerButtonLabelStyles: "_1reo15vq _18m915vq _1bto1l2s",
+  badgeStyles: "_18u01b66"
+};
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadingStateAnimationWrapper = styled.div({
-  position: 'relative',
-  animation: 'flickerAnimation 2s infinite',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '@keyframes flickerAnimation': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '0%': {
-      opacity: 1
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '50%': {
-      opacity: 0.5
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '100%': {
-      opacity: 1
-    }
-  }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const LoadingStateAnimationWrapper = /*#__PURE__*/forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_y44vkmg5 _kqswh2mm", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  LoadingStateAnimationWrapper.displayName = 'LoadingStateAnimationWrapper';
+}
 const PopupTrigger = /*#__PURE__*/forwardRef(({
   isSelected,
   isDisabled,
@@ -63,9 +58,9 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     }),
     testId: `${triggerButtonTestId}--button`
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
-    xcss: triggerButtonLabelStyles
+    xcss: styles.triggerButtonLabelStyles
   }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
-    xcss: badgeStyles,
+    xcss: styles.badgeStyles,
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Badge, {
     appearance: "primary"
@@ -80,4 +75,15 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     testId: triggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
-export default PopupTrigger;
+const PopupTriggerExported = /*#__PURE__*/forwardRef((props, ref) => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(PopupTriggerOld, _extends({}, props, {
+      ref: ref
+    }));
+  }
+});
+export default PopupTriggerExported;

package/dist/es2019/ui/common/modal/search-count/index.compiled.css

@@ -0,0 +1,3 @@
+._16jlkb7n{flex-grow:1}
+._1o9zkb7n{flex-shrink:1}
+._i0dlf1ug{flex-basis:0%}

package/dist/es2019/ui/common/modal/search-count/index.js

@@ -1,23 +1,27 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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 { Flex } from '@atlaskit/primitives/compiled';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N800 } from '@atlaskit/theme/colors';
 import { footerMessages } from '../../../table-footer/messages';
 import { searchCountMessages } from './messages';
-const searchCountStyles = xcss({
-  flex: 1
-});
+import TableSearchCountOld, { AssetsItemCountOld } from './search-count-old';
+const styles = {
+  searchCountStyles: "_16jlkb7n _1o9zkb7n _i0dlf1ug"
+};
 const ItemCountWrapper = ({
   url,
   children,
   testId
 }) => /*#__PURE__*/React.createElement(Flex, {
   testId: testId,
-  xcss: searchCountStyles,
+  xcss: styles.searchCountStyles,
   alignItems: "center"
 }, /*#__PURE__*/React.createElement(LinkUrl, {
   href: url,
@@ -32,7 +36,7 @@ const ItemCountWrapper = ({
 }, /*#__PURE__*/React.createElement(Heading, {
   size: "xxsmall"
 }, children)));
-export const AssetsItemCount = ({
+export const AssetsItemCountNew = ({
   searchCount,
   url,
   testId
@@ -51,6 +55,13 @@ export const AssetsItemCount = ({
     }
   })));
 };
+export const AssetsItemCount = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AssetsItemCountNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AssetsItemCountOld, props);
+  }
+};
 const TableSearchCount = ({
   url,
   searchCount,
@@ -68,4 +79,11 @@ const TableSearchCount = ({
     }
   })));
 };
-export default TableSearchCount;
+export const TableSearchCountExported = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(TableSearchCount, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TableSearchCountOld, props);
+  }
+};
+export default TableSearchCountExported;

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

@@ -0,0 +1,71 @@
+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';
+const searchCountStyles = xcss({
+  flex: 1
+});
+const ItemCountWrapper = ({
+  url,
+  children,
+  testId
+}) => /*#__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, ${N800})`,
+    textDecoration: !url ? 'none' : ''
+  }
+}, /*#__PURE__*/React.createElement(Heading, {
+  size: "xxsmall"
+}, children)));
+export const AssetsItemCountOld = ({
+  searchCount,
+  url,
+  testId
+}) => {
+  let capCount = searchCount >= 1000;
+  let displayCount = capCount ? 1000 : searchCount;
+  let 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
+    }
+  })));
+};
+const TableSearchCount = ({
+  url,
+  searchCount,
+  testId = 'datasource-table-total-results-count',
+  prefixTextType = 'issue'
+}) => {
+  const isIssue = prefixTextType === 'issue';
+  const messageKey = isIssue && fg('confluence-issue-terminology-refresh') ? 'issueCountTextIssueTermRefresh' : `${prefixTextType}CountText`;
+  return /*#__PURE__*/React.createElement(ItemCountWrapper, {
+    testId: testId,
+    url: url
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, searchCountMessages[messageKey], {
+    values: {
+      searchCount
+    }
+  })));
+};
+export default TableSearchCount;

package/dist/es2019/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/es2019/ui/common/modal/site-selector/index.js

@@ -1,29 +1,19 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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';
-const dropdownContainerStyles = xcss({
-  display: 'flex',
-  alignItems: 'center',
-  gap: 'space.100',
-  minHeight: '40px' // to prevent vertical shifting when site selector pops in
-});
-const 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 const SiteSelector = props => {
+import { SiteSelectorOld } from './site-selector-old';
+const styles = {
+  dropdownContainerStyles: "_zulpu2gc _1e0c1txw _4cvr1h6o _1tke1ylp"
+};
+const selectStyles = null;
+const SiteSelectorNew = props => {
   const {
     availableSites,
     onSiteSelection,
@@ -48,12 +38,11 @@ export const 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": `${testId}--trigger`
-  }, jsx(Select, {
-    css: selectStyles,
+  }, /*#__PURE__*/React.createElement(Select, {
     classNamePrefix: testId,
     isLoading: !availableSites,
     onChange: onChange,
@@ -68,10 +57,28 @@ export const SiteSelector = props => {
       }) => ({
         ...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: ({
+        width,
+        ...css
+      }) => ({
+        ...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 const SiteSelector = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(SiteSelectorNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(SiteSelectorOld, props);
+  }
 };