@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/select/select-listbox.svelte

@@ -0,0 +1,366 @@
+<script lang="ts" generics="T">import { Icon } from '../icon';
+import { SelectListboxLocalization } from './select-listbox-localization';
+import { autoUpdate, computePosition, flip, shift, size as floatingSize } from '@floating-ui/dom';
+import IconAdd from '@fluentui/svg-icons/icons/add_16_regular.svg?raw';
+import IconCheckboxChecked from '@fluentui/svg-icons/icons/checkbox_checked_16_filled.svg?raw';
+import IconCheckboxIndeterminate from '@fluentui/svg-icons/icons/checkbox_indeterminate_16_filled.svg?raw';
+import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_16_regular.svg?raw';
+import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
+let { triggerEl, isOpen, rows, highlight, loading = false, listboxId, matchTriggerWidth = true, selectedDisplay = 'checkmark', optionSnippet, headerSnippet, bodySnippet, hideCreateRows = false, suppressEmpty = false, on } = $props();
+const localization = new SelectListboxLocalization();
+const visibleRows = $derived(hideCreateRows ? rows.filter((r) => r.kind !== 'create') : rows);
+const hasRows = $derived(visibleRows.length > 0 || !!headerSnippet);
+const showEmpty = $derived(!hasRows && !loading && !suppressEmpty);
+let panelEl = $state.raw(undefined);
+let triggerWidth = $state(undefined);
+// Floating UI: position when open, autoUpdate on scroll/resize, cleanup on close.
+$effect(() => {
+    if (!isOpen || !triggerEl || !panelEl) {
+        return;
+    }
+    const trigger = triggerEl;
+    const panel = panelEl;
+    const update = async () => {
+        const result = await computePosition(trigger, panel, {
+            // `fixed` keeps coords viewport-relative, which lets nested popovers (e.g. a Singleselect
+            // inside Multi's create-with-parent section) compute their own position correctly. With
+            // the default `absolute` strategy, an offset parent that is itself absolutely positioned
+            // would double-offset the child popover.
+            strategy: 'fixed',
+            placement: 'bottom-start',
+            middleware: [
+                flip(),
+                shift({ padding: 8 }),
+                floatingSize({
+                    apply: ({ rects, elements }) => {
+                        triggerWidth = rects.reference.width;
+                        if (bodySnippet) {
+                            // Custom listbox body — caller decides sizing. We expose `triggerWidth` via snippet args
+                            // if the consumer wants to stretch/shrink, but we don't impose any width/min-width here.
+                            elements.floating.style.width = '';
+                            elements.floating.style.minWidth = '';
+                        }
+                        else if (matchTriggerWidth) {
+                            elements.floating.style.width = `${rects.reference.width}px`;
+                        }
+                        else {
+                            elements.floating.style.minWidth = `${rects.reference.width}px`;
+                        }
+                    }
+                })
+            ]
+        });
+        Object.assign(panel.style, {
+            position: 'fixed',
+            left: `${result.x}px`,
+            top: `${result.y}px`
+        });
+    };
+    return autoUpdate(trigger, panel, update);
+});
+// Dismiss listeners — only mounted while open.
+$effect(() => {
+    if (!isOpen) {
+        return;
+    }
+    const handleClickOutside = (e) => {
+        const target = e.target;
+        if (!target) {
+            return;
+        }
+        if (triggerEl?.contains(target) || panelEl?.contains(target)) {
+            return;
+        }
+        on.dismiss();
+    };
+    const handleKey = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            on.dismiss();
+        }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+        document.removeEventListener('keydown', handleKey);
+    };
+});
+// Scroll the highlighted row into view as the user navigates.
+$effect(() => {
+    if (!isOpen || !panelEl) {
+        return;
+    }
+    const id = `${listboxId}-row-${highlight}`;
+    const el = panelEl.querySelector(`[data-row-id="${id}"]`);
+    el?.scrollIntoView({ block: 'nearest' });
+});
+</script>
+
+{#snippet checkboxGlyph(state: 'checked' | 'indeterminate' | 'unchecked')}
+  <span class="select-listbox__row-checkbox select-listbox__row-checkbox--{state}">
+    {#if state === 'checked'}
+      <Icon src={IconCheckboxChecked} />
+    {:else if state === 'indeterminate'}
+      <Icon src={IconCheckboxIndeterminate} />
+    {:else}
+      <Icon src={IconCheckboxUnchecked} />
+    {/if}
+  </span>
+{/snippet}
+
+{#if isOpen && (hasRows || showEmpty)}
+  <div
+    bind:this={panelEl}
+    class="select-listbox select-listbox--display-{selectedDisplay}"
+    role="listbox"
+    id={listboxId}
+    tabindex="-1"
+    onclick={(e) => e.stopPropagation()}
+    onmousedown={(e) => e.stopPropagation()}
+    onkeydown={() => undefined}>
+    {#if headerSnippet}
+      <div class="select-listbox__header">{@render headerSnippet()}</div>
+    {/if}
+    {#if visibleRows.length === 0 && !headerSnippet}
+      <div class="select-listbox__empty">{localization.noMatches}</div>
+    {:else if bodySnippet}
+      {@render bodySnippet({ rows: visibleRows, highlight, triggerWidth, on: { pickRow: on.pickRow, hoverRow: on.hoverRow } })}
+    {:else}
+      {#each visibleRows as row, i (i)}
+        {@const rowId = `${listboxId}-row-${i}`}
+        {#if row.kind === 'create'}
+          <div
+            class="select-listbox__row select-listbox__row--create"
+            class:select-listbox__row--active={i === highlight}
+            role="option"
+            aria-selected="false"
+            tabindex="-1"
+            id={rowId}
+            data-row-id={rowId}
+            onclick={() => on.pickRow(row)}
+            onkeydown={() => undefined}
+            onmouseenter={() => on.hoverRow(i)}>
+            <span class="select-listbox__row-icon"><Icon src={IconAdd} /></span>
+            <span class="select-listbox__row-label">{localization.createLabel(row.query)}</span>
+          </div>
+        {:else if row.kind === 'group-header'}
+          {#if row.selectable}
+            <div
+              class="select-listbox__row select-listbox__row--group-header select-listbox__row--selectable"
+              class:select-listbox__row--active={i === highlight}
+              class:select-listbox__row--selected={row.selected}
+              role="option"
+              aria-selected={row.state === 'checked'}
+              aria-checked={row.state === 'indeterminate' ? 'mixed' : row.state === 'checked'}
+              tabindex="-1"
+              id={rowId}
+              data-row-id={rowId}
+              onclick={() => on.pickRow(row)}
+              onkeydown={() => undefined}
+              onmouseenter={() => on.hoverRow(i)}>
+              {#if selectedDisplay === 'checkbox'}
+                {@render checkboxGlyph(row.state)}
+              {/if}
+              <span class="select-listbox__row-label">{row.label}</span>
+              {#if selectedDisplay === 'checkmark' && row.state === 'checked'}
+                <span class="select-listbox__row-check"><Icon src={IconCheckmark} /></span>
+              {/if}
+            </div>
+          {:else}
+            <div class="select-listbox__row select-listbox__row--group-header" id={rowId} data-row-id={rowId}>
+              <span class="select-listbox__row-label">{row.label}</span>
+            </div>
+          {/if}
+        {:else}
+          <div
+            class="select-listbox__row select-listbox__row--option"
+            class:select-listbox__row--active={i === highlight}
+            class:select-listbox__row--selected={row.selected}
+            class:select-listbox__row--disabled={row.option.disabled}
+            class:select-listbox__row--indent={row.indent}
+            role="option"
+            aria-selected={row.selected}
+            aria-disabled={row.option.disabled ? 'true' : undefined}
+            tabindex="-1"
+            id={rowId}
+            data-row-id={rowId}
+            onclick={() => on.pickRow(row)}
+            onkeydown={() => undefined}
+            onmouseenter={() => on.hoverRow(i)}>
+            {#if selectedDisplay === 'checkbox'}
+              {@render checkboxGlyph(row.selected ? 'checked' : 'unchecked')}
+            {/if}
+            {#if optionSnippet}
+              {@render optionSnippet({ option: row.option })}
+            {:else}
+              <span class="select-listbox__row-label">{row.option.label}</span>
+            {/if}
+            {#if selectedDisplay === 'checkmark' && row.selected}
+              <span class="select-listbox__row-check"><Icon src={IconCheckmark} /></span>
+            {/if}
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+Shared popover + listbox renderer for Singleselect / SingleselectAsync (and future
+Multiselect / MultiselectAsync). Parent owns selection semantics and builds the flat
+`SelectRow[]` list; this component just positions, renders rows, and proxies pick / hover /
+dismiss events upward. Floating UI handles placement with autoUpdate on scroll/resize.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--select--panel--background` | Panel background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--select--panel--border-color` | Panel border | `var(--sc-kit--color--border)` |
+| `--sc-kit--select--panel--border-radius` | Panel radius | `var(--sc-kit--radius--md)` |
+| `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
+| `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
+| `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
+| `--sc-kit--select--option--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
+| `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
+| `--sc-kit--select--option--background--active` | Active row background | `var(--sc-kit--color--bg--hover)` |
+| `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--select--option--color--selected` | Selected row text color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--select--group-header--color` | Group header text color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--select--group-header--font-size` | Group header font size | `var(--sc-kit--font-size--xs)` |
+| `--sc-kit--select--empty--color` | Empty/loading text color | `var(--sc-kit--color--text--muted)` |
+-->
+
+<style>.select-listbox {
+  --_lb--background: var(--sc-kit--select--panel--background, var(--sc-kit--color--bg--panel));
+  --_lb--border-color: var(--sc-kit--select--panel--border-color, var(--sc-kit--color--border));
+  --_lb--border-radius: var(--sc-kit--select--panel--border-radius, var(--sc-kit--radius--md));
+  --_lb--box-shadow: var(--sc-kit--select--panel--box-shadow, var(--sc-kit--shadow--lg));
+  --_lb--max-height: var(--sc-kit--select--panel--max-height, 18rem);
+  --_lb--padding: var(--sc-kit--select--panel--padding, var(--sc-kit--space--1));
+  --_lb--row-padding-block: var(--sc-kit--select--option--padding-block, var(--sc-kit--space--2));
+  --_lb--row-padding-inline: var(--sc-kit--select--option--padding-inline, var(--sc-kit--space--3));
+  --_lb--row-background-active: var(--sc-kit--select--option--background--active, var(--sc-kit--color--bg--hover));
+  --_lb--row-color: var(--sc-kit--select--option--color, var(--sc-kit--color--text--primary));
+  --_lb--row-color-selected: var(--sc-kit--select--option--color--selected, var(--sc-kit--color--accent));
+  --_lb--group-header-color: var(--sc-kit--select--group-header--color, var(--sc-kit--color--text--muted));
+  --_lb--group-header-font-size: var(--sc-kit--select--group-header--font-size, var(--sc-kit--font-size--xs));
+  --_lb--empty-color: var(--sc-kit--select--empty--color, var(--sc-kit--color--text--muted));
+  position: absolute;
+  z-index: var(--sc-kit--z-index--popover);
+  background: var(--_lb--background);
+  border: 1px solid var(--_lb--border-color);
+  border-radius: var(--_lb--border-radius);
+  box-shadow: var(--_lb--box-shadow);
+  max-height: var(--_lb--max-height);
+  padding: var(--_lb--padding);
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.select-listbox::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.select-listbox::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.select-listbox::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .select-listbox {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.select-listbox__row {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+  width: 100%;
+  padding: var(--_lb--row-padding-block) var(--_lb--row-padding-inline);
+  border-radius: var(--sc-kit--radius--sm);
+  cursor: pointer;
+  user-select: none;
+  color: var(--_lb--row-color);
+}
+.select-listbox__row--active {
+  background: var(--_lb--row-background-active);
+}
+.select-listbox__row--selected {
+  color: var(--_lb--row-color-selected);
+}
+.select-listbox__row--disabled {
+  color: var(--sc-kit--color--text--muted);
+  cursor: default;
+}
+.select-listbox__row--indent {
+  padding-inline-start: calc(var(--_lb--row-padding-inline) + var(--sc-kit--space--3));
+}
+.select-listbox__row--create {
+  color: var(--sc-kit--color--accent);
+}
+.select-listbox__row--group-header {
+  cursor: default;
+  color: var(--_lb--group-header-color);
+  font-size: var(--_lb--group-header-font-size);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--sc-kit--letter-spacing--wide);
+}
+.select-listbox__row--group-header.select-listbox__row--selectable {
+  cursor: pointer;
+  color: var(--_lb--row-color);
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: var(--sc-kit--font-weight--semibold);
+  font-size: inherit;
+}
+.select-listbox__row-icon {
+  --sc-kit--icon--size: 1rem;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+.select-listbox__row-label {
+  flex: 1;
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.select-listbox__row-check {
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--_lb--row-color-selected);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+.select-listbox__row-checkbox {
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+.select-listbox__row-checkbox--checked, .select-listbox__row-checkbox--indeterminate {
+  --sc-kit--icon--color: var(--_lb--row-color-selected);
+}
+.select-listbox--display-highlight .select-listbox__row--selected {
+  background: var(--_lb--row-background-active);
+  color: var(--_lb--row-color);
+}
+.select-listbox__header {
+  margin-block-end: var(--sc-kit--space--1);
+}
+.select-listbox__empty {
+  padding: var(--_lb--row-padding-block) var(--_lb--row-padding-inline);
+  color: var(--_lb--empty-color);
+  font-size: var(--sc-kit--font-size--sm);
+  text-align: center;
+}</style>

package/dist/ui/select/select-listbox.svelte.d.ts

@@ -0,0 +1,93 @@
+import type { SelectOption, SelectRow } from './types';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        /** Anchor element — listbox positions itself below this. */
+        triggerEl: HTMLElement | undefined;
+        isOpen: boolean;
+        rows: SelectRow<T>[];
+        /** Index into `rows` — highlighted row gets the active background and scrolls into view. */
+        highlight: number;
+        loading?: boolean;
+        /** Stable id for aria-controls + aria-activedescendant. */
+        listboxId: string;
+        /** When true, panel width equals trigger width. @default true */
+        matchTriggerWidth?: boolean;
+        /**
+         * How rows render selected state:
+         * - `'checkmark'` (default) — ✓ on the right when selected; group headers binary.
+         * - `'checkbox'` — checkbox on the left of every row; group headers tri-state when `row.state==='indeterminate'`.
+         * - `'highlight'` — selected rows get the active background only; no glyph.
+         */
+        selectedDisplay?: "checkmark" | "checkbox" | "highlight";
+        optionSnippet?: Snippet<[{
+            option: SelectOption<T>;
+        }]>;
+        /** Optional snippet rendered ABOVE the rows list (e.g. Multi's create-with-parent section). */
+        headerSnippet?: Snippet;
+        /** When provided, replaces the entire rows iteration — consumer renders the listbox body (e.g. a grid of tiles for IconPicker). Receives the same `rows` + `highlight` + `on.pickRow/hoverRow` the default rendering uses. `triggerWidth` is the trigger's current width in px (or `undefined` before the first layout pass) — the consumer can choose to stretch/shrink to it; the listbox panel itself stays content-sized when this snippet is set. */
+        bodySnippet?: Snippet<[{
+            rows: SelectRow<T>[];
+            highlight: number;
+            triggerWidth: number | undefined;
+            on: {
+                pickRow: (row: SelectRow<T>) => void;
+                hoverRow: (index: number) => void;
+            };
+        }]>;
+        /** When true, `kind:'create'` rows are skipped (used when `headerSnippet` already renders the create UI). @default false */
+        hideCreateRows?: boolean;
+        /** When true, the panel is not rendered at all if there's nothing to show (no rows, no create, not loading) — suppresses the "No matches" empty state. Used by tag-input style hosts. @default false */
+        suppressEmpty?: boolean;
+        on: {
+            pickRow: (row: SelectRow<T>) => void;
+            hoverRow: (index: number) => void;
+            dismiss: () => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Shared popover + listbox renderer for Singleselect / SingleselectAsync (and future
+ * Multiselect / MultiselectAsync). Parent owns selection semantics and builds the flat
+ * `SelectRow[]` list; this component just positions, renders rows, and proxies pick / hover /
+ * dismiss events upward. Floating UI handles placement with autoUpdate on scroll/resize.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--select--panel--background` | Panel background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--select--panel--border-color` | Panel border | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--select--panel--border-radius` | Panel radius | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
+ * | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
+ * | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
+ * | `--sc-kit--select--option--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--select--option--background--active` | Active row background | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--select--option--color--selected` | Selected row text color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--select--group-header--color` | Group header text color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--select--group-header--font-size` | Group header font size | `var(--sc-kit--font-size--xs)` |
+ * | `--sc-kit--select--empty--color` | Empty/loading text color | `var(--sc-kit--color--text--muted)` |
+ */
+declare const SelectListbox: $$IsomorphicComponent;
+type SelectListbox<T> = InstanceType<typeof SelectListbox<T>>;
+export default SelectListbox;

package/dist/ui/select/singleselect-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class SingleselectLocalization {
+    get clearLabel(): string;
+    get loadingLabel(): string;
+}

package/dist/ui/select/singleselect-localization.js

@@ -0,0 +1,13 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    clearLabel: { en: 'Clear selection', no: 'Fjern valg' },
+    loadingLabel: { en: 'Loading…', no: 'Laster…' }
+};
+export class SingleselectLocalization {
+    get clearLabel() {
+        return loc.clearLabel[AppLocale.current];
+    }
+    get loadingLabel() {
+        return loc.loadingLabel[AppLocale.current];
+    }
+}