@hyvor/design 1.1.24-beta.1 → 1.1.24-beta.2

package/dist/components/HyvorBar/Organization/BarOrganization.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
 	import Dropdown from '../../Dropdown/Dropdown.svelte';
 	import Tooltip from '../../Tooltip/Tooltip.svelte';
-	import { barUser, switchOrganization, type BarOrganization } from '../bar.js';
+	import {
+		barOrganizationDropdownOpen,
+		barUser,
+		switchOrganization,
+		type BarOrganization
+	} from '../bar.js';
 	import IconChevronExpand from '@hyvor/icons/IconChevronExpand';
 	import OrgsList from './OrgsList.svelte';
 	import toast from '../../Toast/toast.js';
 
-	let showDropdown = $state(false);
-	let showTooltip = $state(true);
+	let disableTooltip = $state(true);
 	let switching = $state(false);
 
 	let props: {
@@ -15,7 +19,7 @@
 	} = $props();
 
 	async function handleSwitch(org: BarOrganization) {
-		showDropdown = false;
+		barOrganizationDropdownOpen.set(false);
 		switching = true;
 
 		try {
@@ -26,24 +30,24 @@
 			return;
 		}
 
+		switching = false;
 		props.onSwitch(org);
 	}
 
-	$effect(() => {
-		if (showDropdown) {
-			showTooltip = false;
-		} else {
-			setTimeout(() => {
-				showTooltip = true;
-			}, 3000);
-		}
+	barOrganizationDropdownOpen.subscribe((value) => {
+		disableTooltip = true;
 	});
 </script>
 
 {#if $barUser}
-	<Tooltip position="bottom" text="Switch Organization" disabled={!showTooltip}>
+	<Tooltip position="bottom" text="Switch Organization" disabled={disableTooltip}>
 		<span class="wrap">
-			<Dropdown bind:show={showDropdown} align="center" width={275} contentPadding={0}>
+			<Dropdown
+				bind:show={$barOrganizationDropdownOpen}
+				align="center"
+				width={275}
+				contentPadding={0}
+			>
 				{#snippet trigger()}
 					<button>
 						{#if switching}

package/dist/components/HyvorBar/Organization/OrgsList.svelte

@@ -2,13 +2,12 @@
 	import IconMessage from '../../IconMessage/IconMessage.svelte';
 	import Loader from '../../Loader/Loader.svelte';
 	import { onMount } from 'svelte';
-	import { getMyOrganizations, type BarOrganization } from '../bar.js';
+	import { barOrganizations, getMyOrganizations, type BarOrganization } from '../bar.js';
 	import ActionList from '../../ActionList/ActionList.svelte';
 	import ActionListItem from '../../ActionList/ActionListItem.svelte';
 
 	let loading = $state(true);
 	let error = $state('');
-	let orgs = $state<BarOrganization[]>([]);
 
 	let {
 		onSwitch
@@ -17,9 +16,13 @@
 	} = $props();
 
 	onMount(() => {
+		if ($barOrganizations.length > 0) {
+			loading = false;
+			return;
+		}
 		getMyOrganizations()
 			.then((data) => {
-				orgs = data;
+				barOrganizations.set(data);
 			})
 			.catch((err) => {
 				error = 'Failed to load organizations.';
@@ -39,7 +42,7 @@
 {:else}
 	<div class="list-wrap">
 		<ActionList>
-			{#each orgs as org}
+			{#each $barOrganizations as org}
 				<ActionListItem on:select={() => onSwitch(org)}>
 					{org.name}
 					{#snippet end()}

package/dist/components/HyvorBar/bar.d.ts

@@ -39,6 +39,8 @@ export declare const barUser: import("svelte/store").Writable<BarUser | null>;
 export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
 export declare const barLicense: import("svelte/store").Writable<BarResolvedLicense | null>;
 export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
+export declare const barOrganizationDropdownOpen: import("svelte/store").Writable<boolean>;
+export declare const barOrganizations: import("svelte/store").Writable<BarOrganization[]>;
 export declare function setInstanceAndProduct(instance_: string, product_: string): void;
 /**
  * @throws Error if initialization fails
@@ -59,4 +61,8 @@ export declare const bar: {
      * This is useful to create after, for example, a user creates a new blog
      */
     reload: () => void;
+    /**
+     * Open the org selector dropdown from the outside world
+     */
+    openOrganizationDropdown: () => void;
 };

package/dist/components/HyvorBar/bar.js

@@ -6,6 +6,8 @@ export const barUser = writable(null);
 export const barUnreadUpdates = writable(0);
 export const barLicense = writable(null);
 export const barHasFailedInvoices = writable(false);
+export const barOrganizationDropdownOpen = writable(false);
+export const barOrganizations = writable([]);
 export function setInstanceAndProduct(instance_, product_) {
     instance = instance_;
     product = product_;
@@ -126,5 +128,9 @@ export const bar = {
      */
     reload: () => {
         initBar();
-    }
+    },
+    /**
+     * Open the org selector dropdown from the outside world
+     */
+    openOrganizationDropdown: () => barOrganizationDropdownOpen.set(true)
 };

package/package.json

@@ -62,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.24-beta.1"
+	"version": "1.1.24-beta.2"
 }