@spectrum-web-components/grid 1.12.3-test.20260827122947 → 1.12.4
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.
package/custom-elements.json
CHANGED
|
@@ -237,7 +237,7 @@
|
|
|
237
237
|
"type": {
|
|
238
238
|
"text": "RovingTabindexController<T>"
|
|
239
239
|
},
|
|
240
|
-
"default": "new RovingTabindexController<T>(this.host, { direction: 'grid', elements, focusInIndex: () => { const activeElement = (this.host.getRootNode() as Document) .activeElement as HTMLElement; return activeElement === this.host ? 0 : -1; }, })"
|
|
240
|
+
"default": "new RovingTabindexController<T>(this.host, { direction: 'grid', // The virtualizer positions items with a physical `translate`, so the // visual order stays left-to-right regardless of the writing mode. mirrorHorizontalInRTL: false, elements, focusInIndex: () => { const activeElement = (this.host.getRootNode() as Document) .activeElement as HTMLElement; return activeElement === this.host ? 0 : -1; }, })"
|
|
241
241
|
},
|
|
242
242
|
{
|
|
243
243
|
"kind": "field",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/grid",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.4",
|
|
4
4
|
"description": "Web component implementation of a Spectrum design Grid",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Adobe",
|
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@lit-labs/observers": "2.0.2",
|
|
62
62
|
"@lit-labs/virtualizer": "2.0.12",
|
|
63
|
-
"@spectrum-web-components/base": "1.12.
|
|
64
|
-
"@spectrum-web-components/reactive-controllers": "1.12.
|
|
63
|
+
"@spectrum-web-components/base": "1.12.4",
|
|
64
|
+
"@spectrum-web-components/reactive-controllers": "1.12.4",
|
|
65
65
|
"lit": "^2.5.0 || ^3.1.3"
|
|
66
66
|
},
|
|
67
67
|
"keywords": [
|
|
@@ -60,6 +60,9 @@ export class GridController {
|
|
|
60
60
|
});
|
|
61
61
|
this.rovingTabindexController = new RovingTabindexController(this.host, {
|
|
62
62
|
direction: "grid",
|
|
63
|
+
// The virtualizer positions items with a physical `translate`, so the
|
|
64
|
+
// visual order stays left-to-right regardless of the writing mode.
|
|
65
|
+
mirrorHorizontalInRTL: false,
|
|
63
66
|
elements,
|
|
64
67
|
focusInIndex: () => {
|
|
65
68
|
const activeElement = this.host.getRootNode().activeElement;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["GridController.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport type { ReactiveController } from 'lit';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport { Grid } from './Grid.dev.js'\n\ninterface ItemSize {\n width: number;\n height: number;\n}\n\nconst doCallbackAfterPaint = (cb: () => void): void => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n};\n\nexport class GridController<\n T extends HTMLElement,\n> implements ReactiveController {\n host!: Grid;\n\n resizeController!: ResizeController;\n\n rovingTabindexController!: RovingTabindexController<T>;\n\n get itemSize(): ItemSize {\n return this._itemSize();\n }\n\n /* c8 ignore next 6 */\n private _itemSize(): ItemSize {\n return {\n width: 100,\n height: 100,\n };\n }\n\n // First visible element\n _first = 0;\n\n get gap(): string | undefined {\n return this._gap();\n }\n\n /* c8 ignore next 3 */\n private _gap(): string | undefined {\n return undefined;\n }\n\n get padding(): string | undefined {\n return this._padding();\n }\n\n /* c8 ignore next 3 */\n private _padding(): string | undefined {\n return undefined;\n }\n\n // Last visible element\n _last = 0;\n\n constructor(\n host: Grid,\n {\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }\n ) {\n this.host = host;\n this.host.addController(this);\n this.applyLayout(itemSize, gap, padding);\n this.resizeController = new ResizeController(this.host, {\n callback: (entries: ResizeObserverEntry[]): void => {\n entries.forEach((entry) => {\n this.measureDirectionLength(entry.contentRect);\n });\n },\n });\n this.rovingTabindexController = new RovingTabindexController<T>(this.host, {\n direction: 'grid',\n elements,\n focusInIndex: () => {\n const activeElement = (this.host.getRootNode() as Document)\n .activeElement as HTMLElement;\n return activeElement === this.host ? 0 : -1;\n },\n });\n }\n\n public focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected applyLayout(\n itemSize: ItemSize | (() => ItemSize),\n gap?: string | (() => string),\n padding?: string | (() => string)\n ): void {\n /* c8 ignore next 2 */\n if (typeof itemSize === 'object') {\n this._itemSize = () => itemSize;\n } else if (\n typeof itemSize === 'function' &&\n typeof itemSize() !== 'undefined'\n ) {\n this._itemSize = itemSize;\n }\n /* c8 ignore next 2 */\n if (typeof gap === 'string') {\n this._gap = () => gap;\n } else if (typeof gap === 'function') {\n this._gap = gap;\n }\n /* c8 ignore next 2 */\n if (typeof padding === 'string') {\n this._padding = () => padding;\n } else if (typeof padding === 'function') {\n this._padding = padding;\n }\n }\n\n public update({\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }): void {\n this.rovingTabindexController.update({ elements });\n this.applyLayout(itemSize, gap, padding);\n const contentRect = this.host.getBoundingClientRect();\n this.measureDirectionLength(contentRect);\n }\n\n protected measureDirectionLength(contentRect: DOMRect): void {\n const gap = this.gap ? parseFloat(this.gap) : 0;\n const padding = this.padding ? parseFloat(this.padding) : 0;\n const contentBoxWidth = contentRect.width - padding * 2;\n // There is always one less gap per row than items.\n const directionLength =\n Math.floor(\n (contentBoxWidth - this.itemSize.width) / (gap + this.itemSize.width)\n ) + 1;\n this.rovingTabindexController.directionLength = Math.floor(directionLength);\n }\n\n protected handleFocusin = (event: FocusEvent): void => {\n const scrollToFirst = (): void => this.host.scrollToIndex(0);\n const focusIntoGrid = (): void => {\n this.focus();\n this.host.tabIndex = -1;\n };\n if ((event.target as HTMLElement) === this.host) {\n if (this._first > 0) {\n doCallbackAfterPaint(() => {\n scrollToFirst();\n doCallbackAfterPaint(focusIntoGrid);\n });\n } else {\n doCallbackAfterPaint(focusIntoGrid);\n }\n }\n };\n\n protected handleFocusout = (event: FocusEvent): void => {\n if (\n !event.relatedTarget ||\n !this.host.contains(event.relatedTarget as HTMLElement)\n ) {\n this.host.tabIndex = 0;\n }\n };\n\n protected handleRangeChanged = (event: RangeChangedEvent): void => {\n this.rovingTabindexController.clearElementCache(event.first);\n };\n\n protected handleVisibleChanged = (event: VisibilityChangedEvent): void => {\n this._first = event.first;\n this._last = event.last;\n };\n\n public hostConnected(): void {\n this.host.addEventListener('rangeChanged', this.handleRangeChanged);\n this.host.addEventListener('visibilityChanged', this.handleVisibleChanged);\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.tabIndex = 0;\n this.host.style.setProperty('outline', 'none', 'important');\n }\n\n public hostDisconnected(): void {\n this.host.removeEventListener('rangeChanged', this.handleRangeChanged);\n this.host.removeEventListener(\n 'visibilityChanged',\n this.handleVisibleChanged\n );\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n }\n}\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,wBAAwB;AAMjC,SAAS,gCAAgC;AASzC,MAAM,uBAAuB,CAAC,OAAyB;AACrD,wBAAsB,MAAM;AAC1B,0BAAsB,MAAM;AAC1B,SAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAEO,aAAM,eAEmB;AAAA,EA2C9B,YACE,MACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAMA;AApCF;AAAA,kBAAS;AAqBT;AAAA,iBAAQ;
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport type { ReactiveController } from 'lit';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport { Grid } from './Grid.dev.js'\n\ninterface ItemSize {\n width: number;\n height: number;\n}\n\nconst doCallbackAfterPaint = (cb: () => void): void => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n};\n\nexport class GridController<\n T extends HTMLElement,\n> implements ReactiveController {\n host!: Grid;\n\n resizeController!: ResizeController;\n\n rovingTabindexController!: RovingTabindexController<T>;\n\n get itemSize(): ItemSize {\n return this._itemSize();\n }\n\n /* c8 ignore next 6 */\n private _itemSize(): ItemSize {\n return {\n width: 100,\n height: 100,\n };\n }\n\n // First visible element\n _first = 0;\n\n get gap(): string | undefined {\n return this._gap();\n }\n\n /* c8 ignore next 3 */\n private _gap(): string | undefined {\n return undefined;\n }\n\n get padding(): string | undefined {\n return this._padding();\n }\n\n /* c8 ignore next 3 */\n private _padding(): string | undefined {\n return undefined;\n }\n\n // Last visible element\n _last = 0;\n\n constructor(\n host: Grid,\n {\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }\n ) {\n this.host = host;\n this.host.addController(this);\n this.applyLayout(itemSize, gap, padding);\n this.resizeController = new ResizeController(this.host, {\n callback: (entries: ResizeObserverEntry[]): void => {\n entries.forEach((entry) => {\n this.measureDirectionLength(entry.contentRect);\n });\n },\n });\n this.rovingTabindexController = new RovingTabindexController<T>(this.host, {\n direction: 'grid',\n // The virtualizer positions items with a physical `translate`, so the\n // visual order stays left-to-right regardless of the writing mode.\n mirrorHorizontalInRTL: false,\n elements,\n focusInIndex: () => {\n const activeElement = (this.host.getRootNode() as Document)\n .activeElement as HTMLElement;\n return activeElement === this.host ? 0 : -1;\n },\n });\n }\n\n public focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected applyLayout(\n itemSize: ItemSize | (() => ItemSize),\n gap?: string | (() => string),\n padding?: string | (() => string)\n ): void {\n /* c8 ignore next 2 */\n if (typeof itemSize === 'object') {\n this._itemSize = () => itemSize;\n } else if (\n typeof itemSize === 'function' &&\n typeof itemSize() !== 'undefined'\n ) {\n this._itemSize = itemSize;\n }\n /* c8 ignore next 2 */\n if (typeof gap === 'string') {\n this._gap = () => gap;\n } else if (typeof gap === 'function') {\n this._gap = gap;\n }\n /* c8 ignore next 2 */\n if (typeof padding === 'string') {\n this._padding = () => padding;\n } else if (typeof padding === 'function') {\n this._padding = padding;\n }\n }\n\n public update({\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }): void {\n this.rovingTabindexController.update({ elements });\n this.applyLayout(itemSize, gap, padding);\n const contentRect = this.host.getBoundingClientRect();\n this.measureDirectionLength(contentRect);\n }\n\n protected measureDirectionLength(contentRect: DOMRect): void {\n const gap = this.gap ? parseFloat(this.gap) : 0;\n const padding = this.padding ? parseFloat(this.padding) : 0;\n const contentBoxWidth = contentRect.width - padding * 2;\n // There is always one less gap per row than items.\n const directionLength =\n Math.floor(\n (contentBoxWidth - this.itemSize.width) / (gap + this.itemSize.width)\n ) + 1;\n this.rovingTabindexController.directionLength = Math.floor(directionLength);\n }\n\n protected handleFocusin = (event: FocusEvent): void => {\n const scrollToFirst = (): void => this.host.scrollToIndex(0);\n const focusIntoGrid = (): void => {\n this.focus();\n this.host.tabIndex = -1;\n };\n if ((event.target as HTMLElement) === this.host) {\n if (this._first > 0) {\n doCallbackAfterPaint(() => {\n scrollToFirst();\n doCallbackAfterPaint(focusIntoGrid);\n });\n } else {\n doCallbackAfterPaint(focusIntoGrid);\n }\n }\n };\n\n protected handleFocusout = (event: FocusEvent): void => {\n if (\n !event.relatedTarget ||\n !this.host.contains(event.relatedTarget as HTMLElement)\n ) {\n this.host.tabIndex = 0;\n }\n };\n\n protected handleRangeChanged = (event: RangeChangedEvent): void => {\n this.rovingTabindexController.clearElementCache(event.first);\n };\n\n protected handleVisibleChanged = (event: VisibilityChangedEvent): void => {\n this._first = event.first;\n this._last = event.last;\n };\n\n public hostConnected(): void {\n this.host.addEventListener('rangeChanged', this.handleRangeChanged);\n this.host.addEventListener('visibilityChanged', this.handleVisibleChanged);\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.tabIndex = 0;\n this.host.style.setProperty('outline', 'none', 'important');\n }\n\n public hostDisconnected(): void {\n this.host.removeEventListener('rangeChanged', this.handleRangeChanged);\n this.host.removeEventListener(\n 'visibilityChanged',\n this.handleVisibleChanged\n );\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/GridController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{ResizeController as a}from"@lit-labs/observers/resize-controller.js";import{RovingTabindexController as l}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";const
|
|
1
|
+
"use strict";import{ResizeController as a}from"@lit-labs/observers/resize-controller.js";import{RovingTabindexController as l}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";const s=r=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{r()})})};export class GridController{constructor(t,{elements:i,itemSize:e,gap:n,padding:o}){this._first=0;this._last=0;this.handleFocusin=t=>{const i=()=>this.host.scrollToIndex(0),e=()=>{this.focus(),this.host.tabIndex=-1};t.target===this.host&&(this._first>0?s(()=>{i(),s(e)}):s(e))};this.handleFocusout=t=>{(!t.relatedTarget||!this.host.contains(t.relatedTarget))&&(this.host.tabIndex=0)};this.handleRangeChanged=t=>{this.rovingTabindexController.clearElementCache(t.first)};this.handleVisibleChanged=t=>{this._first=t.first,this._last=t.last};this.host=t,this.host.addController(this),this.applyLayout(e,n,o),this.resizeController=new a(this.host,{callback:h=>{h.forEach(d=>{this.measureDirectionLength(d.contentRect)})}}),this.rovingTabindexController=new l(this.host,{direction:"grid",mirrorHorizontalInRTL:!1,elements:i,focusInIndex:()=>this.host.getRootNode().activeElement===this.host?0:-1})}get itemSize(){return this._itemSize()}_itemSize(){return{width:100,height:100}}get gap(){return this._gap()}_gap(){}get padding(){return this._padding()}_padding(){}focus(t){this.rovingTabindexController.focus(t)}applyLayout(t,i,e){typeof t=="object"?this._itemSize=()=>t:typeof t=="function"&&typeof t()!="undefined"&&(this._itemSize=t),typeof i=="string"?this._gap=()=>i:typeof i=="function"&&(this._gap=i),typeof e=="string"?this._padding=()=>e:typeof e=="function"&&(this._padding=e)}update({elements:t,itemSize:i,gap:e,padding:n}){this.rovingTabindexController.update({elements:t}),this.applyLayout(i,e,n);const o=this.host.getBoundingClientRect();this.measureDirectionLength(o)}measureDirectionLength(t){const i=this.gap?parseFloat(this.gap):0,e=this.padding?parseFloat(this.padding):0,n=t.width-e*2,o=Math.floor((n-this.itemSize.width)/(i+this.itemSize.width))+1;this.rovingTabindexController.directionLength=Math.floor(o)}hostConnected(){this.host.addEventListener("rangeChanged",this.handleRangeChanged),this.host.addEventListener("visibilityChanged",this.handleVisibleChanged),this.host.addEventListener("focusin",this.handleFocusin),this.host.addEventListener("focusout",this.handleFocusout),this.host.tabIndex=0,this.host.style.setProperty("outline","none","important")}hostDisconnected(){this.host.removeEventListener("rangeChanged",this.handleRangeChanged),this.host.removeEventListener("visibilityChanged",this.handleVisibleChanged),this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout)}}
|
|
2
2
|
//# sourceMappingURL=GridController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["GridController.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport type { ReactiveController } from 'lit';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport { Grid } from './Grid.js';\n\ninterface ItemSize {\n width: number;\n height: number;\n}\n\nconst doCallbackAfterPaint = (cb: () => void): void => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n};\n\nexport class GridController<\n T extends HTMLElement,\n> implements ReactiveController {\n host!: Grid;\n\n resizeController!: ResizeController;\n\n rovingTabindexController!: RovingTabindexController<T>;\n\n get itemSize(): ItemSize {\n return this._itemSize();\n }\n\n /* c8 ignore next 6 */\n private _itemSize(): ItemSize {\n return {\n width: 100,\n height: 100,\n };\n }\n\n // First visible element\n _first = 0;\n\n get gap(): string | undefined {\n return this._gap();\n }\n\n /* c8 ignore next 3 */\n private _gap(): string | undefined {\n return undefined;\n }\n\n get padding(): string | undefined {\n return this._padding();\n }\n\n /* c8 ignore next 3 */\n private _padding(): string | undefined {\n return undefined;\n }\n\n // Last visible element\n _last = 0;\n\n constructor(\n host: Grid,\n {\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }\n ) {\n this.host = host;\n this.host.addController(this);\n this.applyLayout(itemSize, gap, padding);\n this.resizeController = new ResizeController(this.host, {\n callback: (entries: ResizeObserverEntry[]): void => {\n entries.forEach((entry) => {\n this.measureDirectionLength(entry.contentRect);\n });\n },\n });\n this.rovingTabindexController = new RovingTabindexController<T>(this.host, {\n direction: 'grid',\n elements,\n focusInIndex: () => {\n const activeElement = (this.host.getRootNode() as Document)\n .activeElement as HTMLElement;\n return activeElement === this.host ? 0 : -1;\n },\n });\n }\n\n public focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected applyLayout(\n itemSize: ItemSize | (() => ItemSize),\n gap?: string | (() => string),\n padding?: string | (() => string)\n ): void {\n /* c8 ignore next 2 */\n if (typeof itemSize === 'object') {\n this._itemSize = () => itemSize;\n } else if (\n typeof itemSize === 'function' &&\n typeof itemSize() !== 'undefined'\n ) {\n this._itemSize = itemSize;\n }\n /* c8 ignore next 2 */\n if (typeof gap === 'string') {\n this._gap = () => gap;\n } else if (typeof gap === 'function') {\n this._gap = gap;\n }\n /* c8 ignore next 2 */\n if (typeof padding === 'string') {\n this._padding = () => padding;\n } else if (typeof padding === 'function') {\n this._padding = padding;\n }\n }\n\n public update({\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }): void {\n this.rovingTabindexController.update({ elements });\n this.applyLayout(itemSize, gap, padding);\n const contentRect = this.host.getBoundingClientRect();\n this.measureDirectionLength(contentRect);\n }\n\n protected measureDirectionLength(contentRect: DOMRect): void {\n const gap = this.gap ? parseFloat(this.gap) : 0;\n const padding = this.padding ? parseFloat(this.padding) : 0;\n const contentBoxWidth = contentRect.width - padding * 2;\n // There is always one less gap per row than items.\n const directionLength =\n Math.floor(\n (contentBoxWidth - this.itemSize.width) / (gap + this.itemSize.width)\n ) + 1;\n this.rovingTabindexController.directionLength = Math.floor(directionLength);\n }\n\n protected handleFocusin = (event: FocusEvent): void => {\n const scrollToFirst = (): void => this.host.scrollToIndex(0);\n const focusIntoGrid = (): void => {\n this.focus();\n this.host.tabIndex = -1;\n };\n if ((event.target as HTMLElement) === this.host) {\n if (this._first > 0) {\n doCallbackAfterPaint(() => {\n scrollToFirst();\n doCallbackAfterPaint(focusIntoGrid);\n });\n } else {\n doCallbackAfterPaint(focusIntoGrid);\n }\n }\n };\n\n protected handleFocusout = (event: FocusEvent): void => {\n if (\n !event.relatedTarget ||\n !this.host.contains(event.relatedTarget as HTMLElement)\n ) {\n this.host.tabIndex = 0;\n }\n };\n\n protected handleRangeChanged = (event: RangeChangedEvent): void => {\n this.rovingTabindexController.clearElementCache(event.first);\n };\n\n protected handleVisibleChanged = (event: VisibilityChangedEvent): void => {\n this._first = event.first;\n this._last = event.last;\n };\n\n public hostConnected(): void {\n this.host.addEventListener('rangeChanged', this.handleRangeChanged);\n this.host.addEventListener('visibilityChanged', this.handleVisibleChanged);\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.tabIndex = 0;\n this.host.style.setProperty('outline', 'none', 'important');\n }\n\n public hostDisconnected(): void {\n this.host.removeEventListener('rangeChanged', this.handleRangeChanged);\n this.host.removeEventListener(\n 'visibilityChanged',\n this.handleVisibleChanged\n );\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n }\n}\n"],
|
|
5
|
-
"mappings": "aAYA,OAAS,oBAAAA,MAAwB,2CAMjC,OAAS,4BAAAC,MAAgC,sEASzC,MAAMC,EAAwBC,GAAyB,CACrD,sBAAsB,IAAM,CAC1B,sBAAsB,IAAM,CAC1BA,EAAG,CACL,CAAC,CACH,CAAC,CACH,EAEO,aAAM,cAEmB,CA2C9B,YACEC,EACA,CACE,SAAAC,EACA,SAAAC,EACA,IAAAC,EACA,QAAAC,CACF,EAMA,CApCF,YAAS,EAqBT,WAAQ,
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport type { ReactiveController } from 'lit';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport { Grid } from './Grid.js';\n\ninterface ItemSize {\n width: number;\n height: number;\n}\n\nconst doCallbackAfterPaint = (cb: () => void): void => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n};\n\nexport class GridController<\n T extends HTMLElement,\n> implements ReactiveController {\n host!: Grid;\n\n resizeController!: ResizeController;\n\n rovingTabindexController!: RovingTabindexController<T>;\n\n get itemSize(): ItemSize {\n return this._itemSize();\n }\n\n /* c8 ignore next 6 */\n private _itemSize(): ItemSize {\n return {\n width: 100,\n height: 100,\n };\n }\n\n // First visible element\n _first = 0;\n\n get gap(): string | undefined {\n return this._gap();\n }\n\n /* c8 ignore next 3 */\n private _gap(): string | undefined {\n return undefined;\n }\n\n get padding(): string | undefined {\n return this._padding();\n }\n\n /* c8 ignore next 3 */\n private _padding(): string | undefined {\n return undefined;\n }\n\n // Last visible element\n _last = 0;\n\n constructor(\n host: Grid,\n {\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }\n ) {\n this.host = host;\n this.host.addController(this);\n this.applyLayout(itemSize, gap, padding);\n this.resizeController = new ResizeController(this.host, {\n callback: (entries: ResizeObserverEntry[]): void => {\n entries.forEach((entry) => {\n this.measureDirectionLength(entry.contentRect);\n });\n },\n });\n this.rovingTabindexController = new RovingTabindexController<T>(this.host, {\n direction: 'grid',\n // The virtualizer positions items with a physical `translate`, so the\n // visual order stays left-to-right regardless of the writing mode.\n mirrorHorizontalInRTL: false,\n elements,\n focusInIndex: () => {\n const activeElement = (this.host.getRootNode() as Document)\n .activeElement as HTMLElement;\n return activeElement === this.host ? 0 : -1;\n },\n });\n }\n\n public focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected applyLayout(\n itemSize: ItemSize | (() => ItemSize),\n gap?: string | (() => string),\n padding?: string | (() => string)\n ): void {\n /* c8 ignore next 2 */\n if (typeof itemSize === 'object') {\n this._itemSize = () => itemSize;\n } else if (\n typeof itemSize === 'function' &&\n typeof itemSize() !== 'undefined'\n ) {\n this._itemSize = itemSize;\n }\n /* c8 ignore next 2 */\n if (typeof gap === 'string') {\n this._gap = () => gap;\n } else if (typeof gap === 'function') {\n this._gap = gap;\n }\n /* c8 ignore next 2 */\n if (typeof padding === 'string') {\n this._padding = () => padding;\n } else if (typeof padding === 'function') {\n this._padding = padding;\n }\n }\n\n public update({\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }): void {\n this.rovingTabindexController.update({ elements });\n this.applyLayout(itemSize, gap, padding);\n const contentRect = this.host.getBoundingClientRect();\n this.measureDirectionLength(contentRect);\n }\n\n protected measureDirectionLength(contentRect: DOMRect): void {\n const gap = this.gap ? parseFloat(this.gap) : 0;\n const padding = this.padding ? parseFloat(this.padding) : 0;\n const contentBoxWidth = contentRect.width - padding * 2;\n // There is always one less gap per row than items.\n const directionLength =\n Math.floor(\n (contentBoxWidth - this.itemSize.width) / (gap + this.itemSize.width)\n ) + 1;\n this.rovingTabindexController.directionLength = Math.floor(directionLength);\n }\n\n protected handleFocusin = (event: FocusEvent): void => {\n const scrollToFirst = (): void => this.host.scrollToIndex(0);\n const focusIntoGrid = (): void => {\n this.focus();\n this.host.tabIndex = -1;\n };\n if ((event.target as HTMLElement) === this.host) {\n if (this._first > 0) {\n doCallbackAfterPaint(() => {\n scrollToFirst();\n doCallbackAfterPaint(focusIntoGrid);\n });\n } else {\n doCallbackAfterPaint(focusIntoGrid);\n }\n }\n };\n\n protected handleFocusout = (event: FocusEvent): void => {\n if (\n !event.relatedTarget ||\n !this.host.contains(event.relatedTarget as HTMLElement)\n ) {\n this.host.tabIndex = 0;\n }\n };\n\n protected handleRangeChanged = (event: RangeChangedEvent): void => {\n this.rovingTabindexController.clearElementCache(event.first);\n };\n\n protected handleVisibleChanged = (event: VisibilityChangedEvent): void => {\n this._first = event.first;\n this._last = event.last;\n };\n\n public hostConnected(): void {\n this.host.addEventListener('rangeChanged', this.handleRangeChanged);\n this.host.addEventListener('visibilityChanged', this.handleVisibleChanged);\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.tabIndex = 0;\n this.host.style.setProperty('outline', 'none', 'important');\n }\n\n public hostDisconnected(): void {\n this.host.removeEventListener('rangeChanged', this.handleRangeChanged);\n this.host.removeEventListener(\n 'visibilityChanged',\n this.handleVisibleChanged\n );\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ResizeController", "RovingTabindexController", "doCallbackAfterPaint", "cb", "host", "elements", "itemSize", "gap", "padding", "event", "scrollToFirst", "focusIntoGrid", "entries", "entry", "options", "contentRect", "contentBoxWidth", "directionLength"]
|
|
7
7
|
}
|