@mozaic-ds/web-components 1.6.0 → 1.7.0

package/dist/components/combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/combobox/Combobox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-combobox',\n    props: {\n      multiple: { reflect: true, type: 'Boolean', attribute: 'multiple' },\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      invalid: { reflect: true, type: 'Boolean', attribute: 'invalid' },\n      clearable: { reflect: true, type: 'Boolean', attribute: 'clearable' },\n      search: { reflect: true, type: 'Boolean', attribute: 'search' },\n      actions: { reflect: true, type: 'Boolean', attribute: 'actions' },\n      checkablesections: { reflect: true, type: 'Boolean', attribute: 'checkablesections' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n  import OptionListbox, { type ListboxOption } from '../optionlistbox/OptionListbox.svelte';\n  import { ChevronDown24, CrossCircleFilled24 } from '@mozaic-ds/icons-svelte';\n\n  /**\n   * A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.\n   * @slot optionPrefix - Use this slot to add a prefix to options.\n   * @event update:open {CustomEvent<boolean>} - Emitted when the listbox is opened or closed.\n   */\n  interface Props {\n    /**\n     * The current selected value(s) of the combobox.\n     */\n    value: string | number | null | (string | number)[];\n    /**\n     * Enable multiple value mode.\n     */\n    multiple?: boolean;\n    /**\n     * Size of the combobox: small ('s') or medium ('m').\n     */\n    size?: 's' | 'm';\n    /**\n     * Disable the combobox input.\n     */\n    disabled?: boolean;\n    /**\n     * Make the combobox read-only.\n     */\n    readonly?: boolean;\n    /**\n     * Mark the combobox as invalid.\n     */\n    invalid?: boolean;\n    /**\n     * Show a clear value button.\n     */\n    clearable?: boolean;\n    /**\n     * Enable the search input inside the listbox.\n     */\n    search?: boolean;\n    /**\n     * Show select all / clear buttons when multiple.\n     */\n    actions?: boolean;\n    /**\n     * Enable checkable section headers in the listbox.\n     */\n    checkablesections?: boolean;\n    /**\n     * Placeholder text when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Label for the selected items counter.\n     */\n    counterlabel?: string;\n    /**\n     * Placeholder text for the search input.\n     */\n    searchplaceholder?: string;\n    /**\n     * Label for the \"Select all\" button.\n     */\n    selectlabel?: string;\n    /**\n     * Label for the \"Clear value\" button.\n     */\n    clearlabel?: string;\n    /**\n     * Array of options to display in the listbox.\n     */\n    options: Array<ListboxOption>;\n    /**\n     * Callback to trigger when the listbox is opened or closed.\n     */\n    onopen?: (value: boolean) => void;\n  }\n\n  let {\n    value = $bindable(),\n    multiple,\n    size = 'm',\n    disabled,\n    readonly,\n    invalid,\n    clearable,\n    search,\n    actions,\n    checkablesections,\n    placeholder = 'Select an option',\n    counterlabel = '99 selected',\n    searchplaceholder = 'Find an option...',\n    selectlabel = 'Select all',\n    clearlabel = 'Clear',\n    options,\n    onopen,\n  }: Props = $props();\n\n  const id = crypto.randomUUID();\n\n  let combobox: HTMLElement;\n  let listbox: InstanceType<typeof OptionListbox> | null = $state(null);\n  let listboxEl: HTMLElement | null | undefined = $state(null);\n  let comboboxControl: HTMLElement;\n\n  let isOpen = $state(false);\n\n  let activeIndex = $state(-1);\n\n  const activeDescendantId = $derived.by(() => {\n    return activeIndex >= 0 ? `option-${id}-${activeIndex}` : undefined;\n  });\n\n  const selectionLabel = $derived.by(() => {\n    if (Array.isArray(value)) {\n      if (!value.length) return placeholder;\n      return (value as (string | number)[]).join(', ');\n    }\n\n    return options.find((option) => option.value === value)?.label || placeholder;\n  });\n\n  const hasValue = $derived.by(() =>\n    multiple ? !!(value as (string | number)[]).length : !!value,\n  );\n\n  function handleClickOutside(event: MouseEvent) {\n    const path = event.composedPath ? event.composedPath() : [];\n    if (!path.includes(combobox) && !path.includes(listboxEl!)) {\n      close();\n    }\n  }\n\n  function open() {\n    isOpen = true;\n    handleOpen();\n    document.addEventListener('click', handleClickOutside);\n  }\n\n  function close() {\n    isOpen = false;\n    handleOpen();\n    document.removeEventListener('click', handleClickOutside);\n  }\n\n  function toggleListbox() {\n    return isOpen ? close() : open();\n  }\n\n  function handleOpen() {\n    onopen?.(isOpen);\n\n    combobox.dispatchEvent(new CustomEvent('update:open', { bubbles: true, composed: true }));\n  }\n\n  onDestroy(() => {\n    document.removeEventListener('click', handleClickOutside);\n  });\n</script>\n\n<div\n  bind:this={combobox}\n  class={{\n    'mc-combobox': true,\n    'mc-combobox--open': isOpen,\n    'mc-combobox--multiple': multiple,\n    'mc-combobox--invalid': invalid,\n    'mc-combobox--s': size === 's',\n    'mc-combobox--disabled': disabled,\n    'mc-combobox--readonly': readonly,\n  }}\n>\n  <div class=\"mc-combobox__input\">\n    <button\n      bind:this={comboboxControl}\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      aria-controls={`listbox-${id}`}\n      {disabled}\n      class=\"mc-combobox__control\"\n      aria-label=\"Combobox input\"\n      onclick={toggleListbox}\n      {...search\n        ? {}\n        : {\n            role: 'combobox',\n            'aria-activedescendant': activeDescendantId,\n            onkeydown: listbox?.handleKeydown,\n          }}\n    >\n      {selectionLabel}\n    </button>\n    {#if multiple}\n      <span class=\"mc-combobox__counter\">\n        {counterlabel}\n      </span>\n    {/if}\n\n    {#if clearable && hasValue}\n      <button\n        type=\"button\"\n        class=\"mc-combobox__clear\"\n        aria-label=\"Clear value\"\n        onclick={() => listbox?.clearSelection()}\n      >\n        <CrossCircleFilled24 />\n      </button>\n    {/if}\n\n    <button\n      type=\"button\"\n      tabindex={-1}\n      class=\"mc-combobox__icon\"\n      aria-label=\"Expand options list\"\n      onclick={toggleListbox}\n    >\n      <ChevronDown24 />\n    </button>\n  </div>\n\n  <div class=\"mc-combobox__listbox\">\n    <OptionListbox\n      bind:this={listbox}\n      bind:element={listboxEl}\n      bind:value\n      {id}\n      open={isOpen}\n      {multiple}\n      {search}\n      {actions}\n      {checkablesections}\n      {searchplaceholder}\n      {selectlabel}\n      {clearlabel}\n      {options}\n      activeindex={activeIndex}\n      onopen={open}\n      onclose={() => {\n        close();\n        comboboxControl?.focus();\n      }}\n    >\n      <slot name=\"optionPrefix\" slot=\"optionPrefix\" />\n    </OptionListbox>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/combobox';\n</style>\n"],"names":["value","$.prop","$$props","multiple","size","disabled","readonly","invalid","clearable","search","actions","checkablesections","placeholder","counterlabel","searchplaceholder","selectlabel","clearlabel","options","onopen","id","combobox","listbox","$.state","listboxEl","comboboxControl","isOpen","activeIndex","activeDescendantId","$.derived","$.get","selectionLabel","option","hasValue","handleClickOutside","event","path","close","open","$.set","handleOpen","toggleListbox","onDestroy","div","root","div_1","$.child","button","text","$.reset","$$value","node","$.sibling","span","root_1","$$render","consequent","button_1","root_2","node_2","CrossCircleFilled24","$.append","$$anchor","consequent_1","button_2","node_1","$.set_attribute","node_3","ChevronDown24","div_2","OptionListbox","node_4","$.delegated"],"mappings":"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"}

