Chore: Rename containingParent to offsetParent

Author: jlukic

docs/src/content/examples/query-containingparent.mdx

@@ -1,12 +1,12 @@
 ---
-title: 'Query .containingParent()'
-shortTitle: '.containingParent()'
-id: 'query-containingparent'
+title: 'Query .offsetParent()'
+shortTitle: '.offsetParent()'
+id: 'query-offsetparent'
 exampleType: 'component'
 category: 'Query'
 subcategory: 'Visibility'
 tags: ['query', 'containing', 'parent', 'position']
 description: 'Finds nearest containing parent element'
 tip: 'Used for positioning elements relative to their containing block context'
 selectedFile: 'page.js'
----
+---

docs/src/content/examples/query-positioningparent.mdx

@@ -1,12 +1,12 @@
 ---
-title: 'Query .positioningParent()'
-shortTitle: '.positioningParent()'
+title: 'Query .offsetParent()'
+shortTitle: '.offsetParent()'
 id: 'query-positioningparent'
 exampleType: 'component'
 category: 'Query'
 subcategory: 'Visibility'
-tags: ['query', 'positioning', 'parent', 'position', 'fixed', 'absolute']
+tags: ['query', 'offset', 'parent', 'position', 'fixed', 'absolute']
 description: 'Finds the actual positioning context for positioned elements'
-tip: 'Unlike containingParent, correctly handles fixed elements and modern CSS positioning contexts'
+tip: 'Unlike offsetParent, correctly handles fixed elements and modern CSS positioning contexts'
 selectedFile: 'page.js'
----
+---

…raversal/query-containingparent/page.css …om-traversal/query-offsetparent/page.cssdocs/src/examples/query/dom-traversal/query-containingparent/page.css renamed to docs/src/examples/query/dom-traversal/query-offsetparent/page.css docs/src/examples/query/dom-traversal/query-containingparent/page.css renamed to docs/src/examples/query/dom-traversal/query-offsetparent/page.css

