From 34bbc11a8e9655fbe26b4dc11a17ba7b46bdd188 Mon Sep 17 00:00:00 2001 From: Florian Stancioiu Date: Wed, 10 Apr 2024 11:42:03 +0300 Subject: [PATCH 1/4] feat: update `cosmoz-dropdown` dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 68437ed5..606548b4 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ }, "dependencies": { "@lit-labs/virtualizer": "^2.0.0", - "@neovici/cosmoz-dropdown": "^4.0.0", + "@neovici/cosmoz-dropdown": "^4.4.0", "@neovici/cosmoz-input": "^4.3.3", "@neovici/cosmoz-utils": "^6.0.0", "@pionjs/pion": "^2.0.0", From 126a320af1d9ceaa346391c22a29318aa3580b8a Mon Sep 17 00:00:00 2001 From: Florian Stancioiu Date: Wed, 10 Apr 2024 11:43:33 +0300 Subject: [PATCH 2/4] feat: add `package-lock.json` file --- package-lock.json | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb7308be..649b139d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "dependencies": { "@lit-labs/virtualizer": "^2.0.0", - "@neovici/cosmoz-dropdown": "^4.0.0", + "@neovici/cosmoz-dropdown": "^4.4.0", "@neovici/cosmoz-input": "^4.3.3", "@neovici/cosmoz-utils": "^6.0.0", "@pionjs/pion": "^2.0.0", @@ -4125,13 +4125,14 @@ } }, "node_modules/@neovici/cosmoz-dropdown": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@neovici/cosmoz-dropdown/-/cosmoz-dropdown-4.0.1.tgz", - "integrity": "sha512-+fUtLUrtVmlsKzXqpCDs4M6hUjdRlaI1bCr7cH0Z38s/cR6UUlI9jiaQY/lqZswalCxH97NoHvqLSKk2I1kfQg==", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@neovici/cosmoz-dropdown/-/cosmoz-dropdown-4.4.0.tgz", + "integrity": "sha512-OV2w2mhlFQmGCufxTVlO59R9KeU/bln6iY4ml986VTaXa0OIaO8zF2JtwHNiL3KZP6pr8UTSdzMB6XEvCcauJg==", "dependencies": { - "@neovici/cosmoz-utils": "^6.0.0", - "@pionjs/pion": "^2.0.0", - "position.js": "^0.3.0" + "@neovici/cosmoz-utils": "^6.8.1", + "@pionjs/pion": "^2.5.2", + "lit-html": "^3.1.2", + "position.js": "^1.1.0" } }, "node_modules/@neovici/cosmoz-input": { @@ -21765,9 +21766,9 @@ } }, "node_modules/position.js": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/position.js/-/position.js-0.3.0.tgz", - "integrity": "sha512-dPTc3vxorMzXDViK8mTL5ShqLKGNr3pjdbbiq+6Pud1sVCD/SMuGV/UtQ/acg0gsgJHGg5RxUwtd0v2U4rXBjQ==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/position.js/-/position.js-1.1.0.tgz", + "integrity": "sha512-h/GJiK6nxrZOhmLgUYfGZhjvbpuocyL55Ggv8+k4BR/RHqmXGVIHwhYMeZh+J8HfXNLUtr2RbjOK+4LpTwV7vg==" }, "node_modules/possible-typed-array-names": { "version": "1.0.0", From f4cd4f7396b1fa31bb4b1d077da15f6676181366 Mon Sep 17 00:00:00 2001 From: Florian Stancioiu Date: Wed, 10 Apr 2024 11:45:15 +0300 Subject: [PATCH 3/4] feat: use popover for cosmoz-listbox --- src/listbox/index.ts | 28 ++++++++++++++++++++++++++-- src/listbox/style.css.ts | 10 +++++++++- 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/listbox/index.ts b/src/listbox/index.ts index 61a09f43..8cb41b0c 100644 --- a/src/listbox/index.ts +++ b/src/listbox/index.ts @@ -48,6 +48,19 @@ const Listbox = (props: Props) => { `; }; +const supportsPopover = () => { + // eslint-disable-next-line no-prototype-builtins + return HTMLElement.prototype.hasOwnProperty('popover'); +}; + +const showPopover = (popover?: Element) => { + const popoverElement = popover as HTMLElement; + + requestAnimationFrame(() => { + popoverElement?.showPopover(); + }); +}; + customElements.define( 'cosmoz-listbox', component>(Listbox, { styleSheets: [sheet(style)] }), @@ -56,11 +69,22 @@ customElements.define( export const listbox = ({ multi, ...thru -}: Props & { multi?: boolean }) => - portal( +}: Props & { multi?: boolean }) => { + if (supportsPopover()) { + return html``; + } + + return portal( html``, ); +}; diff --git a/src/listbox/style.css.ts b/src/listbox/style.css.ts index 763f355e..ce715c10 100644 --- a/src/listbox/style.css.ts +++ b/src/listbox/style.css.ts @@ -13,9 +13,17 @@ const style = css` font-family: var(--paper-font-subhead_-_font-family, initial); background: #fff; min-width: 72px; - box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), + box-shadow: + 0 3px 4px 0 rgba(0, 0, 0, 0.14), + 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4); } + :host(:popover-open) { + box-sizing: border-box; + display: block; + margin: 0; + border: 0; + } .items { position: relative; overflow-y: auto; From 21b261902899991baafcd7a8c30a9b694732b897 Mon Sep 17 00:00:00 2001 From: Florian Stancioiu Date: Wed, 10 Apr 2024 12:45:49 +0300 Subject: [PATCH 4/4] feat: make tests pass in both browsers --- test/cosmoz-autocomplete.test.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/test/cosmoz-autocomplete.test.js b/test/cosmoz-autocomplete.test.js index 34f13739..b001f6fc 100644 --- a/test/cosmoz-autocomplete.test.js +++ b/test/cosmoz-autocomplete.test.js @@ -108,7 +108,12 @@ describe('cosmoz-autocomplete', () => { el.shadowRoot.querySelector('cosmoz-input').focus(); await nextFrame(); await nextFrame(); - document.body.querySelector('cosmoz-listbox').onSelect(source[1]); + + const cosmozListboxElement = + document.body.querySelector('cosmoz-listbox') ?? + el.shadowRoot.querySelector('cosmoz-listbox'); + + cosmozListboxElement.onSelect(source[1]); expect(onChange).to.have.been.calledOnceWith([source[0], source[1]]); }); @@ -133,7 +138,7 @@ describe('cosmoz-autocomplete', () => { }); it('focus', async () => { - await fixture(html` + const el = await fixture(html` { document.body.querySelector('cosmoz-autocomplete').focus(); await nextFrame(); - expect(document.body.querySelector('cosmoz-listbox')).to.be.ok; + const cosmozListboxElement = + document.body.querySelector('cosmoz-listbox') ?? + el.shadowRoot.querySelector('cosmoz-listbox'); + + expect(cosmozListboxElement).to.be.ok; }); });