@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/sidebarshortcuts/README.md

@@ -0,0 +1,23 @@
+# `m-sidebar-shortcuts`
+
+SidebarShortcuts is a component that displays a list of sidebar shortcut items. It supports stacked or grid layouts, shows a floating overlay when the sidebar is collapsed, and allows custom shortcut items via slots.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id` | Identifier used for listbox controlling. | `string` | `crypto.randomUUID()` |
+| `stacked` | Determines the layout of the sidebar shortcuts. When true, the shortcuts are displayed in a vertical stacked list. When false or not provided, the shortcuts are arranged in a grid layout. | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Slot for sidebar shortcut items. Should contain one or more `MSidebarShortcutItem` components. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:stacked` |  | `CustomEvent` |
+

package/dist/components/sidebarshortcuts/SidebarShortcuts.js

@@ -0,0 +1,18 @@
+import{o as M,c as N,e as O,a as P,p as U,B as Q,i as a,v as p,y as R,x as W,b as w,d as Y,m as j,h as i,r as o,q as v,t as F,j as Z,l as $,s as ee,C as n,u as B,f as q}from"../../custom-element.js";import{i as te}from"../../if.js";import{s as C}from"../../slot.js";import{c as K,s as g}from"../../attributes.js";import{b as k}from"../../this.js";import{V as re}from"../../Condition20.js";import{u as se}from"../../floating-item.svelte.js";import{g as V}from"../../sidebar-state.svelte.js";import"../../branches.js";import"../../media-query.js";var ae=q('<section><nav aria-label="shortcut items"><ul role="menu"><!></ul></nav></section>'),ie=q('<div class="mc-sidebar__shortcut-wrapper svelte-17ny4fr"><button class="mc-sidebar__shortcut-item mc-sidebar__trigger svelte-17ny4fr" aria-label="Sidebar shortcuts" aria-haspopup="menu"><!></button> <div tabindex="0" role="menu" class="mc-sidebar__floating-item mc-sidebar__floating-item--hidden svelte-17ny4fr"><div class="mc-sidebar__listbox svelte-17ny4fr"><ul class="mc-sidebar__shortcut-list mc-sidebar__shortcut-list--floating mc-sidebar__shortcut-list mc-sidebar__shortcut-list--stacked svelte-17ny4fr"><!></ul></div></div></div>');const oe={hash:"svelte-17ny4fr",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__floating-item.svelte-17ny4fr {position:absolute;padding-left:1.25rem;left:3rem;}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__floating-item--hidden.svelte-17ny4fr {visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none;}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__listbox.svelte-17ny4fr {min-width:18.75rem;border-radius:var(--border-radius-m, 0.5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:0.25rem;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));}.mc-sidebar__shortcut-wrapper.svelte-17ny4fr {width:100%;display:grid;justify-content:center;position:relative;}.mc-sidebar__shortcut-list.svelte-17ny4fr {display:flex;margin:0;}.mc-sidebar__shortcut-list--grid.svelte-17ny4fr {padding:0;gap:0.5rem;align-items:center;}.mc-sidebar__shortcut-list--stacked.svelte-17ny4fr {gap:0.25rem;flex-direction:column;padding:0;}.mc-sidebar__shortcut-list--stacked.svelte-17ny4fr:not(.mc-sidebar__shortcut-list--floating) {padding:0 0 0.5rem 1rem;margin-bottom:0.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc);}.mc-sidebar__shortcut-item.svelte-17ny4fr {cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, 0.5rem);overflow:hidden;}.mc-sidebar__shortcut-item.svelte-17ny4fr:hover {background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));}.mc-sidebar__shortcut-item.svelte-17ny4fr:nth-child(n+5) {display:none;}.mc-sidebar__shortcut-item.svelte-17ny4fr:is(.mc-sidebar__trigger:where(.svelte-17ny4fr)) {width:3rem;height:3rem;justify-content:center;border:none;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item.svelte-17ny4fr:is(.mc-sidebar__trigger:where(.svelte-17ny4fr)):hover {background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}`};function de(I,l){O(l,!0),P(I,oe);let c=U(l,"id",23,()=>crypto.randomUUID()),m=U(l,"stacked",7),y=p(null);Q(()=>{(a(h)?a(y):a(_))?.dispatchEvent(new CustomEvent("update:stacked",{detail:m(),bubbles:!0,composed:!0}))});let _=p(null),x=p(null);const{floatingItemIsDisplayed:G,hideFloatingItem:f,showFloatingItem:S,onTriggerKeydown:L,onListboxKeydown:T}=se(()=>a(_),()=>a(x));let h=p(!1);var X={get id(){return c()},set id(t=crypto.randomUUID()){c(t),j()},get stacked(){return m()},set stacked(t){m(t),j()}},E=R(),z=W(E);{var A=t=>{var r=ae(),e=i(r),u=i(e),s=i(u);C(s,l,"default",{},null),o(u),o(e),o(r),K(r,()=>V({setExpanded:d=>v(h,d,!0)})),k(r,d=>v(y,d),()=>a(y)),F(()=>Z(u,1,$({"mc-sidebar__shortcut-list":!0,"mc-sidebar__shortcut-list--stacked":m(),"mc-sidebar__shortcut-list--grid":!m()}),"svelte-17ny4fr")),w(t,r)},H=t=>{var r=ie(),e=i(r),u=i(e);re(u,{}),o(e),k(e,b=>v(_,b),()=>a(_));var s=ee(e,2),d=i(s),D=i(d),J=i(D);C(J,l,"default",{},null),o(D),o(d),o(s),k(s,b=>v(x,b),()=>a(x)),o(r),K(r,()=>V({setExpanded:b=>v(h,b,!0)})),F(()=>{g(e,"id",`trigger-${c()}`),g(e,"aria-expanded",G),g(e,"aria-controls",`listbox-${c()}`),g(s,"id",`listbox-${c()}`)}),n("mouseenter",e,S),n("focus",e,S),B("keydown",e,L),n("mouseleave",e,f),n("blur",e,f),B("keydown",s,T),n("mouseleave",s,f),n("blur",s,f),w(t,r)};te(z,t=>{a(h)?t(A):t(H,-1)})}return w(I,E),Y(X)}M(["keydown"]);customElements.define("m-sidebar-shortcuts",N(de,{stacked:{attribute:"stacked",reflect:!0,type:"Boolean"},id:{}},["default"],[],{mode:"open"}));
+//# sourceMappingURL=SidebarShortcuts.js.map

package/dist/components/sidebarshortcuts/SidebarShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarShortcuts.js","sources":["../../../src/components/sidebarshortcuts/SidebarShortcuts.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-sidebar-shortcuts',\n    props: {\n      stacked: { reflect: true, type: 'Boolean', attribute: 'stacked' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ViewGridX424 } from '@mozaic-ds/icons-svelte';\n  import { useFloatingItem } from '../sidebar/floating-item.svelte';\n  import { getSidebarState } from '../sidebar/sidebar-state.svelte';\n\n  /**\n   * SidebarShortcuts is a component that displays a list of sidebar shortcut items. It supports stacked or grid layouts, shows a floating overlay when the sidebar is collapsed, and allows custom shortcut items via slots.\n   */\n\n  interface Props {\n    /**\n     * Identifier used for listbox controlling.\n     */\n    id?: string;\n    /**\n     * Determines the layout of the sidebar shortcuts. When true, the shortcuts are displayed in a vertical stacked list. When false or not provided, the shortcuts are arranged in a grid layout.\n     * @slot default - Slot for sidebar shortcut items. Should contain one or more `MSidebarShortcutItem` components.\n     */\n    stacked?: boolean;\n  }\n\n  let { id = crypto.randomUUID(), stacked }: Props = $props();\n\n  let element: HTMLElement | null = $state(null);\n\n  $effect(() => {\n    const el = expanded ? element : trigger;\n\n    el?.dispatchEvent(\n      new CustomEvent('update:stacked', {\n        detail: stacked,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  });\n\n  let trigger: HTMLElement | null = $state(null);\n  let listbox: HTMLElement | null = $state(null);\n\n  const {\n    floatingItemIsDisplayed,\n    hideFloatingItem,\n    showFloatingItem,\n    onTriggerKeydown,\n    onListboxKeydown,\n  } = useFloatingItem(\n    () => trigger,\n    () => listbox,\n  );\n\n  let expanded = $state(false);\n</script>\n\n{#if expanded}\n  <section\n    {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}\n    bind:this={element}\n  >\n    <nav aria-label=\"shortcut items\">\n      <ul\n        class={{\n          'mc-sidebar__shortcut-list': true,\n          'mc-sidebar__shortcut-list--stacked': stacked,\n          'mc-sidebar__shortcut-list--grid': !stacked,\n        }}\n        role=\"menu\"\n      >\n        <slot />\n      </ul>\n    </nav>\n  </section>\n{:else}\n  <div\n    {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}\n    class=\"mc-sidebar__shortcut-wrapper\"\n  >\n    <button\n      bind:this={trigger}\n      id={`trigger-${id}`}\n      class=\"mc-sidebar__shortcut-item mc-sidebar__trigger\"\n      aria-label=\"Sidebar shortcuts\"\n      aria-haspopup=\"menu\"\n      aria-expanded={floatingItemIsDisplayed}\n      aria-controls={`listbox-${id}`}\n      onmouseenter={showFloatingItem}\n      onfocus={showFloatingItem}\n      onkeydown={onTriggerKeydown}\n      onmouseleave={hideFloatingItem}\n      onblur={hideFloatingItem}\n    >\n      <ViewGridX424 />\n    </button>\n\n    <div\n      bind:this={listbox}\n      id={`listbox-${id}`}\n      tabindex=\"0\"\n      role=\"menu\"\n      class=\"mc-sidebar__floating-item mc-sidebar__floating-item--hidden\"\n      onkeydown={onListboxKeydown}\n      onmouseleave={hideFloatingItem}\n      onblur={hideFloatingItem}\n    >\n      <div class=\"mc-sidebar__listbox\">\n        <ul\n          class=\"mc-sidebar__shortcut-list mc-sidebar__shortcut-list--floating mc-sidebar__shortcut-list mc-sidebar__shortcut-list--stacked\"\n        >\n          <slot />\n        </ul>\n      </div>\n    </div>\n  </div>\n{/if}\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n</style>\n"],"names":["id","$.prop","$$props","stacked","element","$.state","$.user_effect","$.get","expanded","trigger","listbox","floatingItemIsDisplayed","hideFloatingItem","showFloatingItem","onTriggerKeydown","onListboxKeydown","useFloatingItem","$$value","section","root_1","nav","$.child","ul","node_1","$.reset","getSidebarState","value","$.set","$.append","$$anchor","div","root_2","button","node_2","ViewGridX424","div_1","$.sibling","div_2","ul_1","node_3","$.set_attribute","$.event","$.delegated","$$render","consequent","alternate"],"mappings":";;;;;;;;;;;;;;;;yxDASA,qBAqBQA,EAAEC,EAAAC,EAAA,KAAA,GAAA,IAAG,OAAO,YAAU,EAAIC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAEnCE,EAA8BC,EAAO,IAAI,EAE7CC,EAAO,IAAO,EACJC,EAAGC,CAAQ,EAAAD,EAAGH,CAAO,IAAGK,CAAO,IAEnC,cAAa,IACX,YAAY,iBAAgB,CAC9B,OAAQN,EAAO,EACf,QAAS,GACT,SAAU,EAAI,CAAA,CAAA,CAGpB,CAAC,MAEGM,EAA8BJ,EAAO,IAAI,EACzCK,EAA8BL,EAAO,IAAI,QAG3C,wBAAAM,EACA,iBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,iBAAAC,GACEC,GAAe,IAAAT,EACXE,CAAO,EAAA,IAAAF,EACPG,CAAO,CAAA,MAGXF,EAAWH,EAAO,EAAK,8BA9BhB,IAAA,GAAAY,EAAA,OAAO,WAAU,EAAA,uFAkC3B,IAAAC,EAAAC,GAAA,EAIEC,EAAGC,EAJLH,CAAA,EAKII,EAAAD,EADFD,CAAG,EACDG,EAAAF,EAAAC,CAAA,2BAAAE,EAAAF,CAAA,IADFF,CAAG,EAJLI,EAAAN,CAAA,IAAAA,EAAA,IACUO,GAAkB,YAAcC,GAAKC,EAAMnB,EAAWkB,EAAK,EAAA,CAAA,CAAA,CAAA,IADrER,EAAAD,GAAAU,EAEYvB,WAAAA,CAAO,CAAA,UAGfkB,OAEG,4BAA6B,GAC7B,qCAAsCnB,EAAO,EAC7C,mCAAoCA,EAAO,uBATlDyB,EAAAC,EAAAX,CAAA,SAkBA,IAAAY,EAAAC,GAAA,EAIEC,EAAAX,EAJFS,CAAA,EAIEG,EAAAZ,EAAAW,CAAA,EAcEE,GAAYD,EAAA,EAAA,EAddT,EAAAQ,CAAA,IAAAA,EAAAf,GAAAU,EACYlB,WAAAA,CAAO,CAAA,MAgBnB0B,EAAAC,GAjBAJ,EAAA,CAAA,EA2BEK,EAAGhB,EAVLc,CAAA,EAWIG,EAAAjB,EADFgB,CAAG,EACDE,EAAAlB,EAAAiB,CAAA,2BAAAd,EAAAc,CAAA,IADFD,CAAG,EAVLb,EAAAW,CAAA,IAAAA,EAAAlB,GAAAU,EACYjB,WAAAA,CAAO,CAAA,EAtBrBc,EAAAM,CAAA,IAAAA,EAAA,IACUL,GAAkB,YAAcC,GAAKC,EAAMnB,EAAWkB,EAAK,EAAA,CAAA,CAAA,CAAA,SAGnEc,EAAAR,EAAA,KAAA,WAEgBhC,EAAE,CAAA,EAAA,EAFlBwC,EAAAR,EAAA,gBAMgBrB,CAAuB,EANvC6B,EAAAR,EAAA,gBAAA,WAO2BhC,EAAE,CAAA,EAAA,EAU7BwC,EAAAL,EAAA,KAAA,WAEgBnC,EAAE,CAAA,EAAA,IAnBlByC,EAAA,aAAAT,EAQenB,CAAgB,EAR/B4B,EAAA,QAAAT,EASUnB,CAAgB,EAT1B6B,EAAA,UAAAV,EAUYlB,CAAgB,EAV5B2B,EAAA,aAAAT,EAWepB,CAAgB,EAX/B6B,EAAA,OAAAT,EAYSpB,CAAgB,EAKzB8B,EAAA,UAAAP,EAMYpB,CAAgB,EAN5B0B,EAAA,aAAAN,EAOevB,CAAgB,EAP/B6B,EAAA,OAAAN,EAQSvB,CAAgB,EA7B3BgB,EAAAC,EAAAC,CAAA,cAnBEtB,CAAQ,EAAAmC,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,sBAFL"}

package/dist/components/sidebarshortcuts/SidebarShortcuts.spec.js

@@ -0,0 +1,82 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { vi, describe, it, beforeEach, expect } from 'vitest';
+import SidebarShortcuts from './SidebarShortcuts.svelte';
+const showMock = vi.fn();
+const hideMock = vi.fn();
+const triggerKeydownMock = vi.fn();
+const listboxKeydownMock = vi.fn();
+vi.mock('../sidebar/floating-item.svelte', async () => {
+    return {
+        useFloatingItem: vi.fn(() => ({
+            floatingItemIsDisplayed: false,
+            showFloatingItem: showMock,
+            hideFloatingItem: hideMock,
+            onTriggerKeydown: triggerKeydownMock,
+            onListboxKeydown: listboxKeydownMock,
+        })),
+    };
+});
+describe('SidebarShortcuts', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+    });
+    it('renders the trigger button in collapsed mode', async () => {
+        const { container } = render(SidebarShortcuts, { props: { stacked: false } });
+        const button = container.querySelector('button.mc-sidebar__trigger');
+        expect(button).toBeTruthy();
+        expect(button?.getAttribute('aria-haspopup')).toBe('menu');
+        expect(button?.getAttribute('aria-expanded')).toBe('false');
+        const icon = button?.querySelector('svg');
+        expect(icon).toBeTruthy();
+    });
+    it('renders the floating listbox in collapsed mode', async () => {
+        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
+        const listbox = container.querySelector('.mc-sidebar__floating-item');
+        expect(listbox).toBeTruthy();
+        expect(listbox?.classList.contains('mc-sidebar__floating-item--hidden')).toBe(true);
+    });
+    it('calls showFloatingItem and hideFloatingItem on trigger mouse events', async () => {
+        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
+        const button = container.querySelector('button.mc-sidebar__trigger');
+        await fireEvent.mouseEnter(button);
+        expect(showMock).toHaveBeenCalled();
+        await fireEvent.mouseLeave(button);
+        expect(hideMock).toHaveBeenCalled();
+    });
+    it('calls onTriggerKeydown when a key is pressed on trigger', async () => {
+        const { container } = render(SidebarShortcuts, { props: { stacked: false } });
+        const button = container.querySelector('button.mc-sidebar__trigger');
+        await fireEvent.keyDown(button, { key: 'Enter' });
+        expect(triggerKeydownMock).toHaveBeenCalled();
+    });
+    it('calls showFloatingItem and hideFloatingItem on trigger focus/blur', async () => {
+        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
+        const button = container.querySelector('button.mc-sidebar__trigger');
+        await fireEvent.focus(button);
+        expect(showMock).toHaveBeenCalled();
+        await fireEvent.blur(button);
+        expect(hideMock).toHaveBeenCalled();
+    });
+    it('calls onListboxKeydown when a key is pressed on listbox', async () => {
+        const { container } = render(SidebarShortcuts, { props: { stacked: false } });
+        const listbox = container.querySelector('.mc-sidebar__floating-item');
+        await fireEvent.keyDown(listbox, { key: 'ArrowDown' });
+        expect(listboxKeydownMock).toHaveBeenCalled();
+    });
+    it('calls hideFloatingItem when listbox blur or mouseleave', async () => {
+        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
+        const listbox = container.querySelector('.mc-sidebar__floating-item');
+        await fireEvent.blur(listbox);
+        expect(hideMock).toHaveBeenCalled();
+        await fireEvent.mouseLeave(listbox);
+        expect(hideMock).toHaveBeenCalledTimes(2);
+    });
+    it('displays a section when expanded is true', async () => {
+        const sidebar = document.createElement('m-sidebar');
+        sidebar.setAttribute('expanded', '');
+        document.body.appendChild(sidebar);
+        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
+        const section = container.querySelector('section');
+        expect(section).toBeTruthy();
+    });
+});