@atlaskit/link-picker 1.48.2 → 1.49.0

package/dist/es2019/common/ui/empty-state/old/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Flex, Text, xcss } from '@atlaskit/primitives';
+const containerStyles = xcss({
+  marginBlockStart: 'space.600',
+  marginBlockEnd: 'space.600',
+  textAlign: 'center'
+});
+export const EmptyStateOld = ({
+  testId,
+  header,
+  description,
+  renderImage
+}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: containerStyles,
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    gap: "space.300"
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    alignItems: "center",
+    gap: "space.200"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    as: "h2"
+  }, header), description && /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    color: "color.text"
+  }, description)));
+};

package/dist/es2019/common/ui/min-height-container/index.compiled.css

@@ -0,0 +1,4 @@
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tke16li{min-height:var(--link-picker-min-height)}
+._4cvr1fhb{align-items:stretch}

package/dist/es2019/common/ui/min-height-container/index.js

@@ -1,25 +1,34 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { minHeightComponentStyles } from './styled';
-export const MinHeightContainer = /*#__PURE__*/forwardRef(({
+import { fg } from '@atlaskit/platform-feature-flags';
+import { MinHeightContainerOld } from './old';
+const minHeightComponentStyles = null;
+export const MinHeightContainerNew = /*#__PURE__*/forwardRef(({
+  className,
   minHeight,
   ...props
 }, ref) => {
-  return jsx("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    css: minHeightComponentStyles
+    className: ax(["_1e0c1txw _4cvr1fhb _1bah1h6o _1tke16li", className])
   }, props, {
     style: {
       ['--link-picker-min-height']: minHeight
     }
   }));
+});
+export const MinHeightContainer = /*#__PURE__*/forwardRef((props, ref) => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(MinHeightContainerNew, _extends({
+      ref: ref
+    }, props));
+  }
+  return /*#__PURE__*/React.createElement(MinHeightContainerOld, _extends({
+    ref: ref
+  }, props));
 });

package/dist/es2019/common/ui/min-height-container/old/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { minHeightComponentStyles } from './styled';
+export const MinHeightContainerOld = /*#__PURE__*/forwardRef(({
+  minHeight,
+  ...props
+}, ref) => {
+  return jsx("div", _extends({
+    ref: ref
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    css: minHeightComponentStyles
+  }, props, {
+    style: {
+      ['--link-picker-min-height']: minHeight
+    }
+  }));
+});

package/dist/es2019/ui/error-boundary/error-boundary-fallback/index.compiled.css

@@ -0,0 +1 @@
+._vwz44jg8{line-height:normal}

package/dist/es2019/ui/error-boundary/error-boundary-fallback/index.js

