@atlaskit/popup 1.17.2 → 1.19.0

package/__perf__/closed.tsx

@@ -7,39 +7,39 @@ import Popup from '../src';
 import { interactionTasks } from './utils/interaction-tasks';
 
 function PopupStoryButton() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  return (
-    <Popup
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      content={() => (
-        <div data-testid="popup">
-          <Button>Test</Button>
-        </div>
-      )}
-      trigger={(triggerProps) => (
-        <Button
-          testId="popup-trigger"
-          {...triggerProps}
-          onClick={() => {
-            setIsOpen(!isOpen);
-          }}
-        >
-          Click to toggle
-        </Button>
-      )}
-      placement="bottom"
-    />
-  );
+	const [isOpen, setIsOpen] = React.useState(false);
+	return (
+		<Popup
+			isOpen={isOpen}
+			onClose={() => setIsOpen(false)}
+			content={() => (
+				<div data-testid="popup">
+					<Button>Test</Button>
+				</div>
+			)}
+			trigger={(triggerProps) => (
+				<Button
+					testId="popup-trigger"
+					{...triggerProps}
+					onClick={() => {
+						setIsOpen(!isOpen);
+					}}
+				>
+					Click to toggle
+				</Button>
+			)}
+			placement="bottom"
+		/>
+	);
 }
 
 PopupStoryButton.story = {
-  name: 'Popup @atlaskit/button',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'Popup @atlaskit/button',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default PopupStoryButton;

package/__perf__/default.tsx

@@ -1,6 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useState } from 'react';
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 
 import Button from '@atlaskit/button/custom-theme-button';
@@ -9,26 +13,26 @@ import MediaServicesAddCommentIcon from '@atlaskit/icon/glyph/media-services/add
 import Popup from '../src';
 
 const popupStyles = css({
-  width: 175,
-  height: 250,
+	width: 175,
+	height: 250,
 });
 export default () => {
-  const [isOpen, setIsOpen] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
 
-  return (
-    <Popup
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      placement="bottom-start"
-      content={() => <div css={popupStyles} />}
-      trigger={(triggerProps) => (
-        <Button
-          {...triggerProps}
-          isSelected={isOpen}
-          onClick={() => setIsOpen(!isOpen)}
-          iconBefore={<MediaServicesAddCommentIcon label="Add" />}
-        />
-      )}
-    />
-  );
+	return (
+		<Popup
+			isOpen={isOpen}
+			onClose={() => setIsOpen(false)}
+			placement="bottom-start"
+			content={() => <div css={popupStyles} />}
+			trigger={(triggerProps) => (
+				<Button
+					{...triggerProps}
+					isSelected={isOpen}
+					onClick={() => setIsOpen(!isOpen)}
+					iconBefore={<MediaServicesAddCommentIcon label="Add" />}
+				/>
+			)}
+		/>
+	);
 };

package/__perf__/open.tsx

@@ -5,32 +5,28 @@ import Button from '@atlaskit/button/new';
 import Popup from '../src';
 
 function PopupStoryButtonOpen() {
-  const [isOpen, setIsOpen] = React.useState(true);
-  return (
-    <Popup
-      isOpen={true}
-      onClose={() => setIsOpen(isOpen)}
-      content={() => (
-        <div data-testid="popup">
-          <Button>Test</Button>
-        </div>
-      )}
-      trigger={(triggerProps) => (
-        <Button
-          testId="popup-trigger"
-          {...triggerProps}
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          Click to toggle
-        </Button>
-      )}
-      placement="bottom"
-    />
-  );
+	const [isOpen, setIsOpen] = React.useState(true);
+	return (
+		<Popup
+			isOpen={true}
+			onClose={() => setIsOpen(isOpen)}
+			content={() => (
+				<div data-testid="popup">
+					<Button>Test</Button>
+				</div>
+			)}
+			trigger={(triggerProps) => (
+				<Button testId="popup-trigger" {...triggerProps} onClick={() => setIsOpen(!isOpen)}>
+					Click to toggle
+				</Button>
+			)}
+			placement="bottom"
+		/>
+	);
 }
 
 PopupStoryButtonOpen.story = {
-  name: 'Open Popup @atlaskit/button',
+	name: 'Open Popup @atlaskit/button',
 };
 
 export default PopupStoryButtonOpen;

