@wavelengthusaf/components 3.3.5 → 3.3.6

package/README.md

@@ -14,6 +14,11 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 3.3.6
+
+- 8/11/2025
+- Updated `WLAutoComplete` to have the outline styling refactored, the component also features a `id` and `name` prop for form handling. Fixed dropdown visibility issues.
+
 ### 3.3.5
 
 - 8/08/2025

package/dist/cjs/index.cjs

@@ -8402,9 +8402,6 @@ var OuterContainer = _styledcomponents2.default.div`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
-  background-color: ${(props) => props.$primary || "#FFFFFF"};
-  height: calc(${(props) => props.$inputheight || "51px"} * 1.45);
-  width: calc(${(props) => props.$inputwidth || "320px"} * 1.07);
 `;
 var AutoContainer = _styledcomponents2.default.div`
   position: absolute;
@@ -8420,7 +8417,6 @@ var Label = _styledcomponents2.default.label`
   top: 50%;
   left: 10px;
   transform: translateY(-50%);
-  color: ${(props) => props.$primary || "#ccc"};
   font-size: 16px;
   pointer-events: none;
   transition: 0.3s ease all;
@@ -8453,7 +8449,8 @@ var Input = _styledcomponents2.default.input`
   &:focus + ${Label}, &:not(:placeholder-shown) + ${Label} {
     top: 0;
     left: 10px;
-    padding: 0 2px;
+
+    padding: 0 5px;
     color: ${(props) => {
   const { $focusedLabelColor, $dropDownVisible, $suggestBoolean } = props;
   if (!$focusedLabelColor) return "#4a90e2";
@@ -8461,7 +8458,12 @@ var Input = _styledcomponents2.default.input`
   if (!$suggestBoolean) return "#FF0000";
   return $focusedLabelColor;
 }};
-    background-color: ${(props) => props.$primary || "#FFFFFF"};
+    transform: translate(0%, -50%) scale(0.8);
+    background: linear-gradient(to bottom, transparent 50%, white 0%);
+  }
+
+  &:not(:focus) + ${Label} {
+    color: ${(props) => props.$defaultLabelColor || "#ccc"};
   }
 `;
 var DropDownList = _styledcomponents2.default.ul`
@@ -8478,8 +8480,9 @@ var DropDownList = _styledcomponents2.default.ul`
   max-height: 390px; //neccesary for limiting scroll options, limit to 10 per view
 `;
 var ActiveListItem = _styledcomponents2.default.li`
+  position: relative;
+  z-index: 9999;
   padding: 10px;
-  cursor: pointer;
   border-radius: 8px;
   background-color: ${(props) => props.$highlighted ? "#eee" : "white"};
   cursor: pointer;
@@ -8493,6 +8496,8 @@ var ActiveListItem = _styledcomponents2.default.li`
   }
 `;
 var NoHoverListItem = _styledcomponents2.default.li`
+  position: relative;
+  z-index: 9999;
   padding: 10px;
   cursor: pointer;
   background-color: white;
@@ -8518,7 +8523,8 @@ var WLAutoComplete = ({
   autoBackGroundColor,
   labelColor,
   FocusedlabelColor,
-  id
+  id,
+  name
 }) => {
   const inputRef = _react.useRef.call(void 0, null);
   const listRef = _react.useRef.call(void 0, null);
@@ -8605,12 +8611,13 @@ var WLAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: idName, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, OuterContainer, { id: `${idName}-outercontain`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AutoContainer, { id: `${idName}-autocontain`, $primary: autoBackGroundColor, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper, { id: `${idName}-inputwrapper`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, OuterContainer, { id: `${idName}-outercontain`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AutoContainer, { id: `${idName}-autocontain`, $primary: autoBackGroundColor, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper, { id: `${idName}-inputwrapper`, $inputheight: height2, $inputwidth: width2, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Input,
         {
-          id: `${idName}-input`,
+          id: idName,
+          name,
           "data-testid": "InputSearchBar",
           type: "text",
           $primary: autoBackGroundColor,
@@ -8619,16 +8626,18 @@ var WLAutoComplete = ({
           $suggestBoolean: suggestHasItems,
           $dropDownVisible: isDropdownVisible,
           $focusedLabelColor: FocusedlabelColor,
+          $defaultLabelColor: labelColor,
           value: inputValue,
           ref: inputRef,
           onClick: handleInputClick,
           onInput: handleChange,
           onKeyDown: handleKeyDown,
           onBlur: handleBlur,
-          placeholder: ""
+          placeholder: "",
+          autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { id: `${idName}-label`, $primary: labelColor, children: floatLabel })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
     ] }),
     isDropdownVisible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropDownList, { id: `${idName}-droplist`, ref: listRef, $inputwidth: width2, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
       //suggestions length controls showing the suggestions
@@ -8646,7 +8655,7 @@ var WLAutoComplete = ({
         `ActivelistItem-${item}-${index}`
       ))
     ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
-  ] }) }) }) });
+  ] }) }) });
 };
 
 // src/components/inputs/WavelengthInputDatePicketer.tsx