@wavelengthusaf/components 3.3.4 → 3.3.6

package/dist/cjs/index.d.cts

@@ -37,6 +37,8 @@ interface WavelengthButtonProps extends React__default.HTMLAttributes<HTMLElemen
     href?: string;
     target?: "_self" | "_blank" | "_parent" | "_top";
     boxShadow?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
 }
 declare const WavelengthButton: React__default.FC<WavelengthButtonProps>;
 
@@ -658,8 +660,9 @@ interface AutocompleteProps {
     labelColor?: string;
     FocusedlabelColor?: string;
     id?: string;
+    name?: string;
 }
-declare const WLAutoComplete: ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, FocusedlabelColor, id, }: AutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const WLAutoComplete: ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, FocusedlabelColor, id, name, }: AutocompleteProps) => react_jsx_runtime.JSX.Element;
 
 declare const WLInputDatePicker: React.FC;
 

package/dist/esm/index.d.ts

@@ -37,6 +37,8 @@ interface WavelengthButtonProps extends React__default.HTMLAttributes<HTMLElemen
     href?: string;
     target?: "_self" | "_blank" | "_parent" | "_top";
     boxShadow?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
 }
 declare const WavelengthButton: React__default.FC<WavelengthButtonProps>;
 
@@ -658,8 +660,9 @@ interface AutocompleteProps {
     labelColor?: string;
     FocusedlabelColor?: string;
     id?: string;
+    name?: string;
 }
-declare const WLAutoComplete: ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, FocusedlabelColor, id, }: AutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const WLAutoComplete: ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, FocusedlabelColor, id, name, }: AutocompleteProps) => react_jsx_runtime.JSX.Element;
 
 declare const WLInputDatePicker: React.FC;
 

package/dist/esm/index.js

@@ -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 = useRef(null);
+  const latestOnClick = useRef();
+  useEffect(() => {
+    latestOnClick.current = onClick;
+  }, [onClick]);
   useEffect(() => {
     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]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
     const handleClick = (e) => {
-      onClick?.(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__ */ jsx("wavelength-button", { ref, className, style: style3, ...rest, children });
 };
 
@@ -8384,9 +8402,6 @@ var OuterContainer = styled13.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 = styled13.div`
   position: absolute;
@@ -8402,7 +8417,6 @@ var Label = styled13.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 = styled13.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 = styled13.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 = styled13.ul`
@@ -8460,8 +8480,9 @@ var DropDownList = styled13.ul`
   max-height: 390px; //neccesary for limiting scroll options, limit to 10 per view
 `;
 var ActiveListItem = styled13.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 = styled13.li`
   }
 `;
 var NoHoverListItem = styled13.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 = useRef10(null);
   const listRef = useRef10(null);
@@ -8587,12 +8611,13 @@ var WLAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx44(Fragment17, { children: /* @__PURE__ */ jsx44("div", { id: idName, children: /* @__PURE__ */ jsx44(OuterContainer, { id: `${idName}-outercontain`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: /* @__PURE__ */ jsxs33(AutoContainer, { id: `${idName}-autocontain`, $primary: autoBackGroundColor, children: [
-    /* @__PURE__ */ jsxs33(InputWrapper, { id: `${idName}-inputwrapper`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: [
+  return /* @__PURE__ */ jsx44(Fragment17, { children: /* @__PURE__ */ jsx44(OuterContainer, { id: `${idName}-outercontain`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: /* @__PURE__ */ jsxs33(AutoContainer, { id: `${idName}-autocontain`, $primary: autoBackGroundColor, children: [
+    /* @__PURE__ */ jsxs33(InputWrapper, { id: `${idName}-inputwrapper`, $inputheight: height2, $inputwidth: width2, children: [
       /* @__PURE__ */ jsx44(
         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__ */ jsx44(Label, { id: `${idName}-label`, $primary: labelColor, children: floatLabel })
+      /* @__PURE__ */ jsx44(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
     ] }),
     isDropdownVisible && /* @__PURE__ */ jsx44(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__ */ jsx44(NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
-  ] }) }) }) });
+  ] }) }) });
 };
 
 // src/components/inputs/WavelengthInputDatePicketer.tsx