package/dist/components/combobox/Combobox.spec.js

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, fireEvent, screen, cleanup } from '@testing-library/svelte';
+import Combobox from './Combobox.svelte';
+const mockOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+];
+const getControl = () => screen.getByRole('combobox', { name: /combobox input/i });
+const getControlAsButton = () => screen.getByRole('button', { name: /combobox input/i });
+describe('Combobox', () => {
+    afterEach(() => {
+        cleanup();
+        vi.restoreAllMocks();
+    });
+    describe('Rendering', () => {
+        it('renders the combobox control element', () => {
+            render(Combobox, { props: { value: null, options: mockOptions } });
+            expect(getControl()).toBeTruthy();
+        });
+        it('shows placeholder when no value', () => {
+            render(Combobox, {
+                props: { value: null, options: mockOptions, placeholder: 'Pick something' },
+            });
+            expect(screen.getByText('Pick something')).toBeTruthy();
+        });
+        it('shows counterlabel in multiple mode (non-compact)', () => {
+            render(Combobox, {
+                props: {
+                    value: ['apple', 'banana'],
+                    options: mockOptions,
+                    multiple: true,
+                    counterlabel: '2 selected',
+                },
+            });
+            expect(screen.getByText('2 selected')).toBeTruthy();
+        });
+        it('shows joined values as label in multiple+compact mode', () => {
+            render(Combobox, {
+                props: {
+                    value: ['apple', 'banana'],
+                    options: mockOptions,
+                    multiple: true,
+                    compact: true,
+                },
+            });
+            expect(screen.getByText('apple, banana')).toBeTruthy();
+        });
+        it('does not render removable tags in compact mode', () => {
+            render(Combobox, {
+                props: { value: ['apple'], options: mockOptions, multiple: true, compact: true },
+            });
+            expect(screen.queryByLabelText(/remove/i)).toBeNull();
+        });
+        it('renders as a native button (no role override) when search prop is true', () => {
+            render(Combobox, { props: { value: null, options: mockOptions, search: true } });
+            expect(getControlAsButton()).toBeTruthy();
+        });
+    });
+    describe('CSS modifier classes', () => {
+        it('applies mc-combobox--multiple when multiple', () => {
+            const { container } = render(Combobox, {
+                props: { value: [], options: mockOptions, multiple: true },
+            });
+            expect(container.querySelector('.mc-combobox--multiple')).toBeTruthy();
+        });
+        it('applies mc-combobox--invalid when invalid', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, invalid: true },
+            });
+            expect(container.querySelector('.mc-combobox--invalid')).toBeTruthy();
+        });
+        it('applies mc-combobox--disabled when disabled', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, disabled: true },
+            });
+            expect(container.querySelector('.mc-combobox--disabled')).toBeTruthy();
+        });
+        it('applies mc-combobox--readonly when readonly', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, readonly: true },
+            });
+            expect(container.querySelector('.mc-combobox--readonly')).toBeTruthy();
+        });
+        it('applies mc-combobox--s for size s', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, size: 's' },
+            });
+            expect(container.querySelector('.mc-combobox--s')).toBeTruthy();
+        });
+        it('does NOT apply mc-combobox--s for size m', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, size: 'm' },
+            });
+            expect(container.querySelector('.mc-combobox--s')).toBeNull();
+        });
+    });
+    describe('Open / Close behaviour', () => {
+        it('opens the listbox when the control is clicked', async () => {
+            const { container } = render(Combobox, { props: { value: null, options: mockOptions } });
+            await fireEvent.click(getControl());
+            expect(container.querySelector('.mc-combobox--open')).toBeTruthy();
+        });
+        it('closes the listbox on second click (toggle)', async () => {
+            const { container } = render(Combobox, { props: { value: null, options: mockOptions } });
+            const control = getControl();
+            await fireEvent.click(control);
+            await fireEvent.click(control);
+            expect(container.querySelector('.mc-combobox--open')).toBeNull();
+        });
+        it('opens the listbox when the chevron icon button is clicked', async () => {
+            const { container } = render(Combobox, { props: { value: null, options: mockOptions } });
+            await fireEvent.click(screen.getByRole('button', { name: /expand options list/i }));
+            expect(container.querySelector('.mc-combobox--open')).toBeTruthy();
+        });
+        it('closes the listbox on outside click', async () => {
+            const { container } = render(Combobox, { props: { value: null, options: mockOptions } });
+            await fireEvent.click(getControl());
+            expect(container.querySelector('.mc-combobox--open')).toBeTruthy();
+            await fireEvent.click(document.body);
+            expect(container.querySelector('.mc-combobox--open')).toBeNull();
+        });
+        it('sets aria-expanded=true when open', async () => {
+            render(Combobox, { props: { value: null, options: mockOptions } });
+            const control = getControl();
+            await fireEvent.click(control);
+            expect(control.getAttribute('aria-expanded')).toBe('true');
+        });
+        it('sets aria-expanded=false when closed', () => {
+            render(Combobox, { props: { value: null, options: mockOptions } });
+            expect(getControl().getAttribute('aria-expanded')).toBe('false');
+        });
+    });
+    describe('Clear button', () => {
+        it('shows clear button when clearable and a single value is selected', () => {
+            render(Combobox, {
+                props: { value: 'apple', options: mockOptions, clearable: true },
+            });
+            expect(screen.getByRole('button', { name: /clear value/i })).toBeTruthy();
+        });
+        it('does not show clear button when no value is selected', () => {
+            render(Combobox, {
+                props: { value: null, options: mockOptions, clearable: true },
+            });
+            expect(screen.queryByRole('button', { name: /clear value/i })).toBeNull();
+        });
+        it('does not show clear button when clearable is false', () => {
+            render(Combobox, {
+                props: { value: 'apple', options: mockOptions, clearable: false },
+            });
+            expect(screen.queryByRole('button', { name: /clear value/i })).toBeNull();
+        });
+        it('resets single value to null when clear button is clicked', async () => {
+            render(Combobox, {
+                props: { value: 'apple', options: mockOptions, clearable: true },
+            });
+            await fireEvent.click(screen.getByRole('button', { name: /clear value/i }));
+            expect(screen.getByText('Select an option')).toBeTruthy();
+        });
+        it('resets multiple value to [] when clear button is clicked', async () => {
+            render(Combobox, {
+                props: {
+                    value: ['apple', 'banana'],
+                    options: mockOptions,
+                    clearable: true,
+                    multiple: true,
+                },
+            });
+            await fireEvent.click(screen.getByRole('button', { name: /clear value/i }));
+            expect(screen.getByText('Select an option')).toBeTruthy();
+        });
+        it('shows clear button in multiple mode when at least one item is selected', () => {
+            render(Combobox, {
+                props: { value: ['apple'], options: mockOptions, clearable: true, multiple: true },
+            });
+            expect(screen.getByRole('button', { name: /clear value/i })).toBeTruthy();
+        });
+        it('hides clear button in multiple mode when value is empty', () => {
+            render(Combobox, {
+                props: { value: [], options: mockOptions, clearable: true, multiple: true },
+            });
+            expect(screen.queryByRole('button', { name: /clear value/i })).toBeNull();
+        });
+    });
+});

