@wavelengthusaf/components 3.3.4 → 3.3.6

package/README.md

@@ -14,6 +14,16 @@ 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
+- Fixed two bugs for `WavelengthButton`. One was causing the button to remain clickable when disabled, and the other was causing it to double-click.
+
 ### 3.3.4
 
 - 8/07/2025

package/dist/cjs/index.cjs

@@ -1421,10 +1421,12 @@ var WavelengthButton = class extends HTMLElement {
     shadow.appendChild(buttonTemplate.content.cloneNode(true));
     this.button = shadow.querySelector("button");
     this.button.addEventListener("click", (event) => {
-      this.handleRipple(event);
-      if (!this.getAttribute("href")) {
-        this.dispatchEvent(new MouseEvent("click", { bubbles: true, composed: true }));
+      if (this.button.disabled || this.hasAttribute("disabled")) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return;
       }
+      this.handleRipple(event);
     });
   }
   static get observedAttributes() {
@@ -2412,16 +2414,22 @@ var WavelengthButton2 = ({
   ...rest
 }) => {
   const ref = _react.useRef.call(void 0, null);
+  const latestOnClick = _react.useRef.call(void 0, );
+  _react.useEffect.call(void 0, () => {
+    latestOnClick.current = onClick;
+  }, [onClick]);
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
     const setAttr = (name, value) => {
-      if (value !== void 0) {
-        if (typeof value === "boolean") {
-          value ? el.setAttribute(name, "") : el.removeAttribute(name);
-        } else {
-          el.setAttribute(name, value);
-        }
+      if (value === void 0 || value === null || value === false) {
+        el.removeAttribute(name);
+        return;
+      }
+      if (typeof value === "boolean") {
+        el.setAttribute(name, "");
+      } else {
+        el.setAttribute(name, value);
       }
     };
     setAttr("variant", variant);
@@ -2439,12 +2447,22 @@ var WavelengthButton2 = ({
     setAttr("box-shadow", boxShadow);
     if (disabled) el.setAttribute("disabled", "");
     else el.removeAttribute("disabled");
+  }, [variant, size, height2, width2, margin2, padding2, colorOne, colorTwo, fontSize, borderRadius2, disabled, href, target, boxShadow]);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
     const handleClick = (e) => {
-      _optionalChain([onClick, 'optionalCall', _25 => _25(e)]);
+      if (el.hasAttribute("disabled")) return;
+      const fn = latestOnClick.current;
+      if (fn) {
+        fn(e);
+      }
     };
     el.addEventListener("click", handleClick);
-    return () => el.removeEventListener("click", handleClick);
-  }, [variant, size, height2, width2, margin2, padding2, colorOne, colorTwo, fontSize, borderRadius2, disabled, href, onClick, boxShadow, target]);
+    return () => {
+      el.removeEventListener("click", handleClick);
+    };
+  }, []);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-button", { ref, className, style: style3, ...rest, children });
 };
 
@@ -5688,7 +5706,7 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
           openSections[section.title] ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowDownRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowRightRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h6", sx: { fontSize: 16, color: txtColor ? txtColor : palette2.secondary }, children: section.title })
         ] }),
-        _optionalChain([section, 'access', _26 => _26.subsections, 'optionalAccess', _27 => _27.length]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Collapse2.default, { in: openSections[section.title], timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "div", disablePadding: true, sx: { paddingLeft: 4 }, children: section.subsections.map((subsection, subIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
+        _optionalChain([section, 'access', _25 => _25.subsections, 'optionalAccess', _26 => _26.length]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Collapse2.default, { in: openSections[section.title], timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "div", disablePadding: true, sx: { paddingLeft: 4 }, children: section.subsections.map((subsection, subIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _Typography2.default,
             {
@@ -5699,7 +5717,7 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
                 paddingLeft: 0.75,
                 color: labelColor ? labelColor : palette2.secondary
               },
-              children: _optionalChain([subsection, 'access', _28 => _28.title, 'optionalAccess', _29 => _29.toUpperCase, 'call', _30 => _30()])
+              children: _optionalChain([subsection, 'access', _27 => _27.title, 'optionalAccess', _28 => _28.toUpperCase, 'call', _29 => _29()])
             }
           ),
           subsection.items && subsection.items.map((item, itemIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5929,7 +5947,7 @@ function WavelengthCommentDisplay(props) {
             {
               onClick: (e) => {
                 setSelected(!selected);
-                _optionalChain([props, 'access', _31 => _31.onClick, 'optionalCall', _32 => _32(e)]);
+                _optionalChain([props, 'access', _30 => _30.onClick, 'optionalCall', _31 => _31(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
@@ -5940,7 +5958,7 @@ function WavelengthCommentDisplay(props) {
             {
               onClick: (e) => {
                 setSelected(!selected);
-                _optionalChain([props, 'access', _33 => _33.onClick, 'optionalCall', _34 => _34(e)]);
+                _optionalChain([props, 'access', _32 => _32.onClick, 'optionalCall', _33 => _33(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
@@ -6483,8 +6501,8 @@ function WavelengthConfirmationModal(props) {
         overflow: "scroll"
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.title]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _37 => _37.textObj, 'optionalAccess', _38 => _38.dialog]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _34 => _34.textObj, 'optionalAccess', _35 => _35.title]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _36 => _36.textObj, 'optionalAccess', _37 => _37.dialog]) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
           props.cancelButton,
           props.submitButton
@@ -6505,11 +6523,11 @@ function WavelengthContentModal(props) {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _39 => _39.textObj, 'optionalAccess', _40 => _40.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _38 => _38.textObj, 'optionalAccess', _39 => _39.title]) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) }) })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _41 => _41.textObj, 'optionalAccess', _42 => _42.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _43 => _43.textObj, 'optionalAccess', _44 => _44.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _40 => _40.textObj, 'optionalAccess', _41 => _41.dialog]) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _42 => _42.textObj, 'optionalAccess', _43 => _43.purpose]) }) })
   ] });
 }
 
