npm - @haiilo/catalyst - Versions diffs - 10.24.2 → 10.24.3 - Mend

@haiilo/catalyst 10.24.2 → 10.24.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/collection/components/cat-dropdown/cat-dropdown.js CHANGED Viewed

@@ -110,6 +110,7 @@ export class CatDropdown {
             return; // busy or closed
         }
         this.isOpen = null;
+        this.trap?.deactivate();
         this.content.classList.remove('show');
         // give CSS transition time to apply
         setTimeout(() => {
@@ -117,12 +118,11 @@ export class CatDropdown {
             this.content.classList.remove('show');
             this.content.style.display = '';
             this.trigger?.setAttribute('aria-expanded', 'false');
-            this.trap?.deactivate();
             this.catClose.emit();
         }, timeTransitionS);
     }
     render() {
-        return (h(Host, { key: 'c0ec9a85a4b9ea6a739507480d630c8fc8dd15f5' }, h("slot", { key: 'd696c663aeaf62869077994227b12c033c3eaa01', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'b8bb9467fda8b26fdb3d6e88aa2c6ff5c091787f', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '0a65794088d27a74621ce390f7ad21d798b6a0e5', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '41dff5ac88c5175a856f6aca5d0696899d20f848', name: "content" }))));
+        return (h(Host, { key: '3ead90dae1ac492a0cb592d7cf7a50fd42f26ca7' }, h("slot", { key: 'b91bba7772b2a90850be2ac85b82ec7691ae031d', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'f7e07ffed988133cbccafb8f8c73fdb52757d9fb', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '868a0578cd30cac249959e0961b0425e56048af9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '19fb6b5b92599ed1ae21aac591271957a6e7b060', name: "content" }))));
     }
     componentDidLoad() {
         this.initAnchor();

package/dist/collection/components/cat-dropdown/cat-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAA+B,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChH,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,KAAK,SAAS,MAAM,YAAY,CAAC;AAExC,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAEvD,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;GAGG;AAMH,MAAM,OAAO,WAAW;;QAEL,OAAE,GAAG,YAAY,EAAE,CAAC;QAO7B,WAAM,GAAmB,KAAK,CAAC;yBAKR,cAAc;2BAKvB,KAAK;+BAKmC,UAAU;wBAMrD,KAAK;wBAKL,KAAK;8BAMC,KAAK;6BAKN,KAAK;;IAa7B,YAAY,CAAC,KAA8B;QACzC,iEAAiE;QACjE,sEAAsE;QACtE,0DAA0D;QAC1D,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;QAED,6DAA6D;QAC7D,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IACE,CAAC,IAAI,CAAC,WAAW;YACjB,oDAAoD;YACpD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;YAC3B,yDAAyD;YACxD,KAAK,CAAC,MAAkB,EAAE,IAAI,KAAK,SAAS;YAC7C,uEAAuE;YACvE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAAC,EACtG,CAAC;YACD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3C,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,iEAAiE;QACjE,sEAAsE;QACtE,0DAA0D;QAC1D,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACxC,OAAO,CAAC,eAAe;QACzB,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACrC,oCAAoC;QACpC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YACpD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;gBACnB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC;gBACjD,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE;oBACtC,eAAe,EAAE;wBACf,aAAa,EAAE,IAAI;qBACpB;oBACD,iBAAiB,EAAE,IAAI;oBACvB,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC/B,CAAC,IAAI,CAAC,WAAW;wBACjB,qDAAqD;wBACrD,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;wBAC5C,0EAA0E;wBAC1E,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAAC;oBACnF,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;oBACpC,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;oBACzC,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC;oBAC3E,YAAY,EAAE,KAAK,CAAC,EAAE;wBACpB,IACE,CAAC,IAAI,CAAC,eAAe,KAAK,YAAY,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC;4BACrE,CAAC,IAAI,CAAC,eAAe,KAAK,UAAU,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,EAClE,CAAC;4BACD,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,OAAO,IAAI,CAAC;wBACd,CAAC;wBACD,OAAO,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC;oBAC7B,CAAC;oBACD,aAAa,EAAE,KAAK,CAAC,EAAE;wBACrB,IACE,CAAC,IAAI,CAAC,eAAe,KAAK,YAAY,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;4BACpE,CAAC,IAAI,CAAC,eAAe,KAAK,UAAU,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,EAChE,CAAC;4BACD,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,OAAO,IAAI,CAAC;wBACd,CAAC;wBACD,OAAO,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC;oBAC/C,CAAC;oBACD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;iBAC9D,CAAC,CAAC;YACP,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,iBAAiB;QAC3B,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACtC,oCAAoC;QACpC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACtC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YAChC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YACrD,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC,EAAE,eAAe,CAAC,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAqB,CAAC,GAAS;YACjF,6DAAM,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAqB,CAAC,GAAS;YACnF,4DACE,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EACzD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC;gBAE7C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACD,CACR,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,gBAAgB,IAAI,CAAC,EAAE,EAAE,CAAC;IACnC,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAClC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QACnD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QACpD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/D,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,OAAqC,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,CAAC;QAC3D,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YAChC,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YAC3B,OAAO,GAAG,IAAI,EAAE,YAAY,CAAC,cAAc,CAAC;gBAC1C,CAAC,CAAE,IAAoB;gBACvB,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI,SAAS,CAAC;QACzD,CAAC;QACD,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,CAAC;QACD,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;QAC1F,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,MAAM,CAAC,aAA2C;QACxD,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ;gBAC1B,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC;oBACE,IAAI,CAAC;wBACH,OAAO,EAAE,WAAW,CAAC,MAAM;wBAC3B,KAAK,CAAC,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,EAAE;4BACjD,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;gCACrC,QAAQ,EAAE,GAAG,cAAc,IAAI;gCAC/B,SAAS,EAAE,GAAG,eAAe,IAAI;6BAClC,CAAC,CAAC;wBACL,CAAC;qBACF,CAAC;iBACH,CAAC;YACN,eAAe,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE;gBAC3C,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG,MAAM,CAAC;aAC5D,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;gBAC3C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;oBAChC,IAAI,EAAE,GAAG,CAAC,IAAI;oBACd,GAAG,EAAE,GAAG,CAAC,IAAI;iBACd,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,IAAiB,EAAE,IAAY;QAClD,OAAO,IAAI,YAAY,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5QuB,kBAAM,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n/*\n A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n /\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private isOpen: boolean \| null = false;\n\n /\n The placement of the dropdown.\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Do not close the dropdown on outside clicks.\n /\n @Prop() noAutoClose = false;\n\n /\n Do not navigate focus inside the dropdown via vertical arrow keys.\n /\n @Prop() arrowNavigation: 'horizontal' \| 'vertical' \| 'none' = 'vertical';\n\n /\n Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n /\n @Prop() noResize = false;\n\n /\n Allow overflow when dropdown is open.\n /\n @Prop() overflow = false;\n\n /\n No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n /\n @Prop() noInitialFocus = false;\n\n /\n Trigger element will not receive focus when dropdown is closed.\n /\n @Prop() noReturnFocus = false;\n\n /\n Emitted when the dropdown is opened.\n /\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the dropdown is closed.\n /\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /\n Toggles the dropdown.\n /\n @Method()\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /\n Opens the dropdown.\n /\n @Method()\n async open(): Promise<void> {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n }\n\n if (this.isOpen === null \|\| this.isOpen) {\n return; // busy or open\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger \|\| elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') \|\|\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') \|\|\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => (this.noInitialFocus ? false : undefined)\n });\n this.trap.activate();\n });\n }\n\n /\n Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (!this.isOpen) {\n return; // busy or closed\n }\n\n this.isOpen = null;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.trap?.deactivate();\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.initAnchor();\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n if (!this.anchor) {\n autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n }\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() \|\| [])[0];\n if (this.anchor) {\n autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n }\n }\n\n private findTrigger() {\n let trigger: FocusableElement \| undefined;\n const elems = this.triggerSlot?.assignedElements?.() \|\| [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement \| undefined) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ];\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n/*\n A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n /\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private isOpen: boolean \| null = false;\n\n /\n The placement of the dropdown.\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Do not close the dropdown on outside clicks.\n /\n @Prop() noAutoClose = false;\n\n /\n Do not navigate focus inside the dropdown via vertical arrow keys.\n /\n @Prop() arrowNavigation: 'horizontal' \| 'vertical' \| 'none' = 'vertical';\n\n /\n Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n /\n @Prop() noResize = false;\n\n /\n Allow overflow when dropdown is open.\n /\n @Prop() overflow = false;\n\n /\n No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n /\n @Prop() noInitialFocus = false;\n\n /\n Trigger element will not receive focus when dropdown is closed.\n /\n @Prop() noReturnFocus = false;\n\n /\n Emitted when the dropdown is opened.\n /\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the dropdown is closed.\n /\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /\n Toggles the dropdown.\n /\n @Method()\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /\n Opens the dropdown.\n /\n @Method()\n async open(): Promise<void> {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n }\n\n if (this.isOpen === null \|\| this.isOpen) {\n return; // busy or open\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger \|\| elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') \|\|\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') \|\|\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => (this.noInitialFocus ? false : undefined)\n });\n this.trap.activate();\n });\n }\n\n /\n Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (!this.isOpen) {\n return; // busy or closed\n }\n\n this.isOpen = null;\n this.trap?.deactivate();\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.initAnchor();\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n if (!this.anchor) {\n autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n }\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() \|\| [])[0];\n if (this.anchor) {\n autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n }\n }\n\n private findTrigger() {\n let trigger: FocusableElement \| undefined;\n const elems = this.triggerSlot?.assignedElements?.() \|\| [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement \| undefined) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ];\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}

package/dist/components/cat-dropdown2.js CHANGED Viewed

@@ -1053,6 +1053,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             return; // busy or closed
         }
         this.isOpen = null;
+        this.trap?.deactivate();
         this.content.classList.remove('show');
         // give CSS transition time to apply
         setTimeout(() => {
@@ -1060,12 +1061,11 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             this.content.classList.remove('show');
             this.content.style.display = '';
             this.trigger?.setAttribute('aria-expanded', 'false');
-            this.trap?.deactivate();
             this.catClose.emit();
         }, timeTransitionS);
     }
     render() {
-        return (h(Host, { key: 'c0ec9a85a4b9ea6a739507480d630c8fc8dd15f5' }, h("slot", { key: 'd696c663aeaf62869077994227b12c033c3eaa01', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'b8bb9467fda8b26fdb3d6e88aa2c6ff5c091787f', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '0a65794088d27a74621ce390f7ad21d798b6a0e5', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '41dff5ac88c5175a856f6aca5d0696899d20f848', name: "content" }))));
+        return (h(Host, { key: '3ead90dae1ac492a0cb592d7cf7a50fd42f26ca7' }, h("slot", { key: 'b91bba7772b2a90850be2ac85b82ec7691ae031d', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'f7e07ffed988133cbccafb8f8c73fdb52757d9fb', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '868a0578cd30cac249959e0961b0425e56048af9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '19fb6b5b92599ed1ae21aac591271957a6e7b060', name: "content" }))));
     }
     componentDidLoad() {
         this.initAnchor();