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': `
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ },
+};