fluent-svelte-extra 1.0.0

package/src/lib/_mixins.scss

@@ -0,0 +1,130 @@
+@use "sass:selector";
+
+@mixin unify-parent($child) {
+	@at-root #{selector.unify(&, $child)} {
+		@content;
+	}
+}
+
+@mixin flex(
+	$direction: false,
+	$justify: false,
+	$align: false,
+	$inline: false,
+	$wrap: false,
+	$gap: false
+) {
+	// display: flex/inline-flex
+	@if $inline {
+		display: inline-flex;
+	} @else {
+		display: flex;
+	}
+
+	// flex-direction
+	@if $direction != false {
+		@if $direction == row {
+			flex-direction: row;
+		} @else if $direction == column {
+			flex-direction: column;
+		} @else if $direction == row-reverse {
+			flex-direction: row-reverse;
+		} @else if $direction == column-reverse {
+			flex-direction: column-reverse;
+		}
+	}
+
+	// justify-content
+	@if $justify != false {
+		@if $justify == normal {
+			justify-content: normal;
+		} @else if $justify == center {
+			justify-content: center;
+		} @else if $justify == start {
+			justify-content: flex-start;
+		} @else if $justify == end {
+			justify-content: flex-end;
+		} @else if $justify == between {
+			justify-content: space-between;
+		} @else if $justify == around {
+			justify-content: space-around;
+		} @else if $justify == evenly {
+			justify-content: space-evenly;
+		}
+	}
+
+	// align-items/align-content
+	@if $align != false {
+		@if $align == normal {
+			align-items: normal;
+		} @else if $align == center {
+			align-items: center;
+		} @else if $align == start {
+			align-items: flex-start;
+		} @else if $align == end {
+			align-items: flex-end;
+		} @else if $align == between {
+			align-content: space-between;
+		} @else if $align == around {
+			align-content: space-around;
+		} @else if $align == evenly {
+			align-content: space-evenly;
+		}
+	}
+
+	// flex-wrap
+	@if $wrap {
+		flex-wrap: wrap;
+	}
+
+	// gap
+	@if $gap {
+		gap: $gap;
+	}
+}
+
+@mixin icon($size: var(--body-font-size)) {
+	inline-size: $size;
+	block-size: auto;
+	fill: currentColor;
+}
+
+@mixin typography-body {
+	user-select: none;
+	font: {
+		family: var(--font-family-text);
+		size: var(--body-font-size);
+		weight: normal;
+	}
+	line-height: 20px;
+}
+
+// can't use this until chromium fixes their compositor
+@mixin acrylic-brush {
+	background-color: var(--fds-solid-background-quarternary);
+	@supports (backdrop-filter: var(--fds-acrylic-blur-factor)) {
+		background-color: transparent;
+		&::before,
+		&::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			inline-size: 100%;
+			block-size: 100%;
+		}
+		&::after {
+			content: "";
+			background: var(--acrylic-noise-asset) center/256px repeat;
+			inset: 0;
+			z-index: -1;
+			opacity: 0.02;
+		}
+		&::before {
+			z-index: 0;
+			mix-blend-mode: luminosity;
+			background: var(--fds-acrylic-background-default);
+			background-blend-mode: color, luminosity;
+			backdrop-filter: var(--fds-acrylic-blur-factor);
+		}
+	}
+}

package/src/lib/index.ts

