Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@github/text-expander-element
Advanced tools
@github/text-expander-element - npm Package Compare versions
Comparing version 2.7.1 to 2.7.2
@@ -267,12 +267,19 @@ const ctrlBindings = !!navigator.userAgent.match(/Macintosh/); | ||
| static for(input) { | ||
| const clone = CloneRegistry.get(input) ?? new InputStyleCloneElement(input); | ||
| CloneRegistry.set(input, clone); | ||
| let clone = CloneRegistry.get(input); | ||
| if (!clone) { | ||
| clone = new InputStyleCloneElement(); | ||
| clone.connect(input); | ||
| CloneRegistry.set(input, clone); | ||
| } | ||
| return clone; | ||
| } | ||
| /** | ||
| * Avoid constructing directly: Use `InputStyleCloneElement.for` instead. | ||
| * @private | ||
| * Connect this instance to a target input element and insert this instance into the DOM in the correct location. | ||
| * | ||
| * NOTE: calling the static `for` method is nearly always preferable as it will reuse an existing clone if available. | ||
| * However, if reusing clones is problematic (ie, if the clone needs to be mutated), a clone can be constructed | ||
| * directly with `new InputStyleCloneElement()` and then bound to an input and inserted into the DOM with | ||
| * `clone.connect(target)`. | ||
| */ | ||
| constructor(input) { | ||
| super(); | ||
| connect(input) { | ||
| this.#inputRef = new WeakRef(input); | ||
@@ -297,39 +304,38 @@ // We want position:absolute so it doesn't take space in the layout, but that doesn't work with display:table-cell | ||
| connectedCallback() { | ||
| const input = this.#inputRef.deref(); | ||
| if (!input) | ||
| return this.remove(); | ||
| this.style.pointerEvents = "none"; | ||
| this.style.userSelect = "none"; | ||
| this.style.overflow = "hidden"; | ||
| this.style.display = "block"; | ||
| // Important not to use display:none which would not render the content at all | ||
| this.style.visibility = "hidden"; | ||
| if (input instanceof HTMLTextAreaElement) { | ||
| this.style.whiteSpace = "pre-wrap"; | ||
| this.style.wordWrap = "break-word"; | ||
| } | ||
| else { | ||
| this.style.whiteSpace = "nowrap"; | ||
| // text in single-line inputs is vertically centered | ||
| this.style.display = "table-cell"; | ||
| this.style.verticalAlign = "middle"; | ||
| } | ||
| this.setAttribute("aria-hidden", "true"); | ||
| this.#updateStyles(); | ||
| this.#updateText(); | ||
| this.#styleObserver.observe(input, { | ||
| attributeFilter: [ | ||
| "style", | ||
| "dir", // users can right-click in some browsers to change the text direction dynamically | ||
| ], | ||
| this.#usingInput((input) => { | ||
| this.style.pointerEvents = "none"; | ||
| this.style.userSelect = "none"; | ||
| this.style.overflow = "hidden"; | ||
| this.style.display = "block"; | ||
| // Important not to use display:none which would not render the content at all | ||
| this.style.visibility = "hidden"; | ||
| if (input instanceof HTMLTextAreaElement) { | ||
| this.style.whiteSpace = "pre-wrap"; | ||
| this.style.wordWrap = "break-word"; | ||
| } | ||
| else { | ||
| this.style.whiteSpace = "nowrap"; | ||
| // text in single-line inputs is vertically centered | ||
| this.style.display = "table-cell"; | ||
| this.style.verticalAlign = "middle"; | ||
| } | ||
| this.setAttribute("aria-hidden", "true"); | ||
| this.#updateStyles(); | ||
| this.#updateText(); | ||
| this.#styleObserver.observe(input, { | ||
| attributeFilter: [ | ||
| "style", | ||
| "dir", // users can right-click in some browsers to change the text direction dynamically | ||
| ], | ||
| }); | ||
| this.#resizeObserver.observe(input); | ||
| document.addEventListener("scroll", this.#onDocumentScrollOrResize, { capture: true }); | ||
| window.addEventListener("resize", this.#onDocumentScrollOrResize, { capture: true }); | ||
| // capture so this happens first, so other things can respond to `input` events after this data updates | ||
| input.addEventListener("input", this.#onInput, { capture: true }); | ||
| }); | ||
| this.#resizeObserver.observe(input); | ||
| document.addEventListener("scroll", this.#onDocumentScrollOrResize, { capture: true }); | ||
| window.addEventListener("resize", this.#onDocumentScrollOrResize, { capture: true }); | ||
| // capture so this happens first, so other things can respond to `input` events after this data updates | ||
| input.addEventListener("input", this.#onInput, { capture: true }); | ||
| } | ||
| /** @private */ | ||
| disconnectedCallback() { | ||
| this.#container.remove(); | ||
| this.#container?.remove(); | ||
| this.#styleObserver.disconnect(); | ||
@@ -339,3 +345,4 @@ this.#resizeObserver.disconnect(); | ||
| window.removeEventListener("resize", this.#onDocumentScrollOrResize, { capture: true }); | ||
| const input = this.#inputRef.deref(); | ||
| // Can't use `usingInput` here since that could infinitely recurse | ||
| const input = this.#input; | ||
| if (input) { | ||
@@ -347,5 +354,8 @@ input.removeEventListener("input", this.#onInput, { capture: true }); | ||
| // --- private --- | ||
| get #input() { | ||
| return this.#inputRef?.deref(); | ||
| } | ||
| /** Perform `fn` using the `input` if it is still available. If not, clean up the clone instead. */ | ||
| #usingInput(fn) { | ||
| const input = this.#inputRef.deref(); | ||
| const input = this.#input; | ||
| if (!input) | ||
@@ -352,0 +362,0 @@ return this.remove(); |
@@ -97,12 +97,19 @@ import Combobox from '@github/combobox-nav'; | ||
| static for(input) { | ||
| const clone = CloneRegistry.get(input) ?? new InputStyleCloneElement(input); | ||
| CloneRegistry.set(input, clone); | ||
| let clone = CloneRegistry.get(input); | ||
| if (!clone) { | ||
| clone = new InputStyleCloneElement(); | ||
| clone.connect(input); | ||
| CloneRegistry.set(input, clone); | ||
| } | ||
| return clone; | ||
| } | ||
| /** | ||
| * Avoid constructing directly: Use `InputStyleCloneElement.for` instead. | ||
| * @private | ||
| * Connect this instance to a target input element and insert this instance into the DOM in the correct location. | ||
| * | ||
| * NOTE: calling the static `for` method is nearly always preferable as it will reuse an existing clone if available. | ||
| * However, if reusing clones is problematic (ie, if the clone needs to be mutated), a clone can be constructed | ||
| * directly with `new InputStyleCloneElement()` and then bound to an input and inserted into the DOM with | ||
| * `clone.connect(target)`. | ||
| */ | ||
| constructor(input) { | ||
| super(); | ||
| connect(input) { | ||
| this.#inputRef = new WeakRef(input); | ||
@@ -127,39 +134,38 @@ // We want position:absolute so it doesn't take space in the layout, but that doesn't work with display:table-cell | ||
| connectedCallback() { | ||
| const input = this.#inputRef.deref(); | ||
| if (!input) | ||
| return this.remove(); | ||
| this.style.pointerEvents = "none"; | ||
| this.style.userSelect = "none"; | ||
| this.style.overflow = "hidden"; | ||
| this.style.display = "block"; | ||
| // Important not to use display:none which would not render the content at all | ||
| this.style.visibility = "hidden"; | ||
| if (input instanceof HTMLTextAreaElement) { | ||
| this.style.whiteSpace = "pre-wrap"; | ||
| this.style.wordWrap = "break-word"; | ||
| } | ||
| else { | ||
| this.style.whiteSpace = "nowrap"; | ||
| // text in single-line inputs is vertically centered | ||
| this.style.display = "table-cell"; | ||
| this.style.verticalAlign = "middle"; | ||
| } | ||
| this.setAttribute("aria-hidden", "true"); | ||
| this.#updateStyles(); | ||
| this.#updateText(); | ||
| this.#styleObserver.observe(input, { | ||
| attributeFilter: [ | ||
| "style", | ||
| "dir", // users can right-click in some browsers to change the text direction dynamically | ||
| ], | ||
| this.#usingInput((input) => { | ||
| this.style.pointerEvents = "none"; | ||
| this.style.userSelect = "none"; | ||
| this.style.overflow = "hidden"; | ||
| this.style.display = "block"; | ||
| // Important not to use display:none which would not render the content at all | ||
| this.style.visibility = "hidden"; | ||
| if (input instanceof HTMLTextAreaElement) { | ||
| this.style.whiteSpace = "pre-wrap"; | ||
| this.style.wordWrap = "break-word"; | ||
| } | ||
| else { | ||
| this.style.whiteSpace = "nowrap"; | ||
| // text in single-line inputs is vertically centered | ||
| this.style.display = "table-cell"; | ||
| this.style.verticalAlign = "middle"; | ||
| } | ||
| this.setAttribute("aria-hidden", "true"); | ||
| this.#updateStyles(); | ||
| this.#updateText(); | ||
| this.#styleObserver.observe(input, { | ||
| attributeFilter: [ | ||
| "style", | ||
| "dir", // users can right-click in some browsers to change the text direction dynamically | ||
| ], | ||
| }); | ||
| this.#resizeObserver.observe(input); | ||
| document.addEventListener("scroll", this.#onDocumentScrollOrResize, { capture: true }); | ||
| window.addEventListener("resize", this.#onDocumentScrollOrResize, { capture: true }); | ||
| // capture so this happens first, so other things can respond to `input` events after this data updates | ||
| input.addEventListener("input", this.#onInput, { capture: true }); | ||
| }); | ||
| this.#resizeObserver.observe(input); | ||
| document.addEventListener("scroll", this.#onDocumentScrollOrResize, { capture: true }); | ||
| window.addEventListener("resize", this.#onDocumentScrollOrResize, { capture: true }); | ||
| // capture so this happens first, so other things can respond to `input` events after this data updates | ||
| input.addEventListener("input", this.#onInput, { capture: true }); | ||
| } | ||
| /** @private */ | ||
| disconnectedCallback() { | ||
| this.#container.remove(); | ||
| this.#container?.remove(); | ||
| this.#styleObserver.disconnect(); | ||
@@ -169,3 +175,4 @@ this.#resizeObserver.disconnect(); | ||
| window.removeEventListener("resize", this.#onDocumentScrollOrResize, { capture: true }); | ||
| const input = this.#inputRef.deref(); | ||
| // Can't use `usingInput` here since that could infinitely recurse | ||
| const input = this.#input; | ||
| if (input) { | ||
@@ -177,5 +184,8 @@ input.removeEventListener("input", this.#onInput, { capture: true }); | ||
| // --- private --- | ||
| get #input() { | ||
| return this.#inputRef?.deref(); | ||
| } | ||
| /** Perform `fn` using the `input` if it is still available. If not, clean up the clone instead. */ | ||
| #usingInput(fn) { | ||
| const input = this.#inputRef.deref(); | ||
| const input = this.#input; | ||
| if (!input) | ||
@@ -182,0 +192,0 @@ return this.remove(); |
| { | ||
| "name": "@github/text-expander-element", | ||
| "version": "2.7.1", | ||
| "version": "2.7.2", | ||
| "description": "Activates a suggestion menu to expand text snippets as you type.", | ||
@@ -33,3 +33,3 @@ "repository": "github/text-expander-element", | ||
| "@github/combobox-nav": "^2.0.2", | ||
| "dom-input-range": "^1.1.6" | ||
| "dom-input-range": "^1.2.0" | ||
| }, | ||
@@ -47,3 +47,3 @@ "devDependencies": { | ||
| "karma-mocha-reporter": "^2.2.5", | ||
| "mocha": "^8.3.2", | ||
| "mocha": "^10.7.3", | ||
| "rollup": "^2.45.1", | ||
@@ -50,0 +50,0 @@ "rollup-plugin-node-resolve": "^5.2.0", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.71%
78721
- Lines of code
- increased by1.14%
1774
Dependency changes
Updateddom-input-range@^1.2.0