@@ -15,7 +15,7 @@ $('.toggle-transform').on('click', () => {
   const currentTransform = $box.css('transform');
   if (currentTransform === 'none') {
     $box.css('transform', 'scale(1)');
-    log('Box transform set to: scale(1) - Now box is the containing parent!');
+    log('Box transform set to: scale(1) - Now box is the offset parent!');
   }
   else {
     $box.css('transform', 'none');
@@ -33,7 +33,7 @@ $('.toggle-filter').on('click', () => {
   const currentFilter = $box.css('filter');
   if (currentFilter === 'none') {
     $box.css('filter', 'brightness(1)');
-    log('Box filter set to: brightness(1) - Now box is the containing parent!');
+    log('Box filter set to: brightness(1) - Now box is the offset parent!');
   }
   else {
     $box.css('filter', 'none');
@@ -46,23 +46,23 @@ $('.toggle-filter').on('click', () => {
   }, 10);
 });
 
-// Find containing parent
+// Find offset parent
 $('.find').on('click', () => {
   $('.highlight').removeClass('highlight');
 
-  const $containingParent = $('.target').containingParent();
-  $containingParent.addClass('highlight');
+  const $offsetParent = $('.target').offsetParent();
+  $offsetParent.addClass('highlight');
 
-  if ($containingParent.is('.container')) {
+  if ($offsetParent.is('.container')) {
     log('Containing parent: .container (as expected)');
   }
-  else if ($containingParent.is('.box')) {
+  else if ($offsetParent.is('.box')) {
     log('Containing parent: .box (due to transform/filter!)');
   }
 
   // Compare with browser's offsetParent
-  const $offsetParent = $('.target').containingParent({ calculate: false });
-  if (!$offsetParent.is($containingParent)) {
+  const $offsetParent = $('.target').offsetParent({ calculate: false });
+  if (!$offsetParent.is($offsetParent)) {
     $log.append('<br>Note: Browser offsetParent is different!');
   }
 });

…aversal/query-containingparent/page.html …m-traversal/query-offsetparent/page.htmldocs/src/examples/query/dom-traversal/query-containingparent/page.html renamed to docs/src/examples/query/dom-traversal/query-offsetparent/page.html docs/src/examples/query/dom-traversal/query-containingparent/page.html renamed to docs/src/examples/query/dom-traversal/query-offsetparent/page.html

@@ -262,16 +262,16 @@ const $scrollContainer = $content.clippingParent();
 ### Example
 <PlaygroundExample id="query-clippingparent" direction="horizontal"></PlaygroundExample>
 
-## containingParent
+## offsetParent
 
-Get the simple containing parent (offsetParent) for each element.
+Get the `offsetParent` of an element as reported by the Dom.
 
-> **Simple Access** This is a direct wrapper around the native `offsetParent` property for quick access to basic positioning context.
+> **Simple Access** This is a direct wrapper around the native `offsetParent` property this may not always be the positioning parent for fixed position elements.
 
 ### Syntax
 
 ```javascript
-$('selector').containingParent()
+$('selector').offsetParent()
 ```
 
 ### Returns
@@ -282,11 +282,11 @@ A new [Query object](/api/query/basic#the-query-object) containing the offset pa
 
 ```javascript
 // Quick access to offsetParent
-const $offsetParent = $('#element').containingParent();
+const $offsetParent = $('#element').offsetParent();
 
 // For simple positioning calculations
 const $element = $('#positioned-element');
-const $parent = $element.containingParent();
+const $parent = $element.offsetParent();
 console.log('Positioned relative to:', $parent[0]);
 ```
 

…traversal/query-containingparent/page.js …dom-traversal/query-offsetparent/page.jsdocs/src/examples/query/dom-traversal/query-containingparent/page.js renamed to docs/src/examples/query/dom-traversal/query-offsetparent/page.js docs/src/examples/query/dom-traversal/query-containingparent/page.js renamed to docs/src/examples/query/dom-traversal/query-offsetparent/page.js

@@ -1816,7 +1816,7 @@ export class Query {
     return this.chain(parents);
   }
 
-  containingParent() {
+  offsetParent() {
     const parents = this.map(el => el.offsetParent || document.documentElement);
     return this.chain(parents);
   }

docs/src/pages/api/query/visibility.mdx

@@ -78,7 +78,7 @@ describe('query', () => {
       expect(position).toBeUndefined();
     });
 
-    it('sets position relative to containingParent by default', async () => {
+    it('sets position relative to offsetParent by default', async () => {
       document.body.innerHTML = `
         <div id="container" style="position: relative; width: 500px; height: 500px;">
           <div id="child" style="position: absolute; width: 50px; height: 50px;"></div>

packages/query/src/query.js

@@ -829,7 +829,7 @@ describe('query', () => {
     });
   });
 
-  describe('containingParent', () => {
+  describe('offsetParent', () => {
     beforeEach(() => {
       document.body.innerHTML = '';
     });
@@ -842,10 +842,10 @@ describe('query', () => {
       `;
 
       const $child = $('#child');
-      const $containingParent = $child.containingParent();
+      const $offsetParent = $child.offsetParent();
 
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.getElementById('container'));
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.getElementById('container'));
     });
 
     it('should find containing parent with transform', () => {
@@ -856,10 +856,10 @@ describe('query', () => {
       `;
 
       const $child = $('#child');
-      const $containingParent = $child.containingParent();
+      const $offsetParent = $child.offsetParent();
 
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.getElementById('transformed'));
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.getElementById('transformed'));
     });
 
     it('should find containing parent with filter', () => {
@@ -870,10 +870,10 @@ describe('query', () => {
       `;
 
       const $child = $('#child');
-      const $containingParent = $child.containingParent();
+      const $offsetParent = $child.offsetParent();
 
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.getElementById('filtered'));
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.getElementById('filtered'));
     });
 
     it('should find containing parent with contain property', () => {
@@ -884,10 +884,10 @@ describe('query', () => {
       `;
 
       const $child = $('#child');
-      const $containingParent = $child.containingParent();
+      const $offsetParent = $child.offsetParent();
 
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.getElementById('contained'));
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.getElementById('contained'));
     });
 
     it('should find containing parent with will-change', () => {
@@ -898,10 +898,10 @@ describe('query', () => {
       `;
 
       const $child = $('#child');
-      const $containingParent = $child.containingParent();
+      const $offsetParent = $child.offsetParent();
 
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.getElementById('willchange'));
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.getElementById('willchange'));
     });
 
     it('should return documentElement for fixed elements (null offsetParent fallback)', () => {
@@ -912,11 +912,11 @@ describe('query', () => {
       `;
 
       const $fixed = $('#fixed');
-      const $containingParent = $fixed.containingParent();
+      const $offsetParent = $fixed.offsetParent();
 
       // Fixed elements have null offsetParent, so should fallback to documentElement
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.documentElement);
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.documentElement);
     });
 
     it('should return document.body when no containing parent found', () => {
@@ -929,10 +929,10 @@ describe('query', () => {
       `;
 
       const $target = $('#target');
-      const $containingParent = $target.containingParent();
+      const $offsetParent = $target.offsetParent();
 
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.body);
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.body);
     });
 
     it('should use browser offsetParent when calculate is false', () => {
@@ -943,10 +943,10 @@ describe('query', () => {
       `;
 
       const $child = $('#child');
-      const $containingParent = $child.containingParent({ calculate: false });
+      const $offsetParent = $child.offsetParent({ calculate: false });
 
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.getElementById('child').offsetParent);
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.getElementById('child').offsetParent);
     });
 
     it('should handle multiple elements', () => {
@@ -960,18 +960,18 @@ describe('query', () => {
       `;
 
       const $items = $('.item');
-      const $containingParents = $items.containingParent();
+      const $offsetParents = $items.offsetParent();
 
-      expect($containingParents.length).toBe(2);
-      expect($containingParents[0]).toBe(document.getElementById('container1'));
-      expect($containingParents[1]).toBe(document.getElementById('container2'));
+      expect($offsetParents.length).toBe(2);
+      expect($offsetParents[0]).toBe(document.getElementById('container1'));
+      expect($offsetParents[1]).toBe(document.getElementById('container2'));
     });
 
     it('should handle empty selection', () => {
       const $empty = $('.nonexistent');
-      const $containingParent = $empty.containingParent();
+      const $offsetParent = $empty.offsetParent();
 
-      expect($containingParent.length).toBe(0);
+      expect($offsetParent.length).toBe(0);
     });
 
     it('should find nearest containing parent in nested contexts', () => {
@@ -986,11 +986,11 @@ describe('query', () => {
       `;
 
       const $target = $('#target');
-      const $containingParent = $target.containingParent();
+      const $offsetParent = $target.offsetParent();
 
       // Should find the immediate containing parent (inner), not the outer one
-      expect($containingParent.length).toBe(1);
-      expect($containingParent[0]).toBe(document.getElementById('inner'));
+      expect($offsetParent.length).toBe(1);
+      expect($offsetParent[0]).toBe(document.getElementById('inner'));
     });
   });
 

packages/query/test/browser/dimensions.test.js

@@ -139,7 +139,7 @@ describe('Query Dimensions', () => {
     });
   });
 
-  describe('containingParent()', () => {
+  describe('offsetParent()', () => {
     beforeEach(() => {
       document.body.innerHTML = '';
     });
@@ -151,7 +151,7 @@ describe('Query Dimensions', () => {
         </div>
       `;
 
-      const result = $('#child').containingParent();
+      const result = $('#child').offsetParent();
       expect(result).toBeInstanceOf(Query);
     });
   });