@@ -0,0 +1,33 @@
+export { default as Button } from "./Button/Button.svelte";
+export { default as Checkbox } from "./Checkbox/Checkbox.svelte";
+export { default as ToggleSwitch } from "./ToggleSwitch/ToggleSwitch.svelte";
+export { default as RadioButton } from "./RadioButton/RadioButton.svelte";
+export { default as ProgressRing } from "./ProgressRing/ProgressRing.svelte";
+export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
+export { default as ComboBox } from "./ComboBox/ComboBox.svelte";
+export { default as InfoBadge } from "./InfoBadge/InfoBadge.svelte";
+export { default as Flyout } from "./Flyout/FlyoutWrapper.svelte";
+export { default as InfoBar } from "./InfoBar/InfoBar.svelte";
+export { default as TextBox } from "./TextBox/TextBox.svelte";
+export { default as TextBoxButton } from "./TextBox/TextBoxButton.svelte";
+export { default as NumberBox } from "./NumberBox/NumberBox.svelte";
+export { default as AutoSuggestBox } from "./AutoSuggestBox/AutoSuggestBox.svelte";
+export { default as Slider } from "./Slider/Slider.svelte";
+export { default as PersonPicture } from "./PersonPicture/PersonPicture.svelte";
+export { default as Tooltip } from "./Tooltip/TooltipWrapper.svelte";
+export { default as ContentDialog } from "./ContentDialog/ContentDialog.svelte";
+export { default as Expander } from "./Expander/Expander.svelte";
+export { default as TextBlock } from "./TextBlock/TextBlock.svelte";
+export { default as IconButton } from "./IconButton/IconButton.svelte";
+export { default as ListItem } from "./ListItem/ListItem.svelte";
+export { default as MenuBar } from "./MenuBar/MenuBar.svelte";
+export { default as MenuBarItem } from "./MenuBar/MenuBarItem.svelte";
+export { default as MenuFlyout } from "./MenuFlyout/MenuFlyoutWrapper.svelte";
+export { default as MenuFlyoutItem } from "./MenuFlyout/MenuFlyoutItem.svelte";
+export { default as MenuFlyoutDivider } from "./MenuFlyout/MenuFlyoutDivider.svelte";
+export { default as ContextMenu } from "./ContextMenu/ContextMenu.svelte";
+export { default as CalendarView } from "./CalendarView/CalendarView.svelte";
+export { default as CalendarDatePicker } from "./CalendarDatePicker/CalendarDatePicker.svelte";
+export { default as NavigationView } from "./NavigationView/NavigationView.svelte";
+export { default as RangeSlider } from "./RangeSlider/RangeSlider.svelte";
+export { default as Flipper } from "./Flipper/Flipper.svelte";

package/src/lib/internal.ts