package/dist/components/combobox/Combobox.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Combobox.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Multiple: Story;
+export declare const SearchInput: Story;
+export declare const ActionButtons: Story;
+export declare const WithSections: Story;
+export declare const SelectableSections: Story;
+export declare const Clearable: Story;
+export declare const Disabled: Story;
+export declare const Readonly: Story;
+export declare const Invalid: Story;
+export declare const AdditionalInformation: Story;
+//# sourceMappingURL=Combobox.stories.d.ts.map

package/dist/components/combobox/Combobox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,mBAAmB,CAAC;AA4B3B,QAAA,MAAM,IAAI,EAAE,IAwCX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC"}

package/dist/components/combobox/Combobox.stories.js

@@ -0,0 +1,126 @@
+import { html } from 'lit';
+import './Combobox.svelte';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const defaultOptions = Array.from({ length: 12 }).map((_el, index) => {
+    return {
+        id: (index + 1).toString(),
+        label: `Option ${index + 1}`,
+        value: `option${index + 1}`,
+    };
+});
+let optionCount = 0;
+const optionsWithSections = Array.from({ length: 12 }).map((_el, index) => {
+    const isSection = index % 3 === 0;
+    if (!isSection) {
+        optionCount++;
+    }
+    return {
+        label: `${isSection ? 'Section' : 'Option'} ${isSection ? index / 3 + 1 : optionCount}`,
+        value: !isSection ? `option${optionCount}` : undefined,
+        type: isSection ? 'section' : 'option',
+    };
+});
+const meta = {
+    title: 'Form elements/Combobox',
+    component: 'm-combobox',
+    tags: ['v2'],
+    parameters: {
+        docs: {
+            story: {
+                height: '300px',
+            },
+        },
+    },
+    args: {
+        search: false,
+        actions: true,
+        value: null,
+        checkablesections: true,
+        options: defaultOptions,
+    },
+    render: (args) => html `
+    <m-combobox
+      .value="${args.value}"
+      ?multiple="${args.multiple}"
+      ?compact="${args.compact}"
+      size="${ifDefined(args.size)}"
+      ?disabled="${args.disabled}"
+      ?readonly="${args.readonly}"
+      ?invalid="${args.invalid}"
+      ?clearable="${args.clearable}"
+      ?search="${args.search}"
+      ?actions="${args.actions}"
+      ?checkablesections="${args.checkablesections}"
+      placeholder="${ifDefined(args.placeholder)}"
+      counterlabel="${ifDefined(args.counterlabel)}"
+      searchplaceholder="${ifDefined(args.searchplaceholder)}"
+      selectlabel="${ifDefined(args.selectlabel)}"
+      clearlabel="${ifDefined(args.clearlabel)}"
+      showlabel="${ifDefined(args.showlabel)}"
+      .options="${args.options}"
+    ></m-combobox>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Multiple = {
+    args: {
+        multiple: true,
+        value: [],
+    },
+};
+export const SearchInput = {
+    args: {
+        search: true,
+        value: [],
+        multiple: true,
+    },
+};
+export const ActionButtons = {
+    args: {
+        value: [],
+        multiple: true,
+        actions: true,
+    },
+};
+export const WithSections = {
+    args: {
+        options: optionsWithSections,
+    },
+};
+export const SelectableSections = {
+    args: {
+        value: [],
+        multiple: true,
+        options: optionsWithSections,
+        checkablesections: true,
+    },
+};
+export const Clearable = {
+    args: {
+        clearable: true,
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};
+export const Readonly = {
+    args: {
+        readonly: true,
+    },
+};
+export const Invalid = {
+    args: {
+        invalid: true,
+    },
+};
+export const AdditionalInformation = {
+    args: {
+        options: defaultOptions.map((option) => ({
+            ...option,
+            content: 'Additional information',
+        })),
+    },
+};