@ni/spright-components 6.14.3 → 6.14.4

package/dist/custom-elements.json

@@ -210,6 +210,13 @@
           "description": "A Spright component for composing and sending a chat message",
           "name": "ChatInput",
           "members": [
+            {
+              "kind": "field",
+              "name": "fieldSizingSupported",
+              "privacy": "private",
+              "static": true,
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -335,6 +342,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "adjustTextAreaHeight",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "updateScrollbarWidth",

package/dist/esm/chat/input/index.d.ts

@@ -18,6 +18,7 @@ declare const ChatInput_base: (abstract new (...args: any[]) => {
  * A Spright component for composing and sending a chat message
  */
 export declare class ChatInput extends ChatInput_base {
+    private static readonly fieldSizingSupported;
     placeholder?: string;
     sendButtonLabel?: string;
     stopButtonLabel?: string;
@@ -78,6 +79,7 @@ export declare class ChatInput extends ChatInput_base {
     private resetInput;
     private onResize;
     private queueUpdateScrollbarWidth;
+    private adjustTextAreaHeight;
     private updateScrollbarWidth;
 }
 export declare const chatInputTag = "spright-chat-input";

package/dist/esm/chat/input/index.js

@@ -46,6 +46,7 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
     textAreaInputHandler() {
         this.value = this.textArea.value;
         this.isInputEmpty = this.shouldDisableSendButton();
+        this.adjustTextAreaHeight();
         this.queueUpdateScrollbarWidth();
     }
     // If a property can affect whether a scrollbar is visible, we need to
@@ -67,6 +68,7 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
         if (this.textArea) {
             this.textArea.value = this.value;
             this.isInputEmpty = this.shouldDisableSendButton();
+            this.adjustTextAreaHeight();
             this.queueUpdateScrollbarWidth();
         }
     }
@@ -77,6 +79,7 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
         super.connectedCallback();
         this.textArea.value = this.value;
         this.isInputEmpty = this.shouldDisableSendButton();
+        this.adjustTextAreaHeight();
         this.resizeObserver = new ResizeObserver(() => this.onResize());
         this.resizeObserver.observe(this);
     }
@@ -118,10 +121,12 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
         this.isInputEmpty = true;
         if (this.textArea) {
             this.textArea.value = '';
+            this.adjustTextAreaHeight();
             this.textArea.focus();
         }
     }
     onResize() {
+        this.adjustTextAreaHeight();
         this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
     }
     queueUpdateScrollbarWidth() {
@@ -133,11 +138,22 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
             DOM.queueUpdate(() => this.updateScrollbarWidth());
         }
     }
+    // Workaround for browsers that do not support the CSS property `field-sizing: content`
+    // See https://github.com/ni/nimble/issues/2902
+    adjustTextAreaHeight() {
+        if (ChatInput.fieldSizingSupported || !this.textArea) {
+            return;
+        }
+        const textArea = this.textArea;
+        textArea.style.height = 'auto';
+        textArea.style.height = `${textArea.scrollHeight}px`;
+    }
     updateScrollbarWidth() {
         this.updateScrollbarWidthQueued = false;
         this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
     }
 }
+ChatInput.fieldSizingSupported = CSS.supports('field-sizing', 'content');
 __decorate([
     attr
 ], ChatInput.prototype, "placeholder", void 0);

