From 4875f4063fdb9a3869010f565397404210def788 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Asbj=C3=B8rn=20H=C3=A5land?=
 <asbjornhaland@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:45:44 +0100
Subject: [PATCH] fix(person-card): fix placement to top if not enough space on
 bottom (#1375)

Ref AB#48493
Fix equinor/fusion-react-components#1293
Fix equinor/fusion#255
---
 .changeset/good-pumpkins-serve.md             |  5 +++
 .changeset/tame-plants-rescue.md              |  5 +++
 .../person/src/components/avatar/element.ts   | 37 +++++++++++++++----
 .../person/src/components/avatar/types.ts     |  1 +
 .../stories/person/person-avatar.stories.ts   | 12 ++++++
 5 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/good-pumpkins-serve.md
 create mode 100644 .changeset/tame-plants-rescue.md

diff --git a/.changeset/good-pumpkins-serve.md b/.changeset/good-pumpkins-serve.md
new file mode 100644
index 000000000..7e268cf7b
--- /dev/null
+++ b/.changeset/good-pumpkins-serve.md
@@ -0,0 +1,5 @@
+---
+'@equinor/fusion-wc-person': patch
+---
+
+Fix placement to top if there is no space on bottom
diff --git a/.changeset/tame-plants-rescue.md b/.changeset/tame-plants-rescue.md
new file mode 100644
index 000000000..9608a57f1
--- /dev/null
+++ b/.changeset/tame-plants-rescue.md
@@ -0,0 +1,5 @@
+---
+'@equinor/fusion-wc-storybook': patch
+---
+
+Add story for person-avatar to show avatar in each corner
diff --git a/packages/person/src/components/avatar/element.ts b/packages/person/src/components/avatar/element.ts
index fa8458d8a..02ee2a576 100644
--- a/packages/person/src/components/avatar/element.ts
+++ b/packages/person/src/components/avatar/element.ts
@@ -9,7 +9,7 @@ import { IntersectionController } from '@lit-labs/observers/intersection-control
 import { AvatarData, PersonAvatarElementProps } from './types';
 import { PersonAccountType, PersonAvailability } from '../../types';
 import '../card';
-import { computePosition, flip, shift, offset } from '@floating-ui/dom';
+import { computePosition, shift, offset, autoPlacement, autoUpdate } from '@floating-ui/dom';
 import style from './element.css';
 import { PersonInfoControllerHost, PersonInfoTask } from '../../tasks/person-info-task';
 import { PersonPhotoControllerHost, PersonPhotoTask } from '../../tasks/person-photo-task';
@@ -160,19 +160,40 @@ export class PersonAvatarElement
    */
   static openedPersonAvatars: PersonAvatarElement[] = [];
 
-  async updated(props: PropertyValues) {
-    if (props.has('isFloatingOpen') && this.isFloatingOpen && (await this.floating) instanceof HTMLElement) {
-      await this.updateComplete;
-      computePosition(await this.root, await this.floating, {
+  async handleFloatingUi(): Promise<VoidFunction> {
+    const root = await this.root;
+    const floating = await this.floating;
+
+    const update = () => {
+      computePosition(root, floating, {
         placement: 'bottom-start',
-        middleware: [offset(5), flip(), shift({ padding: 5 })],
+        middleware: [
+          offset(5),
+          autoPlacement({
+            allowedPlacements: ['bottom-start', 'top-start'],
+          }),
+          shift({ padding: 5 }),
+        ],
       }).then(async ({ x, y }) => {
-        // use 3d translate
-        Object.assign((await this.floating).style, {
+        Object.assign(floating.style, {
           left: `${x}px`,
           top: `${y}px`,
         });
       });
+    };
+    return autoUpdate(root, floating, update);
+  }
+
+  cleanup?: () => void;
+
+  async updated(props: PropertyValues) {
+    if (props.has('isFloatingOpen')) {
+      if (this.isFloatingOpen) {
+        this.cleanup = await this.handleFloatingUi();
+      } else if (this.cleanup) {
+        this.cleanup();
+        delete this.cleanup;
+      }
     }
   }
 
diff --git a/packages/person/src/components/avatar/types.ts b/packages/person/src/components/avatar/types.ts
index 6879dcba7..98ee88dbf 100644
--- a/packages/person/src/components/avatar/types.ts
+++ b/packages/person/src/components/avatar/types.ts
@@ -11,4 +11,5 @@ export type PersonAvatarElementProps = PersonInfoControllerHostAttributes & {
   clickable?: boolean;
   disabled?: boolean;
   pictureSrc?: string;
+  trigger: PersonAvatarShowCardOnType;
 };
diff --git a/storybook/stories/person/person-avatar.stories.ts b/storybook/stories/person/person-avatar.stories.ts
index 1cd2f62a1..515d3bbe4 100644
--- a/storybook/stories/person/person-avatar.stories.ts
+++ b/storybook/stories/person/person-avatar.stories.ts
@@ -53,4 +53,16 @@ export const Disabled: Story = {
   render: (props) => render({ ...props, disabled: true }),
 };
 
+export const CornerPositions: Story = {
+  ...Default,
+  render: (props) => html`
+    <div style="height: 85vh;">
+      <div style="display: flex; justify-content: space-between;">${render(props)}${render(props)}</div>
+      <div style="display: flex; justify-content: space-between; height: 100%; align-items: flex-end;">
+        ${render(props)}${render(props)}
+      </div>
+    </div>
+  `,
+};
+
 export default meta;