@atlaskit/link-create 2.5.3 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-create
 
+## 2.6.0
+
+### Minor Changes
+
+- [#114849](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114849)
+  [`3ddb026a666ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ddb026a666ce) -
+  [ux] Added a site picker to the goal form. And moved the SiteSelect from link-create-confluence to
+  link-create so that theres no circular dependency between link-create-goal and
+  link-create-confluence. Also, added sites as a prop to pass in to goal picker
+
+  "breaking" change which is that the peer dependency in (link-create-goal & link-create-confluence)
+  must also be bumped/checked is in range
+
 ## 2.5.3
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -13,7 +13,7 @@ var CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
 var LINK_CREATE_FORM_POST_CREATE_FIELD = exports.LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "2.5.3" || '',
+  packageVersion: "2.6.0" || '',
   component: COMPONENT_NAME,
   componentName: COMPONENT_NAME
 };

package/dist/cjs/common/ui/icon/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UrlIcon = exports.PageIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
+var _colors = require("@atlaskit/theme/colors");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @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 UrlIcon = exports.UrlIcon = _styled.default.div(function (props) {
+  var _props$url;
+  return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundImage: "url(".concat((_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : '', ")"),
+    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    height: "var(--ds-space-200, 16px)",
+    width: "var(--ds-space-200, 16px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    flexShrink: 0
+  };
+});
+var PageIcon = exports.PageIcon = function PageIcon() {
+  return /*#__PURE__*/_react.default.createElement(_.default, {
+    label: "Page"
+  });
+};

package/dist/cjs/index.js

@@ -46,18 +46,36 @@ Object.defineProperty(exports, "LinkCreateExitWarningProvider", {
     return _exitWarningModalContext.ExitWarningModalProvider;
   }
 });
+Object.defineProperty(exports, "PageIcon", {
+  enumerable: true,
+  get: function get() {
+    return _icon.PageIcon;
+  }
+});
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
     return _index.Select;
   }
 });
+Object.defineProperty(exports, "SiteSelect", {
+  enumerable: true,
+  get: function get() {
+    return _index.SiteSelect;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function get() {
     return _index.TextField;
   }
 });
+Object.defineProperty(exports, "UrlIcon", {
+  enumerable: true,
+  get: function get() {
+    return _icon.UrlIcon;
+  }
+});
 Object.defineProperty(exports, "UserPicker", {
   enumerable: true,
   get: function get() {
@@ -86,5 +104,6 @@ var _index = _interopRequireWildcard(require("./ui/index"));
 var _callbackContext = require("./controllers/callback-context");
 var _exitWarningModalContext = require("./controllers/exit-warning-modal-context");
 var _finalForm = require("final-form");
+var _icon = require("./common/ui/icon");
 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 && Object.prototype.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; }

package/dist/cjs/ui/create-form/select/index.js

@@ -9,4 +9,10 @@ Object.defineProperty(exports, "Select", {
     return _main.Select;
   }
 });
+Object.defineProperty(exports, "SiteSelect", {
+  enumerable: true,
+  get: function get() {
+    return _main.SiteSelect;
+  }
+});
 var _main = require("./main");

package/dist/cjs/ui/create-form/select/main.js

@@ -1,21 +1,35 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Select = Select;
-exports.TEST_ID = void 0;
+exports.TEST_ID = exports.SiteSelect = exports.SitePickerSingleValue = exports.SitePickerOption = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
-var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _select = _interopRequireWildcard(require("@atlaskit/select"));
+var _constants = require("@atlaskit/theme/constants");
+var _icon = require("../../../common/ui/icon");
 var _createField = require("../../../controllers/create-field");
+var _messages = require("./messages");
 var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
-  _excluded2 = ["fieldId"];
+  _excluded2 = ["fieldId"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"];
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 && Object.prototype.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; }
 var TEST_ID = exports.TEST_ID = 'link-create-select';
+
 /**
  * A select component utilising the Atlaskit Select and CreateField.
  * Validation is handled by the form on form submission. Any
@@ -47,4 +61,57 @@ function Select(_ref) {
       inputId: fieldId
     }, fieldProps, restProps));
   });
-}
+}
+var SiteSelect = exports.SiteSelect = function SiteSelect(_ref3) {
+  var options = _ref3.options,
+    name = _ref3.name,
+    testId = _ref3.testId;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var siteTestId = testId ? testId : 'link-create-site-picker';
+  return (0, _react.jsx)(Select, {
+    isRequired: true,
+    isSearchable: true,
+    name: name !== null && name !== void 0 ? name : 'site',
+    options: options,
+    label: intl.formatMessage(_messages.messages.siteLabel),
+    components: {
+      Option: SitePickerOption,
+      SingleValue: SitePickerSingleValue
+    },
+    testId: siteTestId,
+    styles: {
+      menuPortal: function menuPortal(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          zIndex: _constants.layers.modal()
+        });
+      },
+      option: function option(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer'
+        });
+      }
+    }
+  });
+};
+var SitePickerOption = exports.SitePickerOption = function SitePickerOption(_ref4) {
+  var children = _ref4.children,
+    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
+  return (0, _react.jsx)(_select.components.Option, props, (0, _react.jsx)(_primitives.Inline, {
+    space: "space.100",
+    alignBlock: "center"
+  }, (0, _react.jsx)(_icon.UrlIcon, {
+    url: props.data.value.avatarUrl
+  }), children));
+};
+var SitePickerSingleValue = exports.SitePickerSingleValue = function SitePickerSingleValue(_ref5) {
+  var children = _ref5.children,
+    props = (0, _objectWithoutProperties2.default)(_ref5, _excluded4);
+  return (0, _react.jsx)(_select.components.SingleValue, props, (0, _react.jsx)(_primitives.Inline, {
+    space: "space.100",
+    alignBlock: "center"
+  }, (0, _react.jsx)(_icon.UrlIcon, {
+    url: props.data.value.avatarUrl
+  }), children));
+};

package/dist/cjs/ui/create-form/select/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  siteLabel: {
+    id: 'linkCreate.CreateConfluencePage.form.site.label',
+    defaultMessage: 'Site',
+    description: 'Label for the Site dropdown list'
+  }
+});

package/dist/cjs/ui/index.js

@@ -40,6 +40,12 @@ Object.defineProperty(exports, "Select", {
     return _select.Select;
   }
 });
+Object.defineProperty(exports, "SiteSelect", {
+  enumerable: true,
+  get: function get() {
+    return _select.SiteSelect;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function get() {
@@ -58,12 +64,12 @@ Object.defineProperty(exports, "default", {
     return _modalCreate.default;
   }
 });
-var _modalCreate = _interopRequireDefault(require("./modal-create"));
 var _inlineCreate = _interopRequireDefault(require("./inline-create"));
+var _modalCreate = _interopRequireDefault(require("./modal-create"));
 var _textfield = require("./create-form/textfield");
-var _main = require("./create-form/main");
-var _formLoader = require("./create-form/form-loader");
-var _select = require("./create-form/select");
 var _asyncSelect = require("./create-form/async-select");
+var _formLoader = require("./create-form/form-loader");
 var _formSpy = require("./create-form/form-spy");
+var _main = require("./create-form/main");
+var _select = require("./create-form/select");
 var _userPicker = require("./create-form/user-picker");

package/dist/es2019/common/constants.js

@@ -7,7 +7,7 @@ export const CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
 export const LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "2.5.3" || '',
+  packageVersion: "2.6.0" || '',
   component: COMPONENT_NAME,
   componentName: COMPONENT_NAME
 };

package/dist/es2019/common/ui/icon/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import Document16Icon from '@atlaskit/icon-file-type/glyph/document/16';
+import { N20A } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @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
+export const UrlIcon = styled.div(props => {
+  var _props$url;
+  return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundImage: `url(${(_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : ''})`,
+    backgroundColor: `var(--ds-skeleton, ${N20A})`,
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    height: "var(--ds-space-200, 16px)",
+    width: "var(--ds-space-200, 16px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    flexShrink: 0
+  };
+});
+export const PageIcon = () => /*#__PURE__*/React.createElement(Document16Icon, {
+  label: "Page"
+});

package/dist/es2019/index.js

@@ -1,7 +1,8 @@
-export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy,
+export { AsyncSelect, CreateForm, CreateFormLoader, FormSpy, Select, SiteSelect, TextField,
 // todo: EDM-10077 - export this once inline-create is tested/ready
 //InlineCreate,
-UserPicker } from './ui/index';
-export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
+UserPicker, default } from './ui/index';
+export { LinkCreateCallbackProvider, useLinkCreateCallback } from './controllers/callback-context';
 export { ExitWarningModalProvider as LinkCreateExitWarningProvider, useWithExitWarning } from './controllers/exit-warning-modal-context';
-export { FORM_ERROR } from 'final-form';
+export { FORM_ERROR } from 'final-form';
+export { PageIcon, UrlIcon } from './common/ui/icon';

package/dist/es2019/ui/create-form/select/index.js

@@ -1 +1 @@
-export { Select } from './main';
+export { Select, SiteSelect } from './main';

package/dist/es2019/ui/create-form/select/main.js

@@ -3,9 +3,15 @@ import _extends from "@babel/runtime/helpers/extends";
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import AkSelect from '@atlaskit/select';
+import { useIntl } from 'react-intl-next';
+import { Inline } from '@atlaskit/primitives';
+import AkSelect, { components } from '@atlaskit/select';
+import { layers } from '@atlaskit/theme/constants';
+import { UrlIcon } from '../../../common/ui/icon';
 import { CreateField } from '../../../controllers/create-field';
+import { messages } from './messages';
 export const TEST_ID = 'link-create-select';
+
 /**
  * A select component utilising the Atlaskit Select and CreateField.
  * Validation is handled by the form on form submission. Any
@@ -38,4 +44,54 @@ export function Select({
       inputId: fieldId
     }, fieldProps, restProps));
   });
-}
+}
+export const SiteSelect = ({
+  options,
+  name,
+  testId
+}) => {
+  const intl = useIntl();
+  const siteTestId = testId ? testId : 'link-create-site-picker';
+  return jsx(Select, {
+    isRequired: true,
+    isSearchable: true,
+    name: name !== null && name !== void 0 ? name : 'site',
+    options: options,
+    label: intl.formatMessage(messages.siteLabel),
+    components: {
+      Option: SitePickerOption,
+      SingleValue: SitePickerSingleValue
+    },
+    testId: siteTestId,
+    styles: {
+      menuPortal: base => ({
+        ...base,
+        zIndex: layers.modal()
+      }),
+      option: base => ({
+        ...base,
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer'
+      })
+    }
+  });
+};
+export const SitePickerOption = ({
+  children,
+  ...props
+}) => jsx(components.Option, props, jsx(Inline, {
+  space: "space.100",
+  alignBlock: "center"
+}, jsx(UrlIcon, {
+  url: props.data.value.avatarUrl
+}), children));
+export const SitePickerSingleValue = ({
+  children,
+  ...props
+}) => jsx(components.SingleValue, props, jsx(Inline, {
+  space: "space.100",
+  alignBlock: "center"
+}, jsx(UrlIcon, {
+  url: props.data.value.avatarUrl
+}), children));

package/dist/es2019/ui/create-form/select/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  siteLabel: {
+    id: 'linkCreate.CreateConfluencePage.form.site.label',
+    defaultMessage: 'Site',
+    description: 'Label for the Site dropdown list'
+  }
+});

package/dist/es2019/ui/index.js

@@ -1,9 +1,9 @@
-export { default } from './modal-create';
 export { default as InlineCreate } from './inline-create';
+export { default } from './modal-create';
 export { TextField } from './create-form/textfield';
-export { CreateForm } from './create-form/main';
-export { CreateFormLoader } from './create-form/form-loader';
-export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
+export { CreateFormLoader } from './create-form/form-loader';
 export { FormSpy } from './create-form/form-spy';
+export { CreateForm } from './create-form/main';
+export { Select, SiteSelect } from './create-form/select';
 export { UserPicker } from './create-form/user-picker';

package/dist/esm/common/constants.js

@@ -7,7 +7,7 @@ export var CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
 export var LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "2.5.3" || '',
+  packageVersion: "2.6.0" || '',
   component: COMPONENT_NAME,
   componentName: COMPONENT_NAME
 };

package/dist/esm/common/ui/icon/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import Document16Icon from '@atlaskit/icon-file-type/glyph/document/16';
+import { N20A } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @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
+export var UrlIcon = styled.div(function (props) {
+  var _props$url;
+  return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundImage: "url(".concat((_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : '', ")"),
+    backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")"),
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    height: "var(--ds-space-200, 16px)",
+    width: "var(--ds-space-200, 16px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    flexShrink: 0
+  };
+});
+export var PageIcon = function PageIcon() {
+  return /*#__PURE__*/React.createElement(Document16Icon, {
+    label: "Page"
+  });
+};

package/dist/esm/index.js

@@ -1,7 +1,8 @@
-export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy,
+export { AsyncSelect, CreateForm, CreateFormLoader, FormSpy, Select, SiteSelect, TextField,
 // todo: EDM-10077 - export this once inline-create is tested/ready
 //InlineCreate,
-UserPicker } from './ui/index';
-export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
+UserPicker, default } from './ui/index';
+export { LinkCreateCallbackProvider, useLinkCreateCallback } from './controllers/callback-context';
 export { ExitWarningModalProvider as LinkCreateExitWarningProvider, useWithExitWarning } from './controllers/exit-warning-modal-context';
-export { FORM_ERROR } from 'final-form';
+export { FORM_ERROR } from 'final-form';
+export { PageIcon, UrlIcon } from './common/ui/icon';

package/dist/esm/ui/create-form/select/index.js

@@ -1 +1 @@
-export { Select } from './main';
+export { Select, SiteSelect } from './main';

package/dist/esm/ui/create-form/select/main.js

@@ -1,14 +1,25 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
-  _excluded2 = ["fieldId"];
+  _excluded2 = ["fieldId"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"];
+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; }
 /** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import AkSelect from '@atlaskit/select';
+import { useIntl } from 'react-intl-next';
+import { Inline } from '@atlaskit/primitives';
+import AkSelect, { components } from '@atlaskit/select';
+import { layers } from '@atlaskit/theme/constants';
+import { UrlIcon } from '../../../common/ui/icon';
 import { CreateField } from '../../../controllers/create-field';
+import { messages } from './messages';
 export var TEST_ID = 'link-create-select';
+
 /**
  * A select component utilising the Atlaskit Select and CreateField.
  * Validation is handled by the form on form submission. Any
@@ -40,4 +51,57 @@ export function Select(_ref) {
       inputId: fieldId
     }, fieldProps, restProps));
   });
-}
+}
+export var SiteSelect = function SiteSelect(_ref3) {
+  var options = _ref3.options,
+    name = _ref3.name,
+    testId = _ref3.testId;
+  var intl = useIntl();
+  var siteTestId = testId ? testId : 'link-create-site-picker';
+  return jsx(Select, {
+    isRequired: true,
+    isSearchable: true,
+    name: name !== null && name !== void 0 ? name : 'site',
+    options: options,
+    label: intl.formatMessage(messages.siteLabel),
+    components: {
+      Option: SitePickerOption,
+      SingleValue: SitePickerSingleValue
+    },
+    testId: siteTestId,
+    styles: {
+      menuPortal: function menuPortal(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          zIndex: layers.modal()
+        });
+      },
+      option: function option(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer'
+        });
+      }
+    }
+  });
+};
+export var SitePickerOption = function SitePickerOption(_ref4) {
+  var children = _ref4.children,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  return jsx(components.Option, props, jsx(Inline, {
+    space: "space.100",
+    alignBlock: "center"
+  }, jsx(UrlIcon, {
+    url: props.data.value.avatarUrl
+  }), children));
+};
+export var SitePickerSingleValue = function SitePickerSingleValue(_ref5) {
+  var children = _ref5.children,
+    props = _objectWithoutProperties(_ref5, _excluded4);
+  return jsx(components.SingleValue, props, jsx(Inline, {
+    space: "space.100",
+    alignBlock: "center"
+  }, jsx(UrlIcon, {
+    url: props.data.value.avatarUrl
+  }), children));
+};

package/dist/esm/ui/create-form/select/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  siteLabel: {
+    id: 'linkCreate.CreateConfluencePage.form.site.label',
+    defaultMessage: 'Site',
+    description: 'Label for the Site dropdown list'
+  }
+});

package/dist/esm/ui/index.js

@@ -1,9 +1,9 @@
-export { default } from './modal-create';
 export { default as InlineCreate } from './inline-create';
+export { default } from './modal-create';
 export { TextField } from './create-form/textfield';
-export { CreateForm } from './create-form/main';
-export { CreateFormLoader } from './create-form/form-loader';
-export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
+export { CreateFormLoader } from './create-form/form-loader';
 export { FormSpy } from './create-form/form-spy';
+export { CreateForm } from './create-form/main';
+export { Select, SiteSelect } from './create-form/select';
 export { UserPicker } from './create-form/user-picker';

package/dist/types/common/ui/icon/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const UrlIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & {
+    url?: string | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PageIcon: () => JSX.Element;

package/dist/types/index.d.ts

@@ -1,7 +1,8 @@
+export type { CreatePayload, EditViewProps, LinkCreatePlugin, LinkCreateProps, LinkCreateWithModalProps, } from './common/types';
 export type { CreateFormProps } from './ui/index';
-export type { LinkCreateProps, LinkCreatePlugin, LinkCreateWithModalProps, CreatePayload, EditViewProps, } from './common/types';
-export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy, UserPicker, } from './ui/index';
-export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
+export { AsyncSelect, CreateForm, CreateFormLoader, FormSpy, Select, SiteSelect, TextField, UserPicker, default, type SitePickerOptionType, } from './ui/index';
+export { LinkCreateCallbackProvider, useLinkCreateCallback } from './controllers/callback-context';
 export { ExitWarningModalProvider as LinkCreateExitWarningProvider, useWithExitWarning, } from './controllers/exit-warning-modal-context';
 export type { Validator, ValidatorMap } from './common/types';
 export { FORM_ERROR } from 'final-form';
+export { PageIcon, UrlIcon } from './common/ui/icon';

package/dist/types/ui/create-form/select/index.d.ts

@@ -1 +1,2 @@
-export { Select } from './main';
+export { Select, SiteSelect } from './main';
+export { type SitePickerOptionType } from './types';

package/dist/types/ui/create-form/select/main.d.ts

@@ -1,7 +1,8 @@
 /** @jsx jsx */
+import { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
-import { type OptionType } from '@atlaskit/select';
-import { type SelectProps } from './types';
+import { type OptionProps, type OptionType, type SingleValueProps } from '@atlaskit/select';
+import { type SelectProps, type SitePickerOptionType } from './types';
 export declare const TEST_ID = "link-create-select";
 /**
  * A select component utilising the Atlaskit Select and CreateField.
@@ -10,3 +11,11 @@ export declare const TEST_ID = "link-create-select";
  * have a key matching the `name` of this field are shown below the field.
  */
 export declare function Select<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: SelectProps<T>): jsx.JSX.Element;
+export type SiteSelectProps = {
+    testId: string;
+    options?: SitePickerOptionType[];
+    name?: string;
+};
+export declare const SiteSelect: ({ options, name, testId }: SiteSelectProps) => jsx.JSX.Element;
+export declare const SitePickerOption: ({ children, ...props }: PropsWithChildren<OptionProps<SitePickerOptionType, false>>) => JSX.Element;
+export declare const SitePickerSingleValue: ({ children, ...props }: PropsWithChildren<SingleValueProps<SitePickerOptionType, false>>) => JSX.Element;

package/dist/types/ui/create-form/select/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    siteLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/ui/create-form/select/types.d.ts

@@ -16,3 +16,12 @@ export type SelectProps<T = OptionType> = AKSelectProps<T> & {
     /** Validators for this field */
     validators?: Validator[];
 };
+export type SitePickerOptionValue = {
+    avatarUrl?: string;
+    cloudId: string;
+    url: string;
+};
+export type SitePickerOptionType = {
+    label: string;
+    value: SitePickerOptionValue;
+};

package/dist/types/ui/index.d.ts

@@ -1,10 +1,11 @@
-export { default } from './modal-create';
 export { default as InlineCreate } from './inline-create';
+export { default } from './modal-create';
 export { TextField } from './create-form/textfield';
-export { CreateForm } from './create-form/main';
-export { CreateFormLoader } from './create-form/form-loader';
-export type { CreateFormProps } from './create-form/main';
-export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
+export { CreateFormLoader } from './create-form/form-loader';
 export { FormSpy } from './create-form/form-spy';
+export { CreateForm } from './create-form/main';
+export type { CreateFormProps } from './create-form/main';
+export { Select, SiteSelect } from './create-form/select';
+export type { SitePickerOptionType } from './create-form/select';
 export { UserPicker } from './create-form/user-picker';

package/dist/types-ts4.5/common/ui/icon/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const UrlIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & {
+    url?: string | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PageIcon: () => JSX.Element;

package/dist/types-ts4.5/index.d.ts

@@ -1,7 +1,8 @@
+export type { CreatePayload, EditViewProps, LinkCreatePlugin, LinkCreateProps, LinkCreateWithModalProps, } from './common/types';
 export type { CreateFormProps } from './ui/index';
-export type { LinkCreateProps, LinkCreatePlugin, LinkCreateWithModalProps, CreatePayload, EditViewProps, } from './common/types';
-export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy, UserPicker, } from './ui/index';
-export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
+export { AsyncSelect, CreateForm, CreateFormLoader, FormSpy, Select, SiteSelect, TextField, UserPicker, default, type SitePickerOptionType, } from './ui/index';
+export { LinkCreateCallbackProvider, useLinkCreateCallback } from './controllers/callback-context';
 export { ExitWarningModalProvider as LinkCreateExitWarningProvider, useWithExitWarning, } from './controllers/exit-warning-modal-context';
 export type { Validator, ValidatorMap } from './common/types';
 export { FORM_ERROR } from 'final-form';
+export { PageIcon, UrlIcon } from './common/ui/icon';

package/dist/types-ts4.5/ui/create-form/select/index.d.ts

@@ -1 +1,2 @@
-export { Select } from './main';
+export { Select, SiteSelect } from './main';
+export { type SitePickerOptionType } from './types';

package/dist/types-ts4.5/ui/create-form/select/main.d.ts

@@ -1,7 +1,8 @@
 /** @jsx jsx */
+import { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
-import { type OptionType } from '@atlaskit/select';
-import { type SelectProps } from './types';
+import { type OptionProps, type OptionType, type SingleValueProps } from '@atlaskit/select';
+import { type SelectProps, type SitePickerOptionType } from './types';
 export declare const TEST_ID = "link-create-select";
 /**
  * A select component utilising the Atlaskit Select and CreateField.
@@ -10,3 +11,11 @@ export declare const TEST_ID = "link-create-select";
  * have a key matching the `name` of this field are shown below the field.
  */
 export declare function Select<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: SelectProps<T>): jsx.JSX.Element;
+export type SiteSelectProps = {
+    testId: string;
+    options?: SitePickerOptionType[];
+    name?: string;
+};
+export declare const SiteSelect: ({ options, name, testId }: SiteSelectProps) => jsx.JSX.Element;
+export declare const SitePickerOption: ({ children, ...props }: PropsWithChildren<OptionProps<SitePickerOptionType, false>>) => JSX.Element;
+export declare const SitePickerSingleValue: ({ children, ...props }: PropsWithChildren<SingleValueProps<SitePickerOptionType, false>>) => JSX.Element;

package/dist/types-ts4.5/ui/create-form/select/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    siteLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/ui/create-form/select/types.d.ts

@@ -16,3 +16,12 @@ export type SelectProps<T = OptionType> = AKSelectProps<T> & {
     /** Validators for this field */
     validators?: Validator[];
 };
+export type SitePickerOptionValue = {
+    avatarUrl?: string;
+    cloudId: string;
+    url: string;
+};
+export type SitePickerOptionType = {
+    label: string;
+    value: SitePickerOptionValue;
+};

package/dist/types-ts4.5/ui/index.d.ts

@@ -1,10 +1,11 @@
-export { default } from './modal-create';
 export { default as InlineCreate } from './inline-create';
+export { default } from './modal-create';
 export { TextField } from './create-form/textfield';
-export { CreateForm } from './create-form/main';
-export { CreateFormLoader } from './create-form/form-loader';
-export type { CreateFormProps } from './create-form/main';
-export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
+export { CreateFormLoader } from './create-form/form-loader';
 export { FormSpy } from './create-form/form-spy';
+export { CreateForm } from './create-form/main';
+export type { CreateFormProps } from './create-form/main';
+export { Select, SiteSelect } from './create-form/select';
+export type { SitePickerOptionType } from './create-form/select';
 export { UserPicker } from './create-form/user-picker';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "2.5.3",
+	"version": "2.6.0",
 	"description": "The driver component of meta creation flow",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -43,6 +43,7 @@
 		"@atlaskit/empty-state": "^7.9.0",
 		"@atlaskit/form": "^10.4.0",
 		"@atlaskit/icon": "^22.5.0",
+		"@atlaskit/icon-file-type": "^6.4.0",
 		"@atlaskit/intl-messages-provider": "^1.0.2",
 		"@atlaskit/linking-common": "^5.7.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
@@ -51,9 +52,11 @@
 		"@atlaskit/smart-user-picker": "^6.9.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/textfield": "^6.4.0",
+		"@atlaskit/theme": "^12.10.0",
 		"@atlaskit/tokens": "^1.53.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
+		"@emotion/styled": "^11.0.0",
 		"debounce-promise": "^3.1.2",
 		"final-form": "^4.20.3",
 		"react-final-form": "^6.5.3"