fluentui-svelte 0.2.0 → 0.3.0

package/dist/components/list-view/list-view.svelte

@@ -16,8 +16,14 @@
 		...attributes
 	}: ListViewProps<Tag> = $props();
 
-	// svelte-ignore state_referenced_locally
-	if (!TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${TAG.join(', ')}`);
+	/**
+	 * The tag the invariant rules over. The markup renders it through here, so it is checked
+	 * during SSR and on every prop update rather than only once on mount.
+	 */
+	const _as = $derived.by(() => {
+		if (!TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${TAG.join(', ')}`);
+		return as;
+	});
 
 	const ROLE = $derived(getRole(as, selectionMode, navigationMode));
 
@@ -44,76 +50,75 @@
 		disabled: boolean;
 	}[] = $state([]);
 
-	const config: ListViewContext['config'] = $derived({
-		shape
-	});
-
-	const _state: ListViewContext['state'] = {
-		get selectedItems() {
-			return selectedItems;
-		},
-		set selectedItems(v) {
-			selectedItems = v;
-		},
-		get anchorIndex() {
-			return anchorIndex;
-		},
-		set anchorIndex(v) {
-			anchorIndex = v;
-		}
-	};
-
-	let methods: ListViewContext['methods'] = {
-		handleSelection: (e: MouseEvent, value: string) => {
-			if (selectionMode === 'none') return;
-
-			const itemIndex = items.findIndex((item) => item.value === value);
-			if (itemIndex === -1) return;
-
-			const item = items[itemIndex];
-			if (item.disabled) return;
-
-			if (selectionMode === 'extended' && e.shiftKey && anchorIndex !== null) {
-				const start = Math.min(anchorIndex, itemIndex);
-				const end = Math.max(anchorIndex, itemIndex);
-				const rangeValues = items
-					.slice(start, end + 1)
-					.filter((i) => !i.disabled)
-					.map((i) => i.value);
-				const newSelectedItems = Array.from(new Set([..._state.selectedItems, ...rangeValues]));
-				_state.selectedItems = newSelectedItems;
-			} else if (MULTISELECTABLE && (e.ctrlKey || e.metaKey)) {
-				_state.selectedItems = _state.selectedItems.includes(value)
-					? _state.selectedItems.filter((v) => v !== value)
-					: [..._state.selectedItems, value];
-				_state.anchorIndex = itemIndex;
-			} else {
-				_state.selectedItems = [value];
-				_state.anchorIndex = itemIndex;
+	const CONTEXT: ListViewContext = $state({
+		config: {
+			get shape() {
+				return shape;
 			}
-			onSelectionChange?.(e, _state.selectedItems);
 		},
-		registerItem: (id: string, value: string, disabled: boolean) => {
-			items.push({ id, value, disabled });
-		},
-		unregisterItem: (id: string) => {
-			items = items.filter((item) => item.id !== id);
+		state: {
+			get selectedItems() {
+				return selectedItems;
+			},
+			set selectedItems(v) {
+				selectedItems = v;
+			},
+			get anchorIndex() {
+				return anchorIndex;
+			},
+			set anchorIndex(v) {
+				anchorIndex = v;
+			}
 		},
-		getChildrenRole: (_tag: 'li' | 'a' | 'div') => {
-			if (ROLE === 'grid') return 'row';
-			if (ROLE === 'listbox') return 'option';
-			return _tag !== 'li' ? 'listitem' : undefined;
+		events: null,
+		methods: {
+			handleSelection: (e: MouseEvent, value: string) => {
+				if (selectionMode === 'none') return;
+
+				const itemIndex = items.findIndex((item) => item.value === value);
+				if (itemIndex === -1) return;
+
+				const item = items[itemIndex];
+				if (item.disabled) return;
+
+				if (selectionMode === 'extended' && e.shiftKey && anchorIndex !== null) {
+					const start = Math.min(anchorIndex, itemIndex);
+					const end = Math.max(anchorIndex, itemIndex);
+					const rangeValues = items
+						.slice(start, end + 1)
+						.filter((i) => !i.disabled)
+						.map((i) => i.value);
+					selectedItems = Array.from(new Set([...selectedItems, ...rangeValues]));
+				} else if (MULTISELECTABLE && (e.ctrlKey || e.metaKey)) {
+					selectedItems = selectedItems.includes(value)
+						? selectedItems.filter((v) => v !== value)
+						: [...selectedItems, value];
+					anchorIndex = itemIndex;
+				} else {
+					selectedItems = [value];
+					anchorIndex = itemIndex;
+				}
+				onSelectionChange?.(e, selectedItems);
+			},
+			registerItem: (id: string, value: string, disabled: boolean) => {
+				items.push({ id, value, disabled });
+			},
+			unregisterItem: (id: string) => {
+				items = items.filter((item) => item.id !== id);
+			},
+			getChildrenRole: (_tag: 'li' | 'a' | 'div') => {
+				if (ROLE === 'grid') return 'row';
+				if (ROLE === 'listbox') return 'option';
+				return _tag !== 'li' ? 'listitem' : undefined;
+			}
 		}
-	};
-
-	// svelte-ignore state_referenced_locally
-	const CONTEXT: ListViewContext = { config, state: _state, events: null, methods };
+	});
 
 	setListViewContext(CONTEXT);
 </script>
 
 <svelte:element
-	this={as}
+	this={_as}
 	bind:this={ref as ListViewDOM[Tag]}
 	class="fs-list-view"
 	role={ROLE}

package/dist/components/menu/context-menu-trigger.svelte

@@ -24,52 +24,57 @@
 
 	const { toggle, close } = context.methods;
 
-	const { id, openingDelay } = context.config;
+	const id = $derived(context.config.id);
 
-	let offClick: (() => void) | null = $state(null);
-
-	const debounced = useDebounce(async (e: MouseEvent) => {
-		if (disabled) return;
-
-		const { clientX, clientY } = e;
-
-		_state.ref = {
-			getBoundingClientRect() {
-				return {
-					width: 0,
-					height: 0,
-					x: clientX,
-					y: clientY,
-					top: clientY,
-					right: clientX,
-					bottom: clientY,
-					left: clientX
-				};
-			}
-		};
-
-		// Add event to check if user click outside the menu to close it
-		offClick ??= on(document, 'click', (e) => {
-			const clickTarget = e.target as HTMLElement;
+	const openingDelay = $derived(context.config.openingDelay);
 
-			if (!clickTarget.closest(`#fs-menu-popover-${id}`)) {
-				_state.locked = false;
-				close(e);
-				offClick?.();
-				offClick = null;
-			}
-		});
+	let offClick: (() => void) | null = $state(null);
 
-		_state.locked = !_state.locked;
-		toggle(e);
+	const debounced = useDebounce(
+		async (e: MouseEvent) => {
+			if (disabled) return;
+
+			const { clientX, clientY } = e;
+
+			_state.ref = {
+				getBoundingClientRect() {
+					return {
+						width: 0,
+						height: 0,
+						x: clientX,
+						y: clientY,
+						top: clientY,
+						right: clientX,
+						bottom: clientY,
+						left: clientX
+					};
+				}
+			};
+
+			// Add event to check if user click outside the menu to close it
+			offClick ??= on(document, 'click', (e) => {
+				const clickTarget = e.target as HTMLElement;
+
+				if (!clickTarget.closest(`#fs-menu-popover-${id}`)) {
+					_state.locked = false;
+					close(e);
+					offClick?.();
+					offClick = null;
+				}
+			});
 
-		// When requesting to open the context menu when is already open, we need to wait for the toggle to finish before allowing it to be toggled again
-		if (!_state.open) {
-			await tick();
 			_state.locked = !_state.locked;
 			toggle(e);
-		}
-	}, openingDelay || 0);
+
+			// When requesting to open the context menu when is already open, we need to wait for the toggle to finish before allowing it to be toggled again
+			if (!_state.open) {
+				await tick();
+				_state.locked = !_state.locked;
+				toggle(e);
+			}
+		},
+		() => openingDelay || 0
+	);
 
 	onMount(() => {
 		_state.ref ??= VIRTUAL_ELEMENT;

package/dist/components/menu/docs/llms.md

@@ -121,49 +121,78 @@ This variant of the `MenuTrigger` component allows you to create context menus t
 
 ## Component Props (Menu)
 
-| Name                      | Type                                                          | Description                                                                               |
-| ------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `checkedValues`           | `Record<string, string[]>`                                    | Map-like object of checked values, keyed by group name.                                   |
-| `onCheckedValueChange`    | `(e: Event, checkedValues: Record<string, string[]>) => void` | Callback fired when checked values change.                                                |
-| `hasCheckmarks`           | `boolean`                                                     | States that menu items can contain selectable items and reserve slots for item alignment. |
-| `hasIcons`                | `boolean`                                                     | States that menu items can contain icons and reserve slots for item alignment.            |
-| `openingDelay`            | `number`                                                      | The delay in milliseconds before opening a submenu on hover. Default is 0.                |
-| `open`                    | `boolean`                                                     | Controls the open state of the menu.                                                      |
-| `onOpenChange`            | `(e: Event, open: boolean) => void`                           | Callback fired when the open state of the menu changes.                                   |
-| `openOnHover`             | `boolean`                                                     | If true, the menu will open when the trigger is hovered.                                  |
-| `persistOnItemActivation` | `boolean`                                                     | If true, the menu will not close when a menu item is activated.                           |
-| `positionConfig`          | `Partial<ComputePositionConfig>`                              | Configuration for the Floating UI positioning. It will be passed down to MenuPopover.     |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuProps -->
+
+| Name                      | Type                                                          | Default | Description                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------- |
+| `positionConfig`          | `ComputePositionConfig`                                       |         | The position configuration handed over to floating-ui.                     |
+| `hasIcons`                | `boolean`                                                     |         | Reserves the room every item needs for an icon, so the labels line up.     |
+| `hasCheckmarks`           | `boolean`                                                     |         | Reserves the room every item needs for a checkmark, so the labels line up. |
+| `open`                    | `boolean`                                                     |         | Controls the open state of the menu.                                       |
+| `onOpenChange`            | `(e: Event, open: boolean) => void`                           |         | Called whenever the menu opens or closes.                                  |
+| `checkedValues`           | `Record<string, string[]>`                                    | `{}`    | The checked values of the menu, grouped by the `name` of each item.        |
+| `onCheckedValueChange`    | `(e: Event, checkedValues: Record<string, string[]>) => void` |         | Called whenever a checkbox or radio item changes.                          |
+| `openOnHover`             | `boolean`                                                     | `false` | Opens the menu on hover instead of on click.                               |
+| `openingDelay`            | `number`                                                      | `0`     | How long to wait, in milliseconds, before opening the menu.                |
+| `persistOnItemActivation` | `boolean`                                                     | `false` | Keeps the menu open after an item is activated.                            |
+| `children`                | `Snippet`                                                     |         | The parts of the menu: a trigger and a popover.                            |
+
+<!-- /props:MenuProps -->
 
 ## Component Props (MenuTrigger)
 
-| Name       | Type                            | Description                                             |
-| ---------- | ------------------------------- | ------------------------------------------------------- |
-| `shape`    | `rounded \| circular \| square` | The shape of the trigger element. Default is 'rounded'. |
-| `icon`     | `Snippet \| Component`          | An optional icon to display in the trigger element.     |
-| `disabled` | `boolean`                       | If true, the trigger element will be disabled.          |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuTriggerProps -->
+
+| Name       | Type                                              | Default | Description                                                                               |
+| ---------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `disabled` | `boolean`                                         |         | Disables the user interaction.                                                            |
+| `shape`    | `'circular'` &#124; `'rounded'` &#124; `'square'` |         | The trigger can be rounded, circular, or square.                                          |
+| `icon`     | `Snippet` &#124; `Component`                      |         | An optional icon for the trigger.                                                         |
+| `children` | `Snippet`                                         |         | A custom trigger. It receives the menu state and the props to spread on your own buttons. |
+
+<!-- /props:MenuTriggerProps -->
 
 ## Component Props (MenuItem)
 
-| Name               | Type                   | Description                                                          |
-| ------------------ | ---------------------- | -------------------------------------------------------------------- |
-| `icon`             | `Snippet \| Component` | An optional icon to display in the menu item.                        |
-| `subText`          | `string`               | Optional subtext to display below the main content of the menu item. |
-| `secondaryContent` | `string`               | Optional secondary content to display like a hint text.              |
-| `href`             | `string`               | If provided, the menu item will render as an anchor element.         |
-| `disabled`         | `boolean`              | If true, the menu item will be disabled.                             |
-| `onClick`          | `(e: Event) => void`   | Callback fired when the menu item is clicked.                        |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuItemProps -->
+
+| Name               | Type                         | Default | Description                                      |
+| ------------------ | ---------------------------- | ------- | ------------------------------------------------ |
+| `icon`             | `Snippet` &#124; `Component` |         | The icon to display before the label.            |
+| `secondaryContent` | `string`                     |         | Right aligned text, usually a keyboard shortcut. |
+| `disabled`         | `boolean`                    |         | Disables the user interaction.                   |
+| `subText`          | `string`                     |         | A second line of text below the label.           |
+| `href`             | `string`                     |         | Renders the item as a link pointing to this URL. |
+
+<!-- /props:MenuItemProps -->
 
 ## Component Props (MenuItemCheckbox/Switch/Radio)
 
-| Name                 | Type      | Description                                                                    |
-| -------------------- | --------- | ------------------------------------------------------------------------------ |
-| All `MenuItem` props |           | All props from the MenuItem component are compatible.                          |
-| `value`              | `string`  | The value of the checkbox item. This is required for the item to be checkable. |
-| `checked`            | `boolean` | Controls the checked state of the checkbox item. (Bindable)                    |
-| `name`               | `string`  | The name of the checkbox item, used for grouping related checkboxes.           |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuItemActionableProps -->
+
+| Name                                   | Type      | Default | Description                                                                                |
+| -------------------------------------- | --------- | ------- | ------------------------------------------------------------------------------------------ |
+| `checked` _bindable_                   | `boolean` |         | Whether the item is checked.                                                               |
+| `value`                                | `string`  | `id`    | The value reported to the menu when the item is checked. Falls back to the id of the item. |
+| `name`                                 | `string`  | `id`    | The group of items this one belongs to. Falls back to the id of the item.                  |
+| `MenuItemProps` without `href`         |           |         |                                                                                            |
+| `ComponentProps<typeof Button<'div'>>` |           |         |                                                                                            |
+
+<!-- /props:MenuItemActionableProps -->
 
 ## Component Props (MenuGroup)
 
-| Name     | Type     | Description                                      |
-| -------- | -------- | ------------------------------------------------ |
-| `header` | `string` | Optional header text to display above the group. |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuGroupProps -->
+
+| Name             | Type             | Default | Description                             |
+| ---------------- | ---------------- | ------- | --------------------------------------- |
+| `ref` _bindable_ | `HTMLDivElement` |         | The DOM reference of the group element. |
+| `header`         | `string`         |         | The label of the group.                 |
+| `children`       | `Snippet`        |         | The items of the group.                 |
+
+<!-- /props:MenuGroupProps -->

package/dist/components/menu/menu-item-checkbox.svelte

@@ -31,7 +31,9 @@
 
 	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
 
-	const { hasIcons, hasCheckmarks } = context.config;
+	const hasIcons = $derived(context.config.hasIcons);
+
+	const hasCheckmarks = $derived(context.config.hasCheckmarks);
 
 	const { toggleCheckbox } = context.methods;
 

package/dist/components/menu/menu-item-radio.svelte

@@ -31,7 +31,9 @@
 
 	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
 
-	const { hasIcons, persistOnItemActivation } = context.config;
+	const hasIcons = $derived(context.config.hasIcons);
+
+	const persistOnItemActivation = $derived(context.config.persistOnItemActivation);
 
 	const { toggleRadio, toggle } = context.methods;
 

package/dist/components/menu/menu-item-switch.svelte

@@ -30,7 +30,9 @@
 
 	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
 
-	const { hasIcons, hasCheckmarks } = context.config;
+	const hasIcons = $derived(context.config.hasIcons);
+
+	const hasCheckmarks = $derived(context.config.hasCheckmarks);
 
 	const { toggleCheckbox } = context.methods;
 

package/dist/components/menu/menu-item.svelte

@@ -29,7 +29,11 @@
 
 	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
 
-	const { hasIcons, hasCheckmarks, persistOnItemActivation } = context.config;
+	const hasIcons = $derived(context.config.hasIcons);
+
+	const hasCheckmarks = $derived(context.config.hasCheckmarks);
+
+	const persistOnItemActivation = $derived(context.config.persistOnItemActivation);
 
 	const { toggle } = context.methods;
 

package/dist/components/menu/menu-popover.svelte

@@ -33,7 +33,15 @@
 
 	const reducedMotion = getReducedMotion();
 
-	const { positionConfig, id, isSubMenu, openOnHover, openingDelay } = context.config;
+	const positionConfig = $derived(context.config.positionConfig);
+
+	const id = $derived(context.config.id);
+
+	const isSubMenu = $derived(context.config.isSubMenu);
+
+	const openOnHover = $derived(context.config.openOnHover);
+
+	const openingDelay = $derived(context.config.openingDelay);
 
 	const { close } = context.methods;
 
@@ -56,16 +64,19 @@
 
 	let element: HTMLElement | null = $state(null);
 
-	const debounced = useDebounce((e: MouseEvent) => {
-		// Where the mouse is moving to
-		const to = e.relatedTarget as HTMLElement | null;
-		const isPopover = to?.id === `fs-menu-popover-${id}` || to?.closest(`#fs-menu-popover-${id}`);
-		const isTrigger =
-			to?.id === `fs-${isSubMenu ? 'submenu' : 'menu'}-trigger-${id}` ||
-			to?.closest(`#fs-${isSubMenu ? 'submenu' : 'menu'}-trigger-${id}`);
+	const debounced = useDebounce(
+		(e: MouseEvent) => {
+			// Where the mouse is moving to
+			const to = e.relatedTarget as HTMLElement | null;
+			const isPopover = to?.id === `fs-menu-popover-${id}` || to?.closest(`#fs-menu-popover-${id}`);
+			const isTrigger =
+				to?.id === `fs-${isSubMenu ? 'submenu' : 'menu'}-trigger-${id}` ||
+				to?.closest(`#fs-${isSubMenu ? 'submenu' : 'menu'}-trigger-${id}`);
 
-		if (to && !isPopover && !isTrigger && !_state.locked) close(e);
-	}, openingDelay || 0);
+			if (to && !isPopover && !isTrigger && !_state.locked) close(e);
+		},
+		() => openingDelay || 0
+	);
 
 	$effect.pre(() => {
 		duration = getCSSDuration('--fs-normal-duration') || 333;

package/dist/components/menu/menu-trigger.svelte

@@ -19,20 +19,33 @@
 
 	const { toggle, open, close } = context.methods;
 
-	const { id, isSubMenu, openOnHover, openingDelay, parentHasCheckmarks, parentHasIcons } = context.config;
+	const id = $derived(context.config.id);
+
+	const isSubMenu = $derived(context.config.isSubMenu);
+
+	const openOnHover = $derived(context.config.openOnHover);
+
+	const openingDelay = $derived(context.config.openingDelay);
+
+	const parentHasCheckmarks = $derived(context.config.parentHasCheckmarks);
+
+	const parentHasIcons = $derived(context.config.parentHasIcons);
 
 	const paddingLeft = $derived(1.25 * (+!!(parentHasIcons && !Icon) + +!!parentHasCheckmarks) + 0.9);
 
-	const debounced = useDebounce((e: MouseEvent) => {
-		if (e.type === 'mouseover' && !_state.open) {
-			return open(e);
-		}
+	const debounced = useDebounce(
+		(e: MouseEvent) => {
+			if (e.type === 'mouseover' && !_state.open) {
+				return open(e);
+			}
 
-		// Where the mouse is moving to
-		const to = e.relatedTarget as HTMLElement | null;
+			// Where the mouse is moving to
+			const to = e.relatedTarget as HTMLElement | null;
 
-		if (to && !to.closest(`#fs-menu-popover-${id}`) && to.parentElement !== _state.ref && !_state.locked) close(e);
-	}, openingDelay || 0);
+			if (to && !to.closest(`#fs-menu-popover-${id}`) && to.parentElement !== _state.ref && !_state.locked) close(e);
+		},
+		() => openingDelay || 0
+	);
 
 	onMount(() => {
 		const off = on(document, 'click', async (e: MouseEvent) => {