@@ -0,0 +1,213 @@
+import type { SvelteComponent } from "svelte";
+import type { Options as FocusTrapOptions } from "focus-trap";
+
+import { bubble, listen } from "svelte/internal";
+
+import { tabbable } from "tabbable";
+import { createFocusTrap } from "focus-trap";
+
+export { default as ComboBoxItem } from "./ComboBox/ComboBoxItem.svelte";
+export { default as FlyoutSurface } from "./Flyout/FlyoutSurface.svelte";
+export { default as TooltipSurface } from "./Tooltip/TooltipSurface.svelte";
+export { default as MenuFlyoutSurface } from "./MenuFlyout/MenuFlyoutSurface.svelte";
+export { default as CalendarViewItem } from "./CalendarView/CalendarViewItem.svelte";
+
+// Svelte action for handling outer mouse
+interface ExternalMouseEventOptions {
+	type?: string;
+	stopPropagation?: boolean;
+}
+export function externalMouseEvents(
+	node: HTMLElement,
+	options: ExternalMouseEventOptions = { type: "click", stopPropagation: false }
+) {
+	const { type, stopPropagation } = options;
+	const handleEvent = (event: MouseEvent) => {
+		if (stopPropagation) event.stopPropagation();
+		if (node && !node.contains(event.target as HTMLElement) && !event.defaultPrevented) {
+			node.dispatchEvent(
+				new CustomEvent(`outer${type}`, {
+					detail: event
+				})
+			);
+		}
+	};
+
+	document.addEventListener(type, handleEvent, true);
+
+	return {
+		destroy() {
+			document.removeEventListener(type, handleEvent, true);
+		}
+	};
+}
+
+// Basic wrapper action around focus-trap
+export function focusTrap(node: HTMLElement, options?: FocusTrapOptions) {
+	const trap = createFocusTrap(node, (options = { ...options, fallbackFocus: node }));
+	trap.activate();
+
+	return {
+		destroy() {
+			trap.deactivate();
+		}
+	};
+}
+
+// ID generator for handling WAI-ARIA related attributes
+export function uid(prefix: string) {
+	return (
+		prefix +
+		String.fromCharCode(Math.floor(Math.random() * 26) + 97) +
+		Math.random().toString(16).slice(2) +
+		Date.now().toString(16).split(".")[0]
+	);
+}
+
+interface ArrowNavigationOptions {
+	preventTab?: boolean;
+	stopPropagation?: boolean;
+}
+
+// Controls the focus of a list of elements by using the arrow keys
+export function arrowNavigation(
+	node: HTMLElement,
+	options: ArrowNavigationOptions = { preventTab: false, stopPropagation: false }
+) {
+	const handleKeyDown = (event: KeyboardEvent) => {
+		const { key } = event;
+		const { activeElement } = document;
+
+		let tabOrder = <HTMLElement[]>tabbable(node);
+		// if (directChildren) tabOrder = tabOrder.filter(child => child.parentElement === node);
+		const activeIndex = tabOrder.indexOf(document.activeElement as HTMLElement);
+
+		if (tabOrder.length < 0) return;
+		if (
+			key === "ArrowUp" ||
+			key === "ArrowDown" ||
+			key === "Home" ||
+			key === "End" ||
+			(key === "Tab" && options.preventTab)
+		) {
+			event.preventDefault();
+			if (options.stopPropagation) event.stopPropagation();
+		}
+
+		if (key === "ArrowUp") {
+			if (tabOrder[0] === activeElement) {
+				tabOrder[tabOrder.length - 1].focus();
+			} else if (tabOrder.includes(<HTMLElement>activeElement)) {
+				tabOrder[activeIndex - 1].focus();
+			}
+		} else if (key === "ArrowDown") {
+			if (tabOrder[tabOrder.length - 1] === activeElement) {
+				tabOrder[0].focus();
+			} else if (tabOrder.includes(<HTMLElement>activeElement)) {
+				tabOrder[activeIndex + 1].focus();
+			}
+		} else if (key === "Home") {
+			tabOrder[0].focus();
+		} else if (key === "End") {
+			tabOrder[tabOrder.length - 1].focus();
+		}
+	};
+
+	node.addEventListener("keydown", handleKeyDown);
+
+	return {
+		destroy: () => node.removeEventListener("keydown", handleKeyDown)
+	};
+}
+
+// Returns a number representing the duration of a specified CSS custom property in ms
+export function getCSSDuration(property) {
+	const duration = window.getComputedStyle(document.documentElement).getPropertyValue(property);
+
+	return parseFloat(duration) * (/\ds$/.test(duration) ? 1000 : 1) || 0;
+}
+
+// Function for forwarding DOM events to the component's declaration
+// Adapted from rgossiaux/svelte-headlessui which is modified from hperrin/svelte-material-ui
+export function createEventForwarder(component: SvelteComponent, exclude: string[] = []) {
+	type EventCallback = (event: any) => void;
+
+	// This is our pseudo $on function. It is defined on component mount.
+	let $on: (eventType: string, callback: EventCallback) => () => void;
+
+	// This is a list of events bound before mount.
+	let events: [string, EventCallback][] = [];
+
+	// Monkeypatch SvelteComponent.$on with our own forward-compatible version
+	component.$on = (eventType: string, callback: EventCallback) => {
+		let destructor = () => {};
+		if (exclude.includes(eventType)) {
+			// Bail out of the event forwarding and run the normal Svelte $on() code
+			const callbacks =
+				component.$$.callbacks[eventType] || (component.$$.callbacks[eventType] = []);
+			callbacks.push(callback);
+			return () => {
+				const index = callbacks.indexOf(callback);
+				if (index !== -1) callbacks.splice(index, 1);
+			};
+		}
+		if ($on) {
+			destructor = $on(eventType, callback); // The event was bound programmatically.
+		} else {
+			events.push([eventType, callback]); // The event was bound before mount by Svelte.
+		}
+		return () => destructor();
+	};
+
+	return (node: HTMLElement | SVGElement) => {
+		const destructors: (() => void)[] = [];
+		const forwardDestructors: { [k: string]: () => void } = {};
+		const forward = (e: Event) => bubble(component, e);
+
+		// This function is responsible for listening and forwarding
+		// all bound events.
+		$on = (eventType, callback) => {
+			let handler = callback;
+			// DOM addEventListener options argument.
+			let options: boolean | AddEventListenerOptions = false;
+
+			// Listen for the event directly, with the given options.
+			const off = listen(node, eventType, handler, options);
+			const destructor = () => {
+				off();
+				const idx = destructors.indexOf(destructor);
+				if (idx > -1) {
+					destructors.splice(idx, 1);
+				}
+			};
+
+			destructors.push(destructor);
+
+			// Forward the event from Svelte.
+			if (!(eventType in forwardDestructors)) {
+				forwardDestructors[eventType] = listen(node, eventType, forward);
+			}
+
+			return destructor;
+		};
+
+		// Listen to all the events added before mount.
+		for (const event of events) {
+			$on(event[0], event[1]);
+		}
+
+		return {
+			destroy: () => {
+				// Remove all event listeners.
+				for (const destructor of destructors) {
+					destructor();
+				}
+
+				// Remove all event forwarders.
+				for (let entry of Object.entries(forwardDestructors)) {
+					entry[1]();
+				}
+			}
+		};
+	};
+}

package/src/lib/svelte-jsx.d.ts

@@ -0,0 +1,14 @@
+declare namespace svelte.JSX {
+	interface HTMLAttributes<T> {
+		onouterclick?: () => void;
+		onoutercontextmenu?: () => void;
+		onouterdblclick?: () => void;
+		onoutermousedown?: () => void;
+		onoutermouseenter?: () => void;
+		onoutermouseleave?: () => void;
+		onoutermousemove?: () => void;
+		onoutermouseout?: () => void;
+		onoutermouseover?: () => void;
+		onoutermouseup?: () => void;
+	}
+}