@wavelengthusaf/components 3.3.8 → 3.3.9

package/README.md

@@ -14,6 +14,11 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 3.3.9
+
+- 8/18/2025
+- Updated `WlAutoComplete` and `WlDatePicker` to be able to accept percentages values for width, as well as fixing the transperancy issues with the floating label.
+
 ### 3.3.8
 
 - 8/11/2025

package/dist/cjs/index.cjs

@@ -8396,11 +8396,16 @@ var NestedDataTable = ({ data, columns }) => {
 
 
 
-var InputWrapper = _styledcomponents2.default.div`
+var AutoContainer = _styledcomponents2.default.div`
+  //position: relative;
   position: relative;
   width: ${(props) => props.$inputwidth || "320px"};
   height: ${(props) => props.$inputheight || "51px"};
 `;
+var InputWrapper = _styledcomponents2.default.div`
+  width: 100%;
+  height: 100%;
+`;
 var Label = _styledcomponents2.default.label`
   position: absolute;
   top: 50%;
@@ -8414,8 +8419,8 @@ var Label = _styledcomponents2.default.label`
   background-color: transparent;
 `;
 var Input = _styledcomponents2.default.input`
-  width: inherit;
-  height: inherit;
+  width: 100%; //this must be 100%, as width inherit inherits the litaral experession, not the value
+  height: 100%;
   padding: 0.5rem 0.75rem;
   border: ${(props) => props.$inputBorderStyling || "2px solid #ccc"};
   border-radius: 4px;
@@ -8448,7 +8453,7 @@ var Input = _styledcomponents2.default.input`
   return $focusedLabelColor;
 }};
     transform: translate(0%, -50%) scale(0.8);
-    background: linear-gradient(to bottom, transparent 50%, ${(props) => props.$primary !== null ? props.$primary : "#FFFFFF"} 0%);
+    background: linear-gradient(to bottom, transparent 50%, ${(props) => props.$primary ? props.$primary : "#FFFFFF"} 0%);
   }
 
   &:not(:focus) + ${Label} {
@@ -8458,7 +8463,7 @@ var Input = _styledcomponents2.default.input`
 var DropDownList = _styledcomponents2.default.ul`
   position: absolute;
   z-index: 5;
-  width: ${(props) => props.$inputwidth || "320px"};
+  width: 100%;
   background-color: white;
   border: 1px solid #ccc;
   margin-top: 0px;
@@ -8471,6 +8476,7 @@ var DropDownList = _styledcomponents2.default.ul`
 `;
 var ActiveListItem = _styledcomponents2.default.li`
   position: relative;
+  width: 100%;
   z-index: 9999;
   padding: 10px;
   border-radius: 8px;
@@ -8601,7 +8607,7 @@ var WLAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AutoContainer, { $inputheight: height2, $inputwidth: width2, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper, { id: `${idName}-inputwrapper`, $inputheight: height2, $inputwidth: width2, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Input,
@@ -8716,8 +8722,8 @@ var InputWrapper2 = _styledcomponents2.default.div`
   height: ${(props) => props.$inputheight || "51px"};
 
   input {
-    width: inherit;
-    height: inherit;
+    width: 100%;
+    height: 100%;
     padding: 0.5rem 0.75rem;
     border: ${(props) => props.$inputBorderStyling || "2px solid #ccc"}; //works
     border-radius: 4px;
@@ -8738,7 +8744,7 @@ var InputWrapper2 = _styledcomponents2.default.div`
       padding: 0 5px;
       color: ${(props) => props.$FocusLabelColor || "#4a90e2"};
       transform: translate(0%, -50%) scale(0.8);
-      background: linear-gradient(to bottom, transparent 50%, ${(props) => props.$inputBackGroundColor !== null ? props.$inputBackGroundColor : "#FFFFFF"} 0%);
+      background: linear-gradient(to bottom, transparent 50%, ${(props) => props.$inputBackGroundColor ? props.$inputBackGroundColor : "#FFFFFF"} 0%);
     }
 
     &:not(:focus) + ${Label2} {