@@ -6723,7 +6741,7 @@ function WavelengthDropdown({
       borderBottomRightRadius: "8px",
       borderTopRightRadius: "0px",
       borderTopLeftRadius: "0px",
-      boxShadow: _optionalChain([menuSx, 'optionalAccess', _45 => _45.boxShadow]),
+      boxShadow: _optionalChain([menuSx, 'optionalAccess', _44 => _44.boxShadow]),
       width: myMenusx.width,
       backgroundColor: `${myMenusx.backgroundColor}`
     },
@@ -7473,7 +7491,7 @@ var WavelengthInput2 = _react.forwardRef.call(void 0,
     const internalRef = _react.useRef.call(void 0, null);
     _react.useImperativeHandle.call(void 0, ref, () => ({
       ...internalRef.current,
-      validate: () => _optionalChain([internalRef, 'access', _46 => _46.current, 'optionalAccess', _47 => _47.validate, 'optionalCall', _48 => _48(true)])
+      validate: () => _optionalChain([internalRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.validate, 'optionalCall', _47 => _47(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -7549,7 +7567,7 @@ var WavelengthInput2 = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _49 => _49.shadowRoot, 'optionalAccess', _50 => _50.querySelector, 'call', _51 => _51("input")]);
+        const input = _optionalChain([el, 'access', _48 => _48.shadowRoot, 'optionalAccess', _49 => _49.querySelector, 'call', _50 => _50("input")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -7749,7 +7767,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
   const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
   const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
-  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _52 => _52[0], 'optionalAccess', _53 => _53.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _51 => _51[0], 'optionalAccess', _52 => _52.key]) || "");
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7903,7 +7921,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _54 => _54.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _55 => _55.map, 'call', _56 => _56((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _53 => _53.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _54 => _54.map, 'call', _55 => _55((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledInput,
       {
@@ -8148,7 +8166,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.fileObjects, 'access', _59 => _59.sort, 'call', _60 => _60((c, d) => {
+        (item) => _optionalChain([item, 'access', _56 => _56.Details, 'optionalAccess', _57 => _57.fileObjects, 'access', _58 => _58.sort, 'call', _59 => _59((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -8209,24 +8227,24 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => _optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.fileObjects, 'access', _65 => _65.map, 'call', _66 => _66((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _60 => _60.Details, 'optionalAccess', _61 => _61.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _62 => _62.Details, 'optionalAccess', _63 => _63.fileObjects, 'access', _64 => _64.map, 'call', _65 => _65((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "path",
         {
           d: "M8.5 12L3.5 7L4.9 5.55L7.5 8.15V0H9.5V8.15L12.1 5.55L13.5 7L8.5 12ZM2.5 16C1.95 16 1.47917 15.8042 1.0875 15.4125C0.695833 15.0208 0.5 14.55 0.5 14V11H2.5V14H14.5V11H16.5V14C16.5 14.55 16.3042 15.0208 15.9125 15.4125C15.5208 15.8042 15.05 16 14.5 16H2.5Z",
           fill: "#1C1B1F"
         }
-      ) }) }) }, `td-${_optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}-${fileItem.id}`),
       SubDataColumns.map((column) => {
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _68 => _68.Details, 'optionalAccess', _69 => _69.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _70 => _70.Details, 'optionalAccess', _71 => _71.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _75 => _75.Details, 'optionalAccess', _76 => _76.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _72 => _72.Details, 'optionalAccess', _73 => _73.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _74 => _74.Details, 'optionalAccess', _75 => _75.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _77 => _77.map, 'call', _78 => _78((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _76 => _76.map, 'call', _77 => _77((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonStylingRow, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
@@ -8345,9 +8363,9 @@ var NestedDataTable = ({ data, columns }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !_optionalChain([data, 'optionalAccess', _79 => _79.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !_optionalChain([data, 'optionalAccess', _78 => _78.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
     const columnKey = trimBeforePeriod(column.key);
-    const value = _optionalChain([item, 'access', _80 => _80.Details, 'optionalAccess', _81 => _81[columnKey]]);
+    const value = _optionalChain([item, 'access', _79 => _79.Details, 'optionalAccess', _80 => _80[columnKey]]);
     console.log("value: ", value);
     if (value !== void 0) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }) }, `Span-${item.id}-${colIndex}`);
@@ -8357,7 +8375,7 @@ var NestedDataTable = ({ data, columns }) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
   ] });
-  const rows = !_optionalChain([data, 'optionalAccess', _82 => _82.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _83 => _83.map, 'call', _84 => _84((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _81 => _81.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _82 => _82.map, 'call', _83 => _83((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrimaryTrRows, { $index: index, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2227" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
@@ -8384,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;
@@ -8402,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;
@@ -8435,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";
@@ -8443,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`
@@ -8460,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;
@@ -8475,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;
@@ -8500,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);
@@ -8587,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,
@@ -8601,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
@@ -8628,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