package/dist/esm/chat/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/input/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { keyEnter } from '@ni/fast-web-utilities';\nimport { attr, nullableNumberConverter, observable, DOM } from '@ni/fast-element';\nimport { mixinErrorPattern } from '@ni/nimble-components/dist/esm/patterns/error/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ChatInputSendEventDetail } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-input': ChatInput;\n    }\n}\n\n/**\n * A Spright component for composing and sending a chat message\n */\nexport class ChatInput extends mixinErrorPattern(FoundationElement) {\n    @attr\n    public placeholder?: string;\n\n    @attr({ attribute: 'send-button-label' })\n    public sendButtonLabel?: string;\n\n    @attr({ attribute: 'stop-button-label' })\n    public stopButtonLabel?: string;\n\n    @attr\n    public value = '';\n\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    @attr({ attribute: 'maxlength', converter: nullableNumberConverter })\n    public maxLength?: number = -1;\n\n    @attr({ attribute: 'processing', mode: 'boolean' })\n    public processing = false;\n\n    @attr({ attribute: 'send-disabled', mode: 'boolean' })\n    public sendDisabled = false;\n\n    /**\n     * @internal\n     */\n    @observable\n    public textArea?: HTMLTextAreaElement;\n\n    /**\n     * Tracks whether the send button should be disabled based on input value\n     * @internal\n     */\n    @observable\n    public isInputEmpty = true;\n\n    /**\n     * The width of the vertical scrollbar, if displayed.\n     * @internal\n     */\n    @observable\n    public scrollbarWidth = -1;\n\n    private resizeObserver?: ResizeObserver;\n    private updateScrollbarWidthQueued = false;\n\n    /**\n     * @internal\n     */\n    public textAreaKeydownHandler(e: KeyboardEvent): boolean {\n        if (e.key === keyEnter && !e.shiftKey) {\n            if (this.processing) {\n                return false;\n            }\n            this.sendButtonClickHandler();\n            return false;\n        }\n        return true;\n    }\n\n    /**\n     * @internal\n     */\n    public textAreaInputHandler(): void {\n        this.value = this.textArea!.value;\n        this.isInputEmpty = this.shouldDisableSendButton();\n        this.queueUpdateScrollbarWidth();\n    }\n\n    // If a property can affect whether a scrollbar is visible, we need to\n    // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n    // properties that affect size (e.g. height, width, cols, rows), because\n    // we already have a ResizeObserver handling those changes. Also,\n    // a change to errorVisible cannot cause scrollbar visibility to change,\n    // because we always reserve space for the error icon.\n\n    /**\n     * @internal\n     */\n    public placeholderChanged(): void {\n        this.queueUpdateScrollbarWidth();\n    }\n\n    /**\n     * @internal\n     */\n    public valueChanged(): void {\n        if (this.textArea) {\n            this.textArea.value = this.value;\n            this.isInputEmpty = this.shouldDisableSendButton();\n            this.queueUpdateScrollbarWidth();\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.textArea!.value = this.value;\n        this.isInputEmpty = this.shouldDisableSendButton();\n        this.resizeObserver = new ResizeObserver(() => this.onResize());\n        this.resizeObserver.observe(this);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * @internal\n     */\n    public sendButtonClickHandler(): void {\n        if (this.shouldDisableSendButton()) {\n            return;\n        }\n        const eventDetail: ChatInputSendEventDetail = {\n            text: this.textArea!.value\n        };\n        this.resetInput();\n        this.$emit('send', eventDetail);\n    }\n\n    /**\n     * @internal\n     */\n    public stopButtonClickHandler(): void {\n        if (!this.processing) {\n            return;\n        }\n        this.$emit('stop');\n        this.textArea?.blur();\n    }\n\n    private shouldDisableSendButton(): boolean {\n        return this.textArea!.value.length === 0;\n    }\n\n    private resetInput(): void {\n        this.value = '';\n        this.isInputEmpty = true;\n        if (this.textArea) {\n            this.textArea.value = '';\n            this.textArea.focus();\n        }\n    }\n\n    private onResize(): void {\n        this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n    }\n\n    private queueUpdateScrollbarWidth(): void {\n        if (!this.$fastController.isConnected) {\n            return;\n        }\n        if (!this.updateScrollbarWidthQueued) {\n            this.updateScrollbarWidthQueued = true;\n            DOM.queueUpdate(() => this.updateScrollbarWidth());\n        }\n    }\n\n    private updateScrollbarWidth(): void {\n        this.updateScrollbarWidthQueued = false;\n        this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n    }\n}\n\nconst sprightChatInput = ChatInput.compose({\n    baseName: 'chat-input',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());\nexport const chatInputTag = 'spright-chat-input';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/input/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { keyEnter } from '@ni/fast-web-utilities';\nimport { attr, nullableNumberConverter, observable, DOM } from '@ni/fast-element';\nimport { mixinErrorPattern } from '@ni/nimble-components/dist/esm/patterns/error/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ChatInputSendEventDetail } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-input': ChatInput;\n    }\n}\n\n/**\n * A Spright component for composing and sending a chat message\n */\nexport class ChatInput extends mixinErrorPattern(FoundationElement) {\n    private static readonly fieldSizingSupported = CSS.supports(\n        'field-sizing',\n        'content'\n    );\n\n    @attr\n    public placeholder?: string;\n\n    @attr({ attribute: 'send-button-label' })\n    public sendButtonLabel?: string;\n\n    @attr({ attribute: 'stop-button-label' })\n    public stopButtonLabel?: string;\n\n    @attr\n    public value = '';\n\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    @attr({ attribute: 'maxlength', converter: nullableNumberConverter })\n    public maxLength?: number = -1;\n\n    @attr({ attribute: 'processing', mode: 'boolean' })\n    public processing = false;\n\n    @attr({ attribute: 'send-disabled', mode: 'boolean' })\n    public sendDisabled = false;\n\n    /**\n     * @internal\n     */\n    @observable\n    public textArea?: HTMLTextAreaElement;\n\n    /**\n     * Tracks whether the send button should be disabled based on input value\n     * @internal\n     */\n    @observable\n    public isInputEmpty = true;\n\n    /**\n     * The width of the vertical scrollbar, if displayed.\n     * @internal\n     */\n    @observable\n    public scrollbarWidth = -1;\n\n    private resizeObserver?: ResizeObserver;\n    private updateScrollbarWidthQueued = false;\n\n    /**\n     * @internal\n     */\n    public textAreaKeydownHandler(e: KeyboardEvent): boolean {\n        if (e.key === keyEnter && !e.shiftKey) {\n            if (this.processing) {\n                return false;\n            }\n            this.sendButtonClickHandler();\n            return false;\n        }\n        return true;\n    }\n\n    /**\n     * @internal\n     */\n    public textAreaInputHandler(): void {\n        this.value = this.textArea!.value;\n        this.isInputEmpty = this.shouldDisableSendButton();\n        this.adjustTextAreaHeight();\n        this.queueUpdateScrollbarWidth();\n    }\n\n    // If a property can affect whether a scrollbar is visible, we need to\n    // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n    // properties that affect size (e.g. height, width, cols, rows), because\n    // we already have a ResizeObserver handling those changes. Also,\n    // a change to errorVisible cannot cause scrollbar visibility to change,\n    // because we always reserve space for the error icon.\n\n    /**\n     * @internal\n     */\n    public placeholderChanged(): void {\n        this.queueUpdateScrollbarWidth();\n    }\n\n    /**\n     * @internal\n     */\n    public valueChanged(): void {\n        if (this.textArea) {\n            this.textArea.value = this.value;\n            this.isInputEmpty = this.shouldDisableSendButton();\n            this.adjustTextAreaHeight();\n            this.queueUpdateScrollbarWidth();\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.textArea!.value = this.value;\n        this.isInputEmpty = this.shouldDisableSendButton();\n        this.adjustTextAreaHeight();\n        this.resizeObserver = new ResizeObserver(() => this.onResize());\n        this.resizeObserver.observe(this);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * @internal\n     */\n    public sendButtonClickHandler(): void {\n        if (this.shouldDisableSendButton()) {\n            return;\n        }\n        const eventDetail: ChatInputSendEventDetail = {\n            text: this.textArea!.value\n        };\n        this.resetInput();\n        this.$emit('send', eventDetail);\n    }\n\n    /**\n     * @internal\n     */\n    public stopButtonClickHandler(): void {\n        if (!this.processing) {\n            return;\n        }\n        this.$emit('stop');\n        this.textArea?.blur();\n    }\n\n    private shouldDisableSendButton(): boolean {\n        return this.textArea!.value.length === 0;\n    }\n\n    private resetInput(): void {\n        this.value = '';\n        this.isInputEmpty = true;\n        if (this.textArea) {\n            this.textArea.value = '';\n            this.adjustTextAreaHeight();\n            this.textArea.focus();\n        }\n    }\n\n    private onResize(): void {\n        this.adjustTextAreaHeight();\n        this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n    }\n\n    private queueUpdateScrollbarWidth(): void {\n        if (!this.$fastController.isConnected) {\n            return;\n        }\n        if (!this.updateScrollbarWidthQueued) {\n            this.updateScrollbarWidthQueued = true;\n            DOM.queueUpdate(() => this.updateScrollbarWidth());\n        }\n    }\n\n    // Workaround for browsers that do not support the CSS property `field-sizing: content`\n    // See https://github.com/ni/nimble/issues/2902\n    private adjustTextAreaHeight(): void {\n        if (ChatInput.fieldSizingSupported || !this.textArea) {\n            return;\n        }\n        const textArea = this.textArea;\n        textArea.style.height = 'auto';\n        textArea.style.height = `${textArea.scrollHeight}px`;\n    }\n\n    private updateScrollbarWidth(): void {\n        this.updateScrollbarWidthQueued = false;\n        this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n    }\n}\n\nconst sprightChatInput = ChatInput.compose({\n    baseName: 'chat-input',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());\nexport const chatInputTag = 'spright-chat-input';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-components",
-  "version": "6.14.3",
+  "version": "6.14.4",
   "description": "NI Spright Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",