diff --git a/packages/atomic/src/components/common/facets/facet-common.spec.ts b/packages/atomic/src/components/common/facets/facet-common.spec.ts index d483816a8a5..c2508a97028 100644 --- a/packages/atomic/src/components/common/facets/facet-common.spec.ts +++ b/packages/atomic/src/components/common/facets/facet-common.spec.ts @@ -156,6 +156,64 @@ describe('facet-common', () => { expect(result).toContain(facet2); expect(result).not.toContain(notFacet); }); + + it('should return facets nested within atomic-popover elements', () => { + const parent = document.createElement('div'); + const facet1 = buildMockFacetElement({facetId: 'f1'}); + const popover = document.createElement('atomic-popover'); + const nestedFacet = buildMockFacetElement({facetId: 'f2'}); + + popover.appendChild(nestedFacet); + parent.appendChild(facet1); + parent.appendChild(popover); + + const result = getFacetsInChildren(parent); + + expect(result).toContain(facet1); + expect(result).toContain(nestedFacet); + expect(result).toHaveLength(2); + }); + + it('should not include atomic-popover element itself in results', () => { + const parent = document.createElement('div'); + const popover = document.createElement('atomic-popover'); + const nestedFacet = buildMockFacetElement({facetId: 'f1'}); + + popover.appendChild(nestedFacet); + parent.appendChild(popover); + + const result = getFacetsInChildren(parent); + + expect(result).not.toContain(popover); + expect(result).toContain(nestedFacet); + }); + + it('should handle empty atomic-popover elements', () => { + const parent = document.createElement('div'); + const facet1 = buildMockFacetElement({facetId: 'f1'}); + const emptyPopover = document.createElement('atomic-popover'); + + parent.appendChild(facet1); + parent.appendChild(emptyPopover); + + const result = getFacetsInChildren(parent); + + expect(result).toContain(facet1); + expect(result).toHaveLength(1); + }); + + it('should handle atomic-popover with non-facet children', () => { + const parent = document.createElement('div'); + const popover = document.createElement('atomic-popover'); + const notFacet = document.createElement('div'); + + popover.appendChild(notFacet); + parent.appendChild(popover); + + const result = getFacetsInChildren(parent); + + expect(result).toHaveLength(0); + }); }); describe('#getAutomaticFacetGenerator', () => { diff --git a/packages/atomic/src/components/common/facets/facet-common.ts b/packages/atomic/src/components/common/facets/facet-common.ts index 4ad25858623..40ad6f3028c 100644 --- a/packages/atomic/src/components/common/facets/facet-common.ts +++ b/packages/atomic/src/components/common/facets/facet-common.ts @@ -92,10 +92,24 @@ function isPseudoFacet(el: Element): el is BaseFacetElement { return 'facetId' in el; } +function isPopover(el: Element): el is HTMLAtomicPopoverElement { + return el.tagName === 'ATOMIC-POPOVER'; +} + export function getFacetsInChildren(parent: HTMLElement): BaseFacetElement[] { - const facets = Array.from(parent.children).filter((child) => - isPseudoFacet(child) - ) as BaseFacetElement[]; + const facets: BaseFacetElement[] = []; + + Array.from(parent.children).forEach((child) => { + if (isPseudoFacet(child)) { + facets.push(child); + } else if (isPopover(child)) { + // atomic-popover only allows a single child facet, so find() is sufficient + const nestedFacet = Array.from(child.children).find(isPseudoFacet); + if (nestedFacet) { + facets.push(nestedFacet); + } + } + }); return facets; } diff --git a/packages/atomic/src/components/common/facets/stencil-facet-common.tsx b/packages/atomic/src/components/common/facets/stencil-facet-common.tsx index 34cbddd27a5..2b540137a77 100644 --- a/packages/atomic/src/components/common/facets/stencil-facet-common.tsx +++ b/packages/atomic/src/components/common/facets/stencil-facet-common.tsx @@ -91,10 +91,24 @@ function isPseudoFacet(el: Element): el is BaseFacetElement { return 'facetId' in el; } +function isPopover(el: Element): el is HTMLAtomicPopoverElement { + return el.tagName === 'ATOMIC-POPOVER'; +} + export function getFacetsInChildren(parent: HTMLElement): BaseFacetElement[] { - const facets = Array.from(parent.children).filter((child) => - isPseudoFacet(child) - ) as BaseFacetElement[]; + const facets: BaseFacetElement[] = []; + + Array.from(parent.children).forEach((child) => { + if (isPseudoFacet(child)) { + facets.push(child); + } else if (isPopover(child)) { + // atomic-popover only allows a single child facet, so find() is sufficient + const nestedFacet = Array.from(child.children).find(isPseudoFacet); + if (nestedFacet) { + facets.push(nestedFacet); + } + } + }); return facets; } diff --git a/packages/atomic/src/components/search/atomic-facet-manager/atomic-facet-manager.new.stories.tsx b/packages/atomic/src/components/search/atomic-facet-manager/atomic-facet-manager.new.stories.tsx index 52d91550149..0180c59fd28 100644 --- a/packages/atomic/src/components/search/atomic-facet-manager/atomic-facet-manager.new.stories.tsx +++ b/packages/atomic/src/components/search/atomic-facet-manager/atomic-facet-manager.new.stories.tsx @@ -67,3 +67,43 @@ export const Default: Story = { `, }, }; + +export const WithPopover: Story = { + name: 'With facets inside atomic-popover', + decorators: [ + (story) => html` + + ${story()} + `, + ], + args: { + 'default-slot': ` + + + + + + + + + + + + + `, + }, +};