@hyvor/design 1.1.25-beta-org-19 → 2.0.0-beta.1

package/dist/cloud/@components/UserPicture.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	interface Props {
+		pictureUrl: string | null;
+		name: string;
+		size?: number;
+	}
+
+	let { pictureUrl, name, size = 30 }: Props = $props();
+</script>
+
+{#if pictureUrl}
+	<img src={pictureUrl} alt={name} style="width: {size}px; height: {size}px;" />
+{:else}
+	<span class="user-placeholder" style="width: {size}px; height: {size}px;">
+		{name ? name[0].toUpperCase() : '?'}
+	</span>
+{/if}
+
+<style>
+	img {
+		border-radius: 50%;
+	}
+	.user-placeholder {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		color: var(--text);
+		font-size: 14px;
+		background-color: var(--input);
+	}
+</style>

package/dist/cloud/@components/UserPicture.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    pictureUrl: string | null;
+    name: string;
+    size?: number;
+}
+declare const UserPicture: import("svelte").Component<Props, {}, "">;
+type UserPicture = ReturnType<typeof UserPicture>;
+export default UserPicture;

package/dist/cloud/CloudContext/cloudContext.svelte.d.ts

@@ -57,7 +57,7 @@ export interface CloudContext {
 export interface CloudContextUser {
     id: number;
     name: string | null;
-    username?: string | null;
+    username?: string;
     email: string;
     picture_url: string | null;
 }
@@ -81,5 +81,6 @@ export interface OrganizationMember {
     user_id: number;
     user_username: string;
     user_email: string;
+    user_picture_url: string | null;
 }
 export type OrganizationRole = 'admin' | 'manager' | 'member' | 'billing';

package/dist/cloud/HyvorBar/BarUserPicture.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import UserPicture from '../@components/UserPicture.svelte';
 	import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
 
 	const { user } = $derived(getCloudContext());
 </script>
 
+<UserPicture pictureUrl={user.picture_url} name={user.username || user.name || ''} size={30} />
+
 {#if user.picture_url}
 	<img src={user.picture_url} alt={user.name} />
 {:else}

package/dist/cloud/OrganizationMembers/OrganizationMembersSearch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { toast } from '../../components/index.js';
+	import { clickOutside, IconMessage, toast } from '../../components/index.js';
 	import Loader from '../../components/Loader/Loader.svelte';
 	import TextInput from '../../components/TextInput/TextInput.svelte';
 	import {
@@ -7,18 +7,30 @@
 		type OrganizationMember
 	} from '../CloudContext/cloudContext.svelte.js';
 	import { searchMembers } from './members.js';
+	import { dropdownSlide } from '../../components/Dropdown/dropdownSlide.js';
+	import UserPicture from '../@components/UserPicture.svelte';
+	import IconButton from '../../components/IconButton/IconButton.svelte';
+
+	interface Props {
+		selectedUserId?: number;
+	}
+	let { selectedUserId = $bindable(undefined) }: Props = $props();
 
 	const { instance, organization } = getCloudContext();
 
 	let search = $state('');
 	let role = $derived(organization?.role);
-	let focused = $state(false);
+	let showable = $state(false);
 	let loading = $state(false);
 	let members: undefined | OrganizationMember[] = $state(undefined);
 
+	let selectedMember = $state(null as null | OrganizationMember);
+
 	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	function handleKeyUp() {
+		showable = true;
+
 		if (searchTimeout) {
 			clearTimeout(searchTimeout);
 		}
@@ -44,43 +56,99 @@
 				});
 		}, 500);
 	}
+
+	function handleSelect(member: OrganizationMember) {
+		selectedMember = member;
+		selectedUserId = member.user_id;
+		showable = false;
+	}
+
+	function handleDeselect() {
+		selectedMember = null;
+		selectedUserId = undefined;
+	}
 </script>
 
