@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/FileUploader.d.ts

@@ -1,9 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import type Input from "./Input.js";
+import type { InputAccInfo } from "./Input.js";
 import type Popover from "./Popover.js";
+import type Tokenizer from "./Tokenizer.js";
 type FileData = {
     fileName: string;
     fileSize: number;
@@ -53,6 +55,8 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
     accept?: string;
     /**
      * If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered.
+     *
+     * **Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.
      * @default false
      * @public
      */
@@ -106,18 +110,55 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
      * @public
      */
     valueState: `${ValueState}`;
+    /**
+     * Defines whether the component is required.
+     * @default false
+     * @public
+     * @since 2.13.0
+     */
+    required: boolean;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     * @since 2.13.0
+     */
+    accessibleName?: string;
+    /**
+     * Receives id(or many ids) of the elements that label the input.
+     * @default undefined
+     * @public
+     * @since 2.13.0
+     */
+    accessibleNameRef?: string;
+    /**
+     * Defines the accessible description of the component.
+     * @default undefined
+     * @public
+     * @since 2.14.0
+     */
+    accessibleDescription?: string;
+    /**
+     * Receives id(or many ids) of the elements that describe the input.
+     * @default undefined
+     * @public
+     * @since 2.14.0
+     */
+    accessibleDescriptionRef?: string;
     /**
      * @private
      */
     focused: boolean;
     /**
-     * By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
+     * This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.
      *
-     * **Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.
-     * Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.
+     * **Note:** For best accessibility experience, set a `tabindex` of "-1" on your interactive element, or it will be set automatically.
+     * This slot is intended for use cases where you want a button-only file uploader.
+     * It is recommended to set `hideInput` property to "true" when using this slot.
+     * Not setting `hideInput` may negatively impact the screen reader users.
      * @public
      */
-    content: Array<HTMLElement>;
+    content: DefaultSlot<HTMLElement>;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
      *
@@ -128,24 +169,39 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
      * @since 1.0.0-rc.9
      * @public
      */
-    valueStateMessage: Array<HTMLElement>;
-    static emptyInput: HTMLInputElement;
+    valueStateMessage: Slot<HTMLElement>;
+    _form: HTMLFormElement;
+    _input: HTMLInputElement;
+    _tokenizer: Tokenizer;
+    _messagePopover: Popover;
+    _selectedFilesNames: Array<string>;
+    _tokenizerOpen: boolean;
     static i18nBundle: I18nBundle;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
     formElementAnchor(): Promise<HTMLElement | undefined>;
     /**
      * @override
      */
     getFocusDomRef(): HTMLElement | undefined;
     get formFormattedValue(): FormData | null;
-    _onmouseover(): void;
-    _onmouseout(): void;
     _onclick(): void;
+    _onNativeInputClick(e: MouseEvent): void;
+    _onmousedown(e: MouseEvent): void;
     _onkeydown(e: KeyboardEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     _ondrag(e: DragEvent): void;
     _ondrop(e: DragEvent): void;
     _onfocusin(): void;
     _onfocusout(): void;
+    get _tokenizerExpanded(): boolean;
+    _onTokenizerKeyUp(e: KeyboardEvent): void;
+    _onTokenizerKeyDown(e: KeyboardEvent): void;
+    _onTokenizerClick(e: MouseEvent): void;
+    _onTokenizerMouseDown(e: MouseEvent): void;
+    _onClearIconClick(e: CustomEvent): void;
+    _openFileBrowser(): void;
+    _clearFileSelection(): void;
     /**
      * FileList of all selected files.
      * @public
@@ -153,8 +209,10 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
      */
     get files(): FileList | null;
     onAfterRendering(): void;
+    get computedValue(): string;
+    get _formWidth(): number;
     _onChange(e: Event): void;
-    _updateValue(files: FileList | null): void;
+    _fileNamesList(files: FileList): Array<string>;
     /**
      * Checks whether all files are below `maxFileSize` (if set),
      * and fires a `file-size-exceed` event if any file exceeds it.
@@ -165,26 +223,20 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
     toggleValueStatePopover(open: boolean): void;
     openValueStatePopover(): void;
     closeValueStatePopover(): void;
-    _getPopover(): Popover;
-    /**
-     * in case when the component is not placed in the DOM, return empty FileList, like native input would do
-     * @private
-     */
-    static get _emptyFilesList(): FileList | null;
-    get browseText(): string;
-    get titleText(): string;
-    get _input(): HTMLInputElement;
+    get accInfo(): InputAccInfo;
+    get inputTitle(): string;
+    get valueHelpTitle(): string;
+    get clearIconTitle(): string;
+    get resolvedPlaceholder(): string;
     get valueStateTextMappings(): Record<string, string>;
     get valueStateText(): string;
     get hasValueState(): boolean;
-    get hasValueStateText(): boolean;
     get shouldDisplayDefaultValueStateMessage(): boolean;
     get shouldOpenValueStateMessagePopover(): boolean;
     /**
      * This method is relevant for sap_horizon theme only
      */
     get _valueStateMessageInputIcon(): string;
-    get ui5Input(): Input | null;
 }
 export default FileUploader;
 export type { FileData, FileUploaderChangeEventDetail, FileUploaderFileSizeExceedEventDetail, };

package/dist/FileUploader.js

@@ -9,12 +9,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, getEffectiveAriaDescriptionText, getAllAccessibleDescriptionRefTexts, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import { FILEUPLOAD_BROWSE, FILEUPLOADER_TITLE, VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, } from "./generated/i18n/i18n-defaults.js";
+import { isUpAlt, isDownAlt, isEnter, isDelete, isF4, isSpace, isRight, isLeft, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { FILEUPLOADER_INPUT_TOOLTIP, FILEUPLOADER_VALUE_HELP_TOOLTIP, FILEUPLOADER_CLEAR_ICON_TOOLTIP, VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, FILEUPLOADER_DEFAULT_PLACEHOLDER, FILEUPLOADER_DEFAULT_MULTIPLE_PLACEHOLDER, FILEUPLOADER_ROLE_DESCRIPTION, FILEUPLOAER_VALUE_MISSING, } from "./generated/i18n/i18n-defaults.js";
 // Template
 import FileUploaderTemplate from "./FileUploaderTemplate.js";
 // Styles
@@ -51,6 +53,8 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         super(...arguments);
         /**
          * If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered.
+         *
+         * **Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.
          * @default false
          * @public
          */
@@ -83,10 +87,31 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
          * @public
          */
         this.valueState = "None";
+        /**
+         * Defines whether the component is required.
+         * @default false
+         * @public
+         * @since 2.13.0
+         */
+        this.required = false;
         /**
          * @private
          */
         this.focused = false;
+        this._selectedFilesNames = [];
+        this._tokenizerOpen = false;
+    }
+    get formValidityMessage() {
+        const validity = this.formValidity;
+        if (validity.valueMissing) {
+            return FileUploader_1.i18nBundle.getText(FILEUPLOAER_VALUE_MISSING);
+        }
+        return "";
+    }
+    get formValidity() {
+        return {
+            valueMissing: this.required && (!this.files || this.files.length === 0),
+        };
     }
     async formElementAnchor() {
         return this.getFocusDomRefAsync();
@@ -95,7 +120,7 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
      * @override
      */
     getFocusDomRef() {
-        return this.content[0];
+        return this._input;
     }
     get formFormattedValue() {
         if (this.files && this.name) {
@@ -107,32 +132,47 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         }
         return null;
     }
-    _onmouseover() {
-        this.content.forEach(item => {
-            item.classList.add("ui5_hovered");
-        });
-    }
-    _onmouseout() {
-        this.content.forEach(item => {
-            item.classList.remove("ui5_hovered");
-        });
-    }
     _onclick() {
         if (this.getFocusDomRef()?.matches(":focus-within")) {
-            this._input.click();
+            this._openFileBrowser();
         }
     }
+    _onNativeInputClick(e) {
+        e.stopPropagation();
+    }
+    _onmousedown(e) {
+        e.preventDefault();
+        this._input.focus();
+    }
     _onkeydown(e) {
+        const firstToken = this._tokenizer?.tokens.find(token => !token.hasAttribute("overflows"));
+        const isToken = e.target.hasAttribute("ui5-token");
+        const isArrowNavigation = this.effectiveDir === "ltr" ? isRight(e) : isLeft(e);
+        if (this.hideInput) {
+            return;
+        }
         if (isEnter(e)) {
-            this._input.click();
             e.preventDefault();
+            this._openFileBrowser();
         }
-    }
-    _onkeyup(e) {
         if (isSpace(e)) {
-            this._input.click();
             e.preventDefault();
         }
+        if (isArrowNavigation && !isToken) {
+            e.preventDefault();
+            firstToken?.focus();
+        }
+    }
+    _onkeyup(e) {
+        if (this.hideInput) {
+            return;
+        }
+        if (isSpace(e) || isF4(e) || isUpAlt(e) || isDownAlt(e)) {
+            this._openFileBrowser();
+        }
+        else if (isDelete(e)) {
+            this._clearFileSelection();
+        }
     }
     _ondrag(e) {
         e.preventDefault();
@@ -150,16 +190,69 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
             return;
         }
         this._input.files = validatedFiles;
-        this._updateValue(validatedFiles);
+        this._selectedFilesNames = this._fileNamesList(files);
+        this.value = this.computedValue;
         this.fireDecoratorEvent("change", {
             files: validatedFiles,
         });
     }
     _onfocusin() {
         this.focused = true;
+        if (this._tokenizer) {
+            this._tokenizer.expanded = true;
+        }
     }
     _onfocusout() {
+        if (this.matches(":focus-within")) {
+            return;
+        }
         this.focused = false;
+        if (this._tokenizer) {
+            this._tokenizer.expanded = this._tokenizer.open;
+        }
+    }
+    get _tokenizerExpanded() {
+        if (!this._tokenizer) {
+            return true;
+        }
+        return this._tokenizer.expanded;
+    }
+    _onTokenizerKeyUp(e) {
+        if (isSpace(e) || isDelete(e)) {
+            e.stopPropagation();
+        }
+    }
+    _onTokenizerKeyDown(e) {
+        const firstToken = this._tokenizer?.tokens.find(token => !token.hasAttribute("overflows"));
+        const isArrowNavigation = this.effectiveDir === "ltr" ? isLeft(e) : isRight(e);
+        if (isEnter(e)) {
+            e.stopPropagation();
+        }
+        if (e.target === firstToken && isArrowNavigation) {
+            this._input.focus();
+            e.preventDefault();
+        }
+    }
+    _onTokenizerClick(e) {
+        e.stopPropagation();
+    }
+    _onTokenizerMouseDown(e) {
+        e.stopPropagation();
+    }
+    _onClearIconClick(e) {
+        e.stopPropagation();
+        this._clearFileSelection();
+    }
+    _openFileBrowser() {
+        this._input.click();
+    }
+    _clearFileSelection() {
+        this._selectedFilesNames = [];
+        this.value = "";
+        this._input.files = new DataTransfer().files;
+        this.fireDecoratorEvent("change", {
+            files: this.files,
+        });
     }
     /**
      * FileList of all selected files.
@@ -170,14 +263,26 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         if (this._input) {
             return this._input.files;
         }
-        return FileUploader_1._emptyFilesList;
+        return null;
     }
     onAfterRendering() {
         if (!this.value) {
             this._input.value = "";
         }
+        this._tokenizerOpen = this._tokenizer ? this._tokenizer.open : false;
+        if (this.hideInput && this.content.length > 0) {
+            this.content.forEach(element => {
+                element.setAttribute("tabindex", "-1");
+            });
+        }
         this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
     }
+    get computedValue() {
+        return this._selectedFilesNames.join(" ");
+    }
+    get _formWidth() {
+        return this._form ? this._form.offsetWidth : 0;
+    }
     _onChange(e) {
         let changedFiles = e.target.files;
         if (changedFiles) {
@@ -186,15 +291,16 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         if (!this.value && !changedFiles?.length) {
             return;
         }
-        this._updateValue(changedFiles);
+        this._selectedFilesNames = this._fileNamesList(changedFiles);
+        this.value = this.computedValue;
         this.fireDecoratorEvent("change", {
             files: changedFiles,
         });
     }
-    _updateValue(files) {
-        this.value = Array.from(files || []).reduce((acc, currFile) => {
-            return `${acc}"${currFile.name}" `;
-        }, "");
+    _fileNamesList(files) {
+        return Array.from(files)
+            .map(file => file.name)
+            .sort((a, b) => a.length - b.length); // workaround for incident #11824
     }
     /**
      * Checks whether all files are below `maxFileSize` (if set),
@@ -234,40 +340,39 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         }
     }
     openValueStatePopover() {
-        const popover = this._getPopover();
-        if (popover) {
-            popover.opener = this;
-            popover.open = true;
+        if (this._messagePopover) {
+            this._messagePopover.opener = this;
+            this._messagePopover.open = true;
         }
     }
     closeValueStatePopover() {
-        const popover = this._getPopover();
-        if (popover) {
-            popover.open = false;
+        if (this._messagePopover) {
+            this._messagePopover.open = false;
         }
     }
-    _getPopover() {
-        return this.shadowRoot.querySelector(".ui5-valuestatemessage-popover");
+    get accInfo() {
+        return {
+            "ariaRoledescription": FileUploader_1.i18nBundle.getText(FILEUPLOADER_ROLE_DESCRIPTION),
+            "ariaRequired": this.required || undefined,
+            "ariaInvalid": this.valueState === ValueState.Negative || undefined,
+            "ariaHasPopup": "dialog",
+            "ariaLabel": getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || undefined,
+            "ariaDescription": getAllAccessibleDescriptionRefTexts(this) || getEffectiveAriaDescriptionText(this) || undefined,
+        };
     }
-    /**
-     * in case when the component is not placed in the DOM, return empty FileList, like native input would do
-     * @private
-     */
-    static get _emptyFilesList() {
-        if (!this.emptyInput) {
-            this.emptyInput = document.createElement("input");
-            this.emptyInput.type = "file";
-        }
-        return this.emptyInput.files;
+    get inputTitle() {
+        return FileUploader_1.i18nBundle.getText(FILEUPLOADER_INPUT_TOOLTIP);
     }
-    get browseText() {
-        return FileUploader_1.i18nBundle.getText(FILEUPLOAD_BROWSE);
+    get valueHelpTitle() {
+        return FileUploader_1.i18nBundle.getText(FILEUPLOADER_VALUE_HELP_TOOLTIP);
     }
-    get titleText() {
-        return FileUploader_1.i18nBundle.getText(FILEUPLOADER_TITLE);
+    get clearIconTitle() {
+        return FileUploader_1.i18nBundle.getText(FILEUPLOADER_CLEAR_ICON_TOOLTIP);
     }
-    get _input() {
-        return (this.shadowRoot.querySelector("input[type=file]") || this.querySelector("input[type=file][data-ui5-form-support]"));
+    get resolvedPlaceholder() {
+        const singlePlaceholder = FileUploader_1.i18nBundle.getText(FILEUPLOADER_DEFAULT_PLACEHOLDER);
+        const multiplePlaceholder = FileUploader_1.i18nBundle.getText(FILEUPLOADER_DEFAULT_MULTIPLE_PLACEHOLDER);
+        return this.placeholder ?? (this.multiple ? multiplePlaceholder : singlePlaceholder);
     }
     get valueStateTextMappings() {
         return {
@@ -283,14 +388,11 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
     get hasValueState() {
         return this.valueState !== ValueState.None;
     }
-    get hasValueStateText() {
-        return this.hasValueState && this.valueState !== ValueState.Positive;
-    }
     get shouldDisplayDefaultValueStateMessage() {
-        return !this.valueStateMessage.length && this.hasValueStateText;
+        return !this.valueStateMessage.length && this.hasValueState;
     }
     get shouldOpenValueStateMessagePopover() {
-        return this.focused && this.hasValueStateText && !this.hideInput;
+        return this.focused && this.hasValueState && !this.hideInput && !this._tokenizer?.open;
     }
     /**
      * This method is relevant for sap_horizon theme only
@@ -304,9 +406,6 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         };
         return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
     }
-    get ui5Input() {
-        return this.shadowRoot.querySelector(".ui5-file-uploader-input");
-    }
 };
 __decorate([
     property()
@@ -335,6 +434,21 @@ __decorate([
 __decorate([
     property()
 ], FileUploader.prototype, "valueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], FileUploader.prototype, "required", void 0);
+__decorate([
+    property()
+], FileUploader.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], FileUploader.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], FileUploader.prototype, "accessibleDescription", void 0);
+__decorate([
+    property()
+], FileUploader.prototype, "accessibleDescriptionRef", void 0);
 __decorate([
     property({ type: Boolean })
 ], FileUploader.prototype, "focused", void 0);
@@ -344,6 +458,24 @@ __decorate([
 __decorate([
     slot()
 ], FileUploader.prototype, "valueStateMessage", void 0);
+__decorate([
+    query(".ui5-file-uploader-form")
+], FileUploader.prototype, "_form", void 0);
+__decorate([
+    query("input[type=file]")
+], FileUploader.prototype, "_input", void 0);
+__decorate([
+    query("[ui5-tokenizer]")
+], FileUploader.prototype, "_tokenizer", void 0);
+__decorate([
+    query(".ui5-valuestatemessage-popover")
+], FileUploader.prototype, "_messagePopover", void 0);
+__decorate([
+    property({ type: Array, noAttribute: true })
+], FileUploader.prototype, "_selectedFilesNames", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], FileUploader.prototype, "_tokenizerOpen", void 0);
 __decorate([
     i18n("@ui5/webcomponents")
 ], FileUploader, "i18nBundle", void 0);