fluent-svelte-extra 1.0.0

package/src/lib/MenuBar/MenuBarItem.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import type { SvelteComponentTyped } from "svelte";
+
+	import { currentMenu } from "./flyoutState";
+
+	import { tabbable } from "tabbable";
+	import { createEventDispatcher, getContext, setContext } from "svelte";
+	import { get_current_component } from "svelte/internal";
+	import { createEventForwarder, arrowNavigation, externalMouseEvents, uid } from "$lib/internal";
+
+	import MenuFlyoutSurface from "../MenuFlyout/MenuFlyoutSurface.svelte";
+
+	/** The current visibility state of the item's menu. */
+	export let open = false;
+
+	/** Controls whether the item is intended for user interaction, and styles it accordingly. */
+	export let disabled = false;
+
+	/** Specifies a custom class name for the item. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the item. */
+	export let element: HTMLLIElement = null;
+
+	/** Obtains a bound DOM reference to the menu's positioning anchor element. */
+	export let anchorElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the inner menu element. */
+	export let menuElement: HTMLUListElement = null;
+
+	let menu: SvelteComponentTyped;
+
+	const forwardEvents = createEventForwarder(get_current_component(), [
+		"open",
+		"close",
+		"select"
+	]);
+	const dispatch = createEventDispatcher();
+	const menuId = uid("fds-menu-flyout-anchor-");
+	const handleSideNavigation =
+		getContext<(event: Event, activeItem: HTMLElement) => void>("sideNavigation");
+
+	$: if ($currentMenu !== menu) open = false;
+	$: if (!menu && element) element.focus();
+	$: if (menu) {
+		focusFirstItem();
+		$currentMenu = menu;
+	} else {
+		$currentMenu = null;
+	}
+	$: if ($$slots.flyout && open && !disabled) {
+		if (open) {
+			dispatch("open");
+		} else {
+			dispatch("close");
+		}
+	}
+
+	function focusFirstItem() {
+		if (open && menu && tabbable(menuElement).length > 0) tabbable(menuElement)[0].focus();
+	}
+
+	function handleEscapeKey({ key }: KeyboardEvent) {
+		if (key === "Escape") open = false;
+	}
+
+	function handleMouseEnter() {
+		if ($currentMenu && $$slots.flyout) {
+			$currentMenu = menu;
+			open = true;
+		}
+	}
+
+	function handleKeyDown({ key }) {
+		if (key === "Enter" || key === " ") {
+			event.preventDefault();
+			open = !open;
+		}
+	}
+
+	function handleFocus() {
+		if (open) {
+			focusFirstItem();
+		} else if ($currentMenu) {
+			$currentMenu = menu;
+			open = true;
+		}
+	}
+
+	setContext("closeFlyout", event => {
+		dispatch("select");
+		event.stopPropagation();
+		open = false;
+	});
+</script>
+
+<svelte:window on:keydown={handleEscapeKey} />
+
+<li
+	use:forwardEvents
+	class="menu-bar-item {className}"
+	class:disabled
+	role="menuitem"
+	tabindex={disabled ? -1 : 0}
+	aria-expanded={$$slots.flyout && !disabled && open}
+	aria-haspopup={$$slots.flyout && !disabled && open}
+	aria-controls={$$slots.flyout && !disabled && menuId}
+	bind:this={element}
+	on:keydown={event => handleSideNavigation(event, element)}
+	on:keydown|self={handleKeyDown}
+	on:focus={handleFocus}
+	on:mousedown={() => (open = !open)}
+	on:mouseenter={handleMouseEnter}
+	{...$$restProps}
+>
+	<slot />
+	{#if $$slots.flyout && open && !disabled}
+		<div
+			class="menu-flyout-anchor"
+			use:arrowNavigation={{ preventTab: true }}
+			use:externalMouseEvents={{ type: "mousedown", stopPropagation: true }}
+			on:outermousedown={() => (open = false)}
+			bind:this={anchorElement}
+		>
+			<MenuFlyoutSurface bind:element={menuElement} bind:this={menu}>
+				<slot name="flyout" />
+			</MenuFlyoutSurface>
+		</div>
+	{/if}
+</li>
+
+<style lang="scss">
+	@use "./MenuBarItem";
+</style>

package/src/lib/MenuBar/flyoutState.ts

@@ -0,0 +1,5 @@
+import type { SvelteComponentTyped } from "svelte";
+
+import { writable } from "svelte/store";
+
+export const currentMenu = writable<SvelteComponentTyped>(null);

package/src/lib/MenuFlyout/MenuFlyoutDivider.scss

@@ -0,0 +1,7 @@
+.menu-flyout-divider {
+	inline-size: 100%;
+	margin-block: 2px;
+	block-size: 1px;
+	border: none;
+	border-block-start: 1px solid var(--divider-stroke-default);
+}

package/src/lib/MenuFlyout/MenuFlyoutDivider.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	/** Specifies a custom class name for the divider. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the divider's element. */
+	export let element: HTMLElement = null;
+</script>
+
+<hr class="menu-flyout-divider {className}" bind:this={element} {...$$restProps} />
+
+<style lang="scss">
+	@use "./MenuFlyoutDivider";
+</style>

package/src/lib/MenuFlyout/MenuFlyoutItem.scss

@@ -0,0 +1,147 @@
+@use "../mixins" as *;
+
+.menu-flyout-item {
+	@include flex($align: center);
+	@include typography-body;
+
+	inline-size: calc(100% - 8px);
+	position: relative;
+	box-sizing: border-box;
+	flex: 0 0 auto;
+	// overflow: hidden;
+	margin: 2px 4px;
+	padding-inline: 12px;
+	border-radius: var(--control-corner-radius);
+	outline: none;
+	background-color: var(--subtle-fill-transparent);
+	color: var(--text-primary);
+	text-decoration: none;
+	cursor: default;
+	user-select: none;
+	block-size: 28px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-decoration: none;
+
+	&::before {
+		content: "";
+		position: absolute;
+		border-radius: 3px;
+		background-color: var(--accent-default);
+		transition: transform var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
+		opacity: 0;
+		inset-inline-start: 0;
+		inline-size: 3px;
+		block-size: 0;
+	}
+
+	&:focus-visible {
+		box-shadow: var(--focus-stroke);
+	}
+
+	&:hover,
+	&[aria-expanded="true"],
+	&.selected {
+		background-color: var(--subtle-fill-secondary);
+	}
+
+	&.checked {
+		:global {
+			.menu-flyout-item- {
+				&bullet,
+				&checkmark {
+					visibility: visible;
+				}
+			}
+		}
+	}
+
+	&:active {
+		background-color: var(--subtle-fill-tertiary);
+
+		&::before {
+			transform: scaleY(0.625);
+		}
+	}
+
+	&.disabled {
+		background-color: var(--subtle-fill-transparent);
+		color: var(--text-disabled);
+		pointer-events: none;
+		&.selected {
+			background-color: var(--subtle-fill-secondary);
+			&::before {
+				background-color: var(--accent-disabled);
+			}
+		}
+		> :global(.menu-flyout-item-hint) {
+			color: var(--text-disabled);
+		}
+	}
+
+	&.selected::before {
+		opacity: 1;
+		block-size: 16px;
+	}
+
+	&.indented {
+		padding-inline-start: 40px;
+	}
+
+	&-checkmark,
+	&-bullet {
+		visibility: hidden;
+	}
+
+	& &-arrow {
+		box-sizing: content-box;
+		inline-size: 12px;
+		block-size: 12px;
+		margin-inline-end: 0;
+		margin-inline-start: auto;
+		padding-inline-start: 24px;
+	}
+
+	&-checkmark {
+		@include flex($align: center, $justify: center);
+		inline-size: 12px;
+		block-size: 12px;
+		margin-inline-start: 2px;
+		margin-inline-end: 14px;
+	}
+
+	&-bullet {
+		inline-size: 4px;
+		block-size: 4px;
+		border-radius: 4px;
+		margin-inline-start: 6px;
+		margin-inline-end: 18px;
+		background-color: currentColor;
+	}
+
+	&-input-label {
+		display: contents;
+	}
+
+	> :global(svg) {
+		@include icon($size: 16px);
+		margin-inline-end: 12px;
+	}
+
+	> :global(.menu-flyout-item-hint) {
+		flex: 1 1 auto;
+		text-align: end;
+		padding-left: 24px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: var(--text-secondary);
+	}
+}
+
+.menu-flyout-submenu-anchor {
+	--fds-menu-flyout-transition-offset: -50%;
+	z-index: 10000;
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-start: 100%;
+}

package/src/lib/MenuFlyout/MenuFlyoutItem.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+	import type { SvelteComponentTyped } from "svelte";
+
+	import { createEventDispatcher, getContext } from "svelte";
+	import { get_current_component } from "svelte/internal";
+
+	import { arrowNavigation, uid, createEventForwarder } from "$lib/internal";
+	import { tabbable } from "tabbable";
+
+	import MenuFlyoutSurface from "../MenuFlyout/MenuFlyoutSurface.svelte";
+	import TextBlock from "../TextBlock/TextBlock.svelte";
+
+	/** Specifies an input type for the item. */
+	export let variant: "standard" | "radio" | "toggle" = "standard";
+
+	/** Marks the item as having a cascading submenu attached to it, and makes the `flyout` slot available. */
+	export let cascading = false;
+
+	/** Secondary hint text displayed to the right of the item. Useful for displaying keyboard accelerators. */
+	export let hint: string = undefined;
+
+	/** Specifies if the item should be styled as selected by the user. */
+	export let selected = false;
+
+	/** Marks a radio or toggle variant item as checked. */
+	export let checked = false;
+
+	/** Indents the left padding of the item making it's text inline with the added icons of other items. */
+	export let indented = false;
+
+	/** Specifies a radio input group that the item should be bound to. Only valid if `variant` is set to `radio`. */
+	export let group: any = [];
+
+	/** Specifies a form input value attribute if `variant` is set to `toggle` or `radio`. */
+	export let value: any = undefined;
+
+	/** Controls whether the item is intended for user interaction, and styles it accordingly. */
+	export let disabled = false;
+
+	/** The current visibility state of a cascading submenu. Only valid is `cascading` is true. */
+	export let open = false;
+
+	/** INTERNAL USE ONLY: Communicates to the wrapped <svelte:self /> instance that the item variant should not be recursively rendered. */
+	export let __depth = false;
+
+	/** Specifies a custom class name for the item. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the item's main container. */
+	export let element: HTMLLIElement = null;
+
+	/** Obtains a bound DOM reference to the item's input element, which is present if `variant` is set to `toggle` or `radio`. */
+	export let inputElement: HTMLInputElement = null;
+
+	/** Obtains a bound DOM reference to the item's outer label, which is present if `variant` is set to `toggle` or `radio`. */
+	export let inputLabelElement: HTMLLabelElement = null;
+
+	/** Obtains a bound DOM reference to the item's submenu anchor element, which is present if the item is cascading and the submenu is visible. */
+	export let subMenuAnchorElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the inner submenumenu element, which is present if the item is cascading and the submenu is visible. */
+	export let subMenuElement: HTMLUListElement = null;
+
+	const forwardEvents = createEventForwarder(get_current_component());
+	const dispatch = createEventDispatcher();
+	const closeFlyout = getContext<(event: Event) => void>("closeFlyout");
+	const menuId = uid("fds-menu-flyout-submenu-");
+
+	let menu: SvelteComponentTyped = null;
+	let subMenuQueue = {
+		open: false,
+		close: false
+	};
+
+	$: dispatch(open ? "open" : "close");
+	$: if (open && menu && tabbable(subMenuElement).length > 0) tabbable(subMenuElement)[0].focus();
+
+	function close(event) {
+		setTimeout(() => {
+			if (!cascading && closeFlyout) closeFlyout(event);
+		});
+	}
+
+	function handleKeyDown(event) {
+		const { key, target } = event;
+		if (key === "Enter" || key === " ") {
+			event.preventDefault();
+			target.click();
+		}
+		if (cascading) {
+			if (key === "ArrowRight") {
+				event.stopPropagation();
+				open = true;
+			} else if (open && key === "ArrowLeft") {
+				event.stopPropagation();
+				open = false;
+				element.focus();
+			}
+		}
+	}
+
+	function handleMouseEnter() {
+		subMenuQueue.close = false;
+		subMenuQueue.open = true;
+		setTimeout(() => {
+			if (subMenuQueue.open) open = true;
+		}, 500);
+	}
+
+	function handleMouseLeave() {
+		subMenuQueue.close = true;
+		subMenuQueue.open = false;
+		setTimeout(() => {
+			if (subMenuQueue.close) open = false;
+		}, 500);
+	}
+</script>
+
+{#if variant === "standard" || __depth}
+	<li
+		tabindex={disabled ? -1 : 0}
+		role="menuitem"
+		aria-expanded={$$slots.flyout && !disabled && open}
+		aria-haspopup={$$slots.flyout && !disabled && open}
+		aria-controls={$$slots.flyout && !disabled && menuId}
+		aria-selected={selected || checked}
+		class="menu-flyout-item type-{variant} {className}"
+		class:cascading
+		class:selected
+		class:checked
+		class:disabled
+		class:indented
+		use:forwardEvents
+		bind:this={element}
+		on:click={close}
+		on:mouseenter={handleMouseEnter}
+		on:mouseleave={handleMouseLeave}
+		on:keydown={handleKeyDown}
+		{...$$restProps}
+	>
+		<slot name="icon" />
+		<slot />
+		{#if hint}
+			<TextBlock class="menu-flyout-item-hint" variant="caption">{hint}</TextBlock>
+		{/if}
+		{#if cascading}
+			<svg
+				class="menu-flyout-item-arrow"
+				xmlns="http://www.w3.org/2000/svg"
+				width="12"
+				height="12"
+				viewBox="0 0 12 12"
+				fill="none"
+			>
+				<path
+					d="M4.64645 2.14645C4.45118 2.34171 4.45118 2.65829 4.64645 2.85355L7.79289 6L4.64645 9.14645C4.45118 9.34171 4.45118 9.65829 4.64645 9.85355C4.84171 10.0488 5.15829 10.0488 5.35355 9.85355L8.85355 6.35355C9.04882 6.15829 9.04882 5.84171 8.85355 5.64645L5.35355 2.14645C5.15829 1.95118 4.84171 1.95118 4.64645 2.14645Z"
+					fill="currentColor"
+				/>
+			</svg>
+			{#if open && $$slots.flyout && !disabled}
+				<div
+					use:arrowNavigation={{ preventTab: true, stopPropagation: true }}
+					bind:this={subMenuAnchorElement}
+					id={menuId}
+					class="menu-flyout-submenu-anchor"
+				>
+					<MenuFlyoutSurface bind:element={subMenuElement} bind:this={menu}>
+						<slot name="flyout" />
+					</MenuFlyoutSurface>
+				</div>
+			{/if}
+		{/if}
+	</li>
+{:else if variant === "radio" || variant === "toggle"}
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<label bind:this={inputLabelElement} class="menu-flyout-item-input-label">
+		<svelte:self
+			checked={checked || group === value}
+			{selected}
+			{variant}
+			{indented}
+			{group}
+			{disabled}
+			__depth
+		>
+			<slot name="icon" slot="icon" />
+			<div class="menu-flyout-item-{variant === 'radio' ? 'bullet' : 'checkmark'}">
+				{#if variant === "toggle"}
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
+							fill="currentColor"
+						/>
+					</svg>
+				{/if}
+			</div>
+			<slot />
+		</svelte:self>
+
+		{#if variant === "radio"}
+			<input
+				type="radio"
+				hidden
+				on:change
+				on:input
+				on:beforeinput
+				bind:group
+				bind:this={inputElement}
+				{value}
+				{checked}
+				{disabled}
+			/>
+		{:else}
+			<input
+				type="checkbox"
+				hidden
+				on:change
+				on:input
+				on:beforeinput
+				bind:this={inputElement}
+				bind:group
+				bind:checked
+				bind:value
+				{disabled}
+			/>
+		{/if}
+	</label>
+{/if}
+
+<style lang="scss">
+	@use "./MenuFlyoutItem";
+</style>

package/src/lib/MenuFlyout/MenuFlyoutSurface.scss

@@ -0,0 +1,42 @@
+@use "../mixins" as *;
+
+@keyframes menu-open {
+	from {
+		transform: translateY(var(--menu-flyout-transition-offset, -50%));
+	}
+	to {
+		transform: none;
+	}
+}
+
+@keyframes menu-shadow {
+	from {
+		box-shadow: none;
+	}
+	to {
+		box-shadow: var(--flyout-shadow);
+	}
+}
+
+.menu-flyout {
+	@include typography-body;
+	@include flex($direction: column);
+	animation: menu-open var(--control-normal-duration) var(--control-fast-out-slow-in-easing),
+		menu-shadow var(--control-fast-duration) var(--control-fast-out-slow-in-easing)
+			var(--control-normal-duration) forwards;
+	min-inline-size: 120px;
+	max-inline-size: 100%;
+	max-block-size: 100vh;
+	margin: 0;
+	padding: 0;
+	padding-block: 2px;
+	box-sizing: border-box;
+	color: var(--text-primary);
+	border-radius: var(--overlay-corner-radius);
+	border: 1px solid var(--surface-stroke-flyout);
+	background-color: var(--solid-background-quarternary);
+	background-clip: padding-box;
+	&-surface-container {
+		overflow: hidden;
+	}
+}

package/src/lib/MenuFlyout/MenuFlyoutSurface.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	/** Specifies a custom class name for the surface. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the surface element. */
+	export let element: HTMLUListElement = null;
+
+	let animationComplete = false;
+</script>
+
+<div
+	class="menu-flyout-surface-container"
+	style={animationComplete ? "overflow: visible;" : undefined}
+>
+	<ul
+		on:animationend|once={() => (animationComplete = true)}
+		class="menu-flyout {className}"
+		bind:this={element}
+		{...$$restProps}
+	>
+		<slot />
+	</ul>
+</div>
+
+<style lang="scss">
+	@use "./MenuFlyoutSurface";
+</style>

package/src/lib/MenuFlyout/MenuFlyoutWrapper.scss

@@ -0,0 +1,64 @@
+.menu-flyout- {
+	&wrapper {
+		display: inline-block;
+		height: auto;
+		position: relative;
+	}
+	&backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 9999;
+	}
+	&anchor {
+		position: absolute;
+		z-index: 10000;
+		&.placement- {
+			&top {
+				--fds-menu-flyout-transition-offset: 50%;
+				bottom: calc(100% + var(--menu-flyout-offset));
+			}
+			&bottom {
+				top: calc(100% + var(--menu-flyout-offset));
+			}
+			&left {
+				right: calc(100% + var(--menu-flyout-offset));
+			}
+			&right {
+				left: calc(100% + var(--menu-flyout-offset));
+			}
+			&top,
+			&bottom {
+				&.alignment- {
+					&start {
+						inset-inline-start: 0;
+					}
+					&end {
+						inset-inline-end: 0;
+					}
+					&center {
+						inset-inline-start: 50%;
+						transform: translateX(-50%);
+					}
+				}
+			}
+			&left,
+			&right {
+				&.alignment- {
+					&start {
+						inset-block-start: 0;
+					}
+					&end {
+						inset-block-end: 0;
+					}
+					&center {
+						inset-block-start: 50%;
+						transform: translateY(-50%);
+					}
+				}
+			}
+		}
+	}
+}