-<div class="search-wrap">
-	<TextInput
-		placeholder="Search member by email..."
-		bind:value={search}
-		block
-		onkeyup={handleKeyUp}
-		onfocus={() => (focused = true)}
-		onblur={() => (focused = false)}
-	>
-		{#snippet end()}
-			{#if loading}
-				<Loader size={12} colorTrack="transparent" />
-			{/if}
-		{/snippet}
-	</TextInput>
-
-	{#if members !== undefined && focused}
-		<div class="search-results hds-box">
-			{#each members as member}
-				{member.user_email}
-			{/each}
+{#if selectedMember}
+	<div class="selected-wrap">
+		<div class="selected-user">
+			<UserPicture
+				pictureUrl={selectedMember.user_picture_url}
+				name={selectedMember.user_username || selectedMember.user_email}
+				size={30}
+			/>
+
+			<div class="user-data">
+				<div class="username">
+					@{selectedMember.user_username}
+				</div>
+				<div class="email">{selectedMember.user_email}</div>
+			</div>
+		</div>
+		<div>
+			<IconButton size="small" color="input" onclick={handleDeselect}>&times;</IconButton>
 		</div>
-	{/if}
-</div>
-
-<div class="invite-note">
-	Looking for a user outside your organization?
-	{#if role === 'admin' || role === 'manager'}
-		<a href={instance + '/account/org/members?invite'} target="_blank" class="hds-link">
-			Invite them
-		</a>
-	{:else}
-		Ask an admin to invite them
-	{/if} to your organization first.
-</div>
+	</div>
+{:else}
+	<div
+		class="search-wrap"
+		use:clickOutside={{
+			callback: () => (showable = false)
+		}}
+	>
+		<TextInput
+			placeholder="Search member by email..."
+			bind:value={search}
+			block
+			onkeyup={handleKeyUp}
+		>
+			{#snippet end()}
+				{#if loading}
+					<Loader size={12} colorTrack="transparent" />
+				{/if}
+			{/snippet}
+		</TextInput>
+
+		{#if members !== undefined && showable}
+			<div class="search-results hds-box" transition:dropdownSlide>
+				{#if members.length}
+					{#each members as member}
+						<button class="member-row" onclick={() => handleSelect(member)}>
+							<UserPicture
+								pictureUrl={member.user_picture_url}
+								name={member.user_username || member.user_email}
+								size={30}
+							/>
+
+							<div class="user-data">
+								<div class="username">
+									@{member.user_username}
+								</div>
+								<div class="email">{member.user_email}</div>
+							</div>
+
+							<div class="role">
+								{member.role}
+							</div>
+						</button>
+					{/each}
+				{:else}
+					<IconMessage empty padding={30} iconSize={35} message="No members found" />
+				{/if}
+			</div>
+		{/if}
+	</div>
+	<div class="invite-note">
+		Looking for a user outside your organization?
+		{#if role === 'admin' || role === 'manager'}
+			<a href={instance + '/account/org/members?invite'} target="_blank" class="hds-link">
+				Invite them
+			</a>
+		{:else}
+			Ask an admin to invite them
+		{/if} to your organization first.
+	</div>
+{/if}
 
 <style>
 	.invite-note {
@@ -95,7 +163,56 @@
 		position: absolute;
 		top: 100%;
 		width: 100%;
-		padding: 15px;
 		margin-top: 10px;
+		overflow: auto;
+		z-index: 10;
+		max-height: 300px;
+	}
+
+	.member-row {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 15px 25px;
+		transition: 0.1s background-color;
+		cursor: pointer;
+		text-align: left;
+		width: 100%;
+		border-radius: 20px;
+	}
+
+	.member-row:hover {
+		background-color: var(--hover);
+	}
+
+	.username {
+		font-weight: 600;
+	}
+	.email {
+		color: var(--text-light);
+		font-size: 14px;
+	}
+
+	.user-data {
+		flex: 1;
+	}
+
+	.role {
+		text-transform: uppercase;
+		color: var(--text-light);
+		font-size: 13px;
+		font-weight: 600;
+	}
+
+	.selected-wrap {
+		display: flex;
+		align-items: center;
+	}
+
+	.selected-user {
+		display: flex;
+		flex: 1;
+		align-items: center;
+		gap: 6px;
 	}
 </style>

package/dist/cloud/OrganizationMembers/OrganizationMembersSearch.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const OrganizationMembersSearch: import("svelte").Component<Record<string, never>, {}, "">;
+interface Props {
+    selectedUserId?: number;
+}
+declare const OrganizationMembersSearch: import("svelte").Component<Props, {}, "selectedUserId">;
 type OrganizationMembersSearch = ReturnType<typeof OrganizationMembersSearch>;
 export default OrganizationMembersSearch;

package/dist/cloud/index.d.ts

@@ -3,3 +3,4 @@ export { getCloudContext, setCloudContext, type CloudContext as CloudContextType
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';
+export { default as OrganizationMemberSearch } from './OrganizationMembers/OrganizationMembersSearch.svelte';

package/dist/cloud/index.js

@@ -3,3 +3,4 @@ export { getCloudContext, setCloudContext } from './CloudContext/cloudContext.sv
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';
+export { default as OrganizationMemberSearch } from './OrganizationMembers/OrganizationMembersSearch.svelte';

package/dist/components/Dropdown/DropdownContent.svelte

@@ -2,8 +2,8 @@
 	import { onMount } from 'svelte';
 	import { clickOutside } from '../directives/clickOutside.js';
 	import debounce from '../directives/debounce.js';
-	import { elasticInOut } from 'svelte/easing';
 	import type { DropdownAlign, DropdownPosition } from './dropdown.types.js';
+	import { dropdownSlide } from './dropdownSlide.js';
 
 	interface Props {
 		show: boolean;
@@ -116,19 +116,6 @@
 			mutationObserver.disconnect();
 		};
 	});
-
-	function slideIn(node: any) {
-		return {
-			duration: 100,
-			easing: elasticInOut,
-			css: (t: number) => {
-				return `
-                    opacity: ${0.2 + t * 0.8};
-                    transform: translateY(-${(1 - t) * 5}px) scale(${0.95 + t * 0.05});
-                `;
-			}
-		};
-	}
 </script>
 
 <svelte:window onresize={debouncedPosition} onscroll={debouncedPosition} />
@@ -141,7 +128,7 @@
 	}}
 	bind:this={contentWrap}
 	style="width: {width}px"
-	transition:slideIn
+	transition:dropdownSlide
 >
 	<div class="hds-box content" style:padding="{padding}px">
 		{@render children?.()}

package/dist/components/Dropdown/dropdownSlide.d.ts

@@ -0,0 +1,6 @@
+import { elasticInOut } from 'svelte/easing';
+export declare function dropdownSlide(node: any): {
+    duration: number;
+    easing: typeof elasticInOut;
+    css: (t: number) => string;
+};

package/dist/components/Dropdown/dropdownSlide.js

@@ -0,0 +1,13 @@
+import { elasticInOut } from 'svelte/easing';
+export function dropdownSlide(node) {
+    return {
+        duration: 100,
+        easing: elasticInOut,
+        css: (t) => {
+            return `
+                    opacity: ${0.2 + t * 0.8};
+                    transform: translateY(-${(1 - t) * 5}px) scale(${0.95 + t * 0.05});
+                `;
+        }
+    };
+}

package/package.json

@@ -70,5 +70,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.25-beta-org-19"
+	"version": "2.0.0-beta.1"
 }