@fluid-topics/ft-text-field - npm Package Compare versions

Comparing version 1.1.43 to 1.1.44

build/ft-text-field.d.ts

@@ -19,2 +19,3 @@ import { PropertyValues } from "lit";
     error: boolean;
+    fixedMenuPosition: boolean;
     prefix: string | null;
@@ -30,3 +31,2 @@ icon?: string;
     hidePassword: boolean;
-    suggestionsOnTop: boolean;
     hideSuggestions: boolean;
@@ -33,0 +33,0 @@ visibleSuggestions: FtTextFieldSuggestion[];

build/ft-text-field.js

@@ -17,2 +17,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { styles } from "./ft-text-field.styles";
+import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
 class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
@@ -26,2 +27,3 @@ constructor() {
         this.error = false;
+        this.fixedMenuPosition = false;
         this.prefix = null;
@@ -34,3 +36,2 @@ this.passwordHiddenIcon = FtIcons.EYE_SLASH;
         this.hidePassword = true;
-        this.suggestionsOnTop = false;
         this.hideSuggestions = false;
@@ -72,2 +73,3 @@ this.visibleSuggestions = [];
             "ft-text-field--in-error": this.error,
+            "ft-text-field--fixed": this.fixedMenuPosition,
             "ft-text-field--with-prefix": !!this.prefix,
@@ -110,3 +112,3 @@ "ft-text-field--hide-suggestions": this.visibleSuggestions.length === 0 || this.hideSuggestions,
                     </div>
-                    <div class="ft-text-field--suggestions ${this.suggestionsOnTop ? "ft-text-field--suggestions-on-top" : ""}"
+                    <div class="ft-text-field--suggestions"
                          @suggestion-selected=${this.onSuggestionSelected}>
@@ -165,10 +167,10 @@ <slot @slotchange=${() => this.filterSuggestionsIfNeeded()}></slot>
     contentAvailableCallback(props) {
-        var _a, _b;
         super.contentAvailableCallback(props);
         if (props.has("focused") && !this.hideSuggestions && this.visibleSuggestions.length > 0) {
-            const rect = (_a = this.input) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const suggestRect = (_b = this.suggestionsContainer) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            if (rect && suggestRect) {
-                this.suggestionsOnTop = rect.bottom + suggestRect.height > window.innerHeight && rect.top - suggestRect.height > 0;
-            }
+            this.suggestionsContainer.style.width = this.mainPanel.getBoundingClientRect().width + "px";
+            computeOffsetPosition(this.mainPanel, this.suggestionsContainer, "bottom")
+                .then(({ x, y }) => {
+                this.suggestionsContainer.style.left = `${x}px`;
+                this.suggestionsContainer.style.top = `${y}px`;
+            });
         }
@@ -268,2 +270,5 @@ }
 __decorate([
+    property({ type: Boolean })
+], FtTextField.prototype, "fixedMenuPosition", void 0);
+__decorate([
     property()
@@ -300,5 +305,2 @@ ], FtTextField.prototype, "prefix", void 0);
     state()
-], FtTextField.prototype, "suggestionsOnTop", void 0);
-__decorate([
-    state()
 ], FtTextField.prototype, "hideSuggestions", void 0);
@@ -305,0 +307,0 @@ __decorate([

build/ft-text-field.properties.d.ts

@@ -8,2 +8,3 @@ export interface FtTextFieldProperties {
     error?: boolean;
+    fixedMenuPosition?: boolean;
     prefix?: string | null;
@@ -10,0 +11,0 @@ icon?: string;

build/ft-text-field.styles.js

@@ -152,4 +152,2 @@ import { css } from "lit";
         position: absolute;
-        left: 0;
-        right: 0;
         z-index: ${FtTextFieldCssVariables.floatingZIndex};
@@ -165,10 +163,6 @@ background: ${FtTextFieldCssVariables.colorSurface};
 
-    .ft-text-field--suggestions:not(.ft-text-field--suggestions-on-top) {
-        top: 100%;
+    .ft-text-field--fixed .ft-text-field--suggestions {
+        position: fixed;
     }
 
-    .ft-text-field--suggestions.ft-text-field--suggestions-on-top {
-        bottom: 100%;
-    }
-
     .ft-text-field:not(.ft-text-field--hide-suggestions):focus-within .ft-text-field--suggestions {
@@ -175,0 +169,0 @@ display: flex;

package.json

 {
   "name": "@fluid-topics/ft-text-field",
-  "version": "1.1.43",
+  "version": "1.1.44",
   "description": "A fluidtopics text field",
@@ -22,10 +22,10 @@ "keywords": [
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.1.43",
-    "@fluid-topics/ft-input-label": "1.1.43",
-    "@fluid-topics/ft-ripple": "1.1.43",
-    "@fluid-topics/ft-typography": "1.1.43",
-    "@fluid-topics/ft-wc-utils": "1.1.43",
+    "@fluid-topics/ft-icon": "1.1.44",
+    "@fluid-topics/ft-input-label": "1.1.44",
+    "@fluid-topics/ft-ripple": "1.1.44",
+    "@fluid-topics/ft-typography": "1.1.44",
+    "@fluid-topics/ft-wc-utils": "1.1.44",
     "lit": "3.1.0"
   },
-  "gitHead": "c6f6bcb506f87c05a46c67d364abc285eec41894"
+  "gitHead": "338d6b90cd29912af999509fb4d399e13a93e54d"
 }

New alerts

License Policy Violation

License

This 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

License

This 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

432854

increased by2.89%

Lines of code

3421

increased by1.12%

Dependency changes

• + Added@fluid-topics/ft-icon@1.1.44(transitive)

• + Added@fluid-topics/ft-input-label@1.1.44(transitive)

• + Added@fluid-topics/ft-ripple@1.1.44(transitive)

• + Added@fluid-topics/ft-typography@1.1.44(transitive)

• + Added@fluid-topics/ft-wc-utils@1.1.44(transitive)

• + Added@fluid-topics/public-api@1.0.61(transitive)

• - Removed@fluid-topics/ft-icon@1.1.43(transitive)

• - Removed@fluid-topics/ft-input-label@1.1.43(transitive)

• - Removed@fluid-topics/ft-ripple@1.1.43(transitive)

• - Removed@fluid-topics/ft-typography@1.1.43(transitive)

• - Removed@fluid-topics/ft-wc-utils@1.1.43(transitive)

• - Removed@fluid-topics/public-api@1.0.60(transitive)

• Updated@fluid-topics/ft-icon@1.1.44

• Updated@fluid-topics/ft-input-label@1.1.44

• Updated@fluid-topics/ft-ripple@1.1.44

• Updated@fluid-topics/ft-typography@1.1.44

• Updated@fluid-topics/ft-wc-utils@1.1.44