package/__perf__/popup.tsx

@@ -5,35 +5,35 @@ import Popup from '../src';
 import { interactionTasks } from './utils/interaction-tasks';
 
 function PopupStory() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  return (
-    <Popup
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      content={() => <div data-testid="popup"> Test</div>}
-      trigger={(triggerProps) => (
-        //@ts-ignore https://product-fabric.atlassian.net/browse/DST-1866
-        <button
-          type="button"
-          data-testid="popup-trigger"
-          {...triggerProps}
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          Click to toggle
-        </button>
-      )}
-      placement="bottom"
-    />
-  );
+	const [isOpen, setIsOpen] = React.useState(false);
+	return (
+		<Popup
+			isOpen={isOpen}
+			onClose={() => setIsOpen(false)}
+			content={() => <div data-testid="popup"> Test</div>}
+			trigger={(triggerProps) => (
+				//@ts-ignore https://product-fabric.atlassian.net/browse/DST-1866
+				<button
+					type="button"
+					data-testid="popup-trigger"
+					{...triggerProps}
+					onClick={() => setIsOpen(!isOpen)}
+				>
+					Click to toggle
+				</button>
+			)}
+			placement="bottom"
+		/>
+	);
 }
 
 PopupStory.story = {
-  name: 'Popup',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'Popup',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default PopupStory;

package/__perf__/utils/interaction-tasks.tsx

@@ -1,57 +1,44 @@
 import { findByTestId, fireEvent } from '@testing-library/dom';
-import {
-  type InteractionTaskArgs,
-  type PublicInteractionTask,
-} from 'storybook-addon-performance';
+import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
 
 export const interactionTasks: PublicInteractionTask[] = [
-  {
-    name: 'Click the trigger',
-    description: 'Recording how long a click event take to be processed',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const popup: HTMLElement | null = container.querySelector(
-        '[data-testid="popup-trigger"]',
-      );
-      if (popup == null) {
-        throw new Error('Could not find popup element');
-      }
+	{
+		name: 'Click the trigger',
+		description: 'Recording how long a click event take to be processed',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const popup: HTMLElement | null = container.querySelector('[data-testid="popup-trigger"]');
+			if (popup == null) {
+				throw new Error('Could not find popup element');
+			}
 
-      await controls.time(async () => {
-        // fireEvent.mouseDown(popup);
-        fireEvent.click(popup);
-      });
-    },
-  },
-  {
-    name: 'Open Popup',
-    description: 'Recording how long the popup takes to appear',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const popup: HTMLElement | null = container.querySelector(
-        '[data-testid="popup-trigger"]',
-      );
-      if (popup == null) {
-        throw new Error('Could not find popup element');
-      }
-      const parent: HTMLElement | null = container.parentElement;
-      if (parent == null) {
-        throw new Error('Could not find parent element');
-      }
-      const existingPopup = parent.querySelector('[data-testid="popup"]');
-      if (existingPopup != null) {
-        throw new Error('Unexpected popup found');
-      }
+			await controls.time(async () => {
+				// fireEvent.mouseDown(popup);
+				fireEvent.click(popup);
+			});
+		},
+	},
+	{
+		name: 'Open Popup',
+		description: 'Recording how long the popup takes to appear',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const popup: HTMLElement | null = container.querySelector('[data-testid="popup-trigger"]');
+			if (popup == null) {
+				throw new Error('Could not find popup element');
+			}
+			const parent: HTMLElement | null = container.parentElement;
+			if (parent == null) {
+				throw new Error('Could not find parent element');
+			}
+			const existingPopup = parent.querySelector('[data-testid="popup"]');
+			if (existingPopup != null) {
+				throw new Error('Unexpected popup found');
+			}
 
-      await controls.time(async () => {
-        fireEvent.click(popup);
+			await controls.time(async () => {
+				fireEvent.click(popup);
 
-        await findByTestId(parent, 'popup');
-      });
-    },
-  },
+				await findByTestId(parent, 'popup');
+			});
+		},
+	},
 ];