@@ -1,18 +1,15 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* 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 { defineMessages, useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../common/constants';
 import { GenericErrorSVG } from '../../../common/generic-error-svg';
 import { EmptyState } from '../../../common/ui/empty-state';
 import { MinHeightContainer } from '../../../common/ui/min-height-container';
-const errorBoundaryFallbackStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 'initial'
-});
+import { ErrorBoundaryFallbackOld } from './old';
+const errorBoundaryFallbackStyles = null;
 const messages = defineMessages({
   heading: {
     defaultMessage: 'Something went wrong!',
@@ -25,17 +22,23 @@ const messages = defineMessages({
     id: 'fabric.linkPicker.unhandledError.description'
   }
 });
-export const ErrorBoundaryFallback = () => {
+export const ErrorBoundaryFallbackNew = () => {
   const intl = useIntl();
   const header = intl.formatMessage(messages.heading);
   const description = intl.formatMessage(messages.description);
-  return jsx(MinHeightContainer, {
-    css: errorBoundaryFallbackStyles,
+  return /*#__PURE__*/React.createElement(MinHeightContainer, {
     minHeight: LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
-    "data-testid": "link-picker-root-error-boundary-ui"
-  }, jsx(EmptyState, {
+    "data-testid": "link-picker-root-error-boundary-ui",
+    className: ax(["_vwz44jg8"])
+  }, /*#__PURE__*/React.createElement(EmptyState, {
     header: header,
-    renderImage: () => jsx(GenericErrorSVG, null),
+    renderImage: () => /*#__PURE__*/React.createElement(GenericErrorSVG, null),
     description: description
   }));
+};
+export const ErrorBoundaryFallback = () => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(ErrorBoundaryFallbackNew, null);
+  }
+  return /*#__PURE__*/React.createElement(ErrorBoundaryFallbackOld, null);
 };

package/dist/es2019/ui/error-boundary/error-boundary-fallback/old/index.js

@@ -0,0 +1,41 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { defineMessages, useIntl } from 'react-intl-next';
+import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../../common/constants';
+import { GenericErrorSVG } from '../../../../common/generic-error-svg';
+import { EmptyState } from '../../../../common/ui/empty-state';
+import { MinHeightContainer } from '../../../../common/ui/min-height-container';
+const errorBoundaryFallbackStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 'initial'
+});
+const messages = defineMessages({
+  heading: {
+    defaultMessage: 'Something went wrong!',
+    description: 'Heading displayed when an unhandled error occurs.',
+    id: 'fabric.linkPicker.unhandledError.heading'
+  },
+  description: {
+    defaultMessage: 'Try reloading the page.',
+    description: 'Body message shown underneath the heading when an unhandled error occurs.',
+    id: 'fabric.linkPicker.unhandledError.description'
+  }
+});
+export const ErrorBoundaryFallbackOld = () => {
+  const intl = useIntl();
+  const header = intl.formatMessage(messages.heading);
+  const description = intl.formatMessage(messages.description);
+  return jsx(MinHeightContainer, {
+    css: errorBoundaryFallbackStyles,
+    minHeight: LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
+    "data-testid": "link-picker-root-error-boundary-ui"
+  }, jsx(EmptyState, {
+    header: header,
+    renderImage: () => jsx(GenericErrorSVG, null),
+    description: description
+  }));
+};

package/dist/es2019/ui/link-picker/form-footer/index.compiled.css

@@ -0,0 +1,3 @@
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._2hwx1wug{margin-right:auto}

package/dist/es2019/ui/link-picker/form-footer/index.js

@@ -1,27 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { defineMessages, useIntl } from 'react-intl-next';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import EditorAddIconLegacy from '@atlaskit/icon/glyph/editor/add';
 import EditorAddIcon from '@atlaskit/icon/utility/add';
+import { fg } from '@atlaskit/platform-feature-flags';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { UnauthenticatedError } from '../../../common/utils/errors';
-import FeatureDiscovery from './feature-discovery';
 import { LinkPickerSubmitButton } from './link-picker-submit-button';
-const formFooterStyles = css({
-  display: 'flex',
-  justifyContent: 'flex-end'
-});
-const formFooterActionStyles = css({
-  marginRight: 'auto'
-});
+import { FormFooterOld } from './old';
+const formFooterStyles = null;
+const formFooterActionStyles = null;
 export const messages = defineMessages({
   cancelButton: {
     id: 'fabric.linkPicker.button.cancel',
@@ -38,11 +31,9 @@ export const testIds = {
   insertButton: 'link-picker-insert-button',
   cancelButton: 'link-picker-cancel-button',
   actionButton: 'link-picker-action-button',
-  submitStatusA11yIndicator: 'link-picker-submit-status-a11y-indicator',
-  /** Feature discovery for action button (css pulse) */
-  actionButtonDiscovery: 'link-picker-action-button-discovery'
+  submitStatusA11yIndicator: 'link-picker-submit-status-a11y-indicator'
 };
-export const FormFooter = /*#__PURE__*/memo(({
+export const FormFooterNew = /*#__PURE__*/memo(({
   isLoading,
   isSubmitting = false,
   error,
@@ -52,21 +43,21 @@ export const FormFooter = /*#__PURE__*/memo(({
   isEditing,
   onCancel,
   action,
-  createFeatureDiscovery = false,
   customSubmitButtonLabel,
   submitMessageId,
   hideSubmitButton,
+  className,
   ...restProps
 }) => {
   const intl = useIntl();
   if (error && error instanceof UnauthenticatedError) {
     return null;
   }
-  const createButton = pluginAction => jsx(Button, {
+  const createButton = pluginAction => /*#__PURE__*/React.createElement(Button, {
     testId: testIds.actionButton,
     onClick: pluginAction.callback,
     appearance: "default",
-    iconBefore: jsx(EditorAddIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(EditorAddIcon, {
       label: "",
       LEGACY_size: "medium",
       LEGACY_fallbackIcon: EditorAddIconLegacy,
@@ -75,23 +66,21 @@ export const FormFooter = /*#__PURE__*/memo(({
     isDisabled: isSubmitting,
     "aria-labelledby": isSubmitting ? submitMessageId : undefined
   }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
-  return jsx("footer", _extends({
-    css: formFooterStyles
-  }, restProps), isSubmitting && jsx(VisuallyHidden, {
+  return /*#__PURE__*/React.createElement("footer", _extends({
+    className: ax(["_1e0c1txw _1bahesu3", className])
+  }, restProps), isSubmitting && /*#__PURE__*/React.createElement(VisuallyHidden, {
     role: "status",
     id: submitMessageId,
     testId: testIds.submitStatusA11yIndicator
-  }, intl.formatMessage(messages.submittingStatusMessage)), action && jsx("div", {
-    css: formFooterActionStyles
-  }, createFeatureDiscovery ? jsx(FeatureDiscovery, {
-    testId: testIds.actionButtonDiscovery
-  }, createButton(action)) : createButton(action)), jsx(ButtonGroup, null, onCancel && jsx(Button, {
+  }, intl.formatMessage(messages.submittingStatusMessage)), action && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2hwx1wug"])
+  }, createButton(action)), /*#__PURE__*/React.createElement(ButtonGroup, null, onCancel && /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: onCancel,
     testId: testIds.cancelButton,
     isDisabled: isSubmitting,
     "aria-labelledby": isSubmitting ? submitMessageId : undefined
-  }, intl.formatMessage(messages.cancelButton)), !hideSubmitButton && jsx(LinkPickerSubmitButton, {
+  }, intl.formatMessage(messages.cancelButton)), !hideSubmitButton && /*#__PURE__*/React.createElement(LinkPickerSubmitButton, {
     isEditing: isEditing,
     isLoading: isLoading,
     isSubmitting: isSubmitting,
@@ -103,4 +92,10 @@ export const FormFooter = /*#__PURE__*/memo(({
     testId: testIds.insertButton,
     url: url
   })));
-});
+});
+export const FormFooter = props => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(FormFooterNew, props);
+  }
+  return /*#__PURE__*/React.createElement(FormFooterOld, props);
+};

package/dist/es2019/ui/link-picker/form-footer/link-picker-submit-button/index.js

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl-next';
 import LoadingButton from '@atlaskit/button/loading-button';
 import { checkSubmitDisabled } from './utils';
@@ -34,7 +29,7 @@ export const LinkPickerSubmitButton = ({
   const intl = useIntl();
   const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   const isSubmitDisabled = checkSubmitDisabled(isLoading, isSubmitting, error, url, queryState, items);
-  return jsx(LoadingButton, {
+  return /*#__PURE__*/React.createElement(LoadingButton, {
     type: "submit",
     appearance: "primary",
     testId: testId,

package/dist/es2019/ui/link-picker/form-footer/old/index.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { memo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { defineMessages, useIntl } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import EditorAddIconLegacy from '@atlaskit/icon/glyph/editor/add';
+import EditorAddIcon from '@atlaskit/icon/utility/add';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { UnauthenticatedError } from '../../../../common/utils/errors';
+import { LinkPickerSubmitButton } from '../link-picker-submit-button';
+const formFooterStyles = css({
+  display: 'flex',
+  justifyContent: 'flex-end'
+});
+const formFooterActionStyles = css({
+  marginRight: 'auto'
+});
+export const messages = defineMessages({
+  cancelButton: {
+    id: 'fabric.linkPicker.button.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel and dismiss the link picker'
+  },
+  submittingStatusMessage: {
+    id: 'fabric.linkPicker.status.submitting',
+    defaultMessage: 'Submitting',
+    description: 'Accessibility text to indicate the form has been submitted, and submission is in-progress'
+  }
+});
+export const testIds = {
+  insertButton: 'link-picker-insert-button',
+  cancelButton: 'link-picker-cancel-button',
+  actionButton: 'link-picker-action-button',
+  submitStatusA11yIndicator: 'link-picker-submit-status-a11y-indicator',
+  /** Feature discovery for action button (css pulse) */
+  actionButtonDiscovery: 'link-picker-action-button-discovery'
+};
+export const FormFooterOld = /*#__PURE__*/memo(({
+  isLoading,
+  isSubmitting = false,
+  error,
+  url,
+  queryState,
+  items,
+  isEditing,
+  onCancel,
+  action,
+  customSubmitButtonLabel,
+  submitMessageId,
+  hideSubmitButton,
+  ...restProps
+}) => {
+  const intl = useIntl();
+  if (error && error instanceof UnauthenticatedError) {
+    return null;
+  }
+  const createButton = pluginAction => jsx(Button, {
+    testId: testIds.actionButton,
+    onClick: pluginAction.callback,
+    appearance: "default",
+    iconBefore: jsx(EditorAddIcon, {
+      label: "",
+      LEGACY_size: "medium",
+      LEGACY_fallbackIcon: EditorAddIconLegacy,
+      color: "currentColor"
+    }),
+    isDisabled: isSubmitting,
+    "aria-labelledby": isSubmitting ? submitMessageId : undefined
+  }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
+  return jsx("footer", _extends({
+    css: formFooterStyles
+  }, restProps), isSubmitting && jsx(VisuallyHidden, {
+    role: "status",
+    id: submitMessageId,
+    testId: testIds.submitStatusA11yIndicator
+  }, intl.formatMessage(messages.submittingStatusMessage)), action && jsx("div", {
+    css: formFooterActionStyles
+  }, createButton(action)), jsx(ButtonGroup, null, onCancel && jsx(Button, {
+    appearance: "subtle",
+    onClick: onCancel,
+    testId: testIds.cancelButton,
+    isDisabled: isSubmitting,
+    "aria-labelledby": isSubmitting ? submitMessageId : undefined
+  }, intl.formatMessage(messages.cancelButton)), !hideSubmitButton && jsx(LinkPickerSubmitButton, {
+    isEditing: isEditing,
+    isLoading: isLoading,
+    isSubmitting: isSubmitting,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    error: error,
+    items: items,
+    queryState: queryState,
+    submitMessageId: submitMessageId,
+    testId: testIds.insertButton,
+    url: url
+  })));
+});

package/dist/es2019/ui/link-picker/index.compiled.css

@@ -0,0 +1,10 @@
+._19bv164s{padding-left:var(--link-picker-padding-left)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1e0c1txw{display:flex}
+._1e0ctcjq{display:block!important}
+._2lx21bp4{flex-direction:column}
+._ca0q1k79{padding-top:var(--link-picker-padding-top)}
+._n3td1t3k{padding-bottom:var(--link-picker-padding-bottom)}
+._u5f31pah{padding-right:var(--link-picker-padding-right)}
+._vchhusvi{box-sizing:border-box}
+._vwz44jg8{line-height:normal}