@wavelengthusaf/components 4.1.2 → 4.1.3

package/README.md

@@ -14,6 +14,16 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 4.1.3
+
+- 11/24/2025
+- Added a prop: `onBlurCallback` to `WavelengthAutoComplete`, `WavelengthInput`, and `WavelengthDatePicker` so that `onBlur` can be handled with a user defined callback.
+
+### 4.1.2
+
+- 11/12/2025
+- Modified `WavelengthAutoComplete` to expose `placeholder` prop to allow injecting a default value
+
 ### 4.1.1 
 
 - 10/27/2025

package/dist/cjs/index.cjs

@@ -6748,6 +6748,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
     label,
     onChange,
     style: style3,
+    onBlurCallback,
     ...rest
   }, ref) => {
     const internalRef = _react.useRef.call(void 0, null);
@@ -6828,9 +6829,21 @@ var WavelengthInput = _react.forwardRef.call(void 0,
     ]);
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
-      if (!el || !onChange) return;
+      if (!el || !onBlurCallback) return;
       const handler = (e) => {
         const input = _optionalChain([el, 'access', _42 => _42.shadowRoot, 'optionalAccess', _43 => _43.querySelector, 'call', _44 => _44("input")]);
+        if (input) {
+          onBlurCallback();
+        }
+      };
+      el.addEventListener("blur", handler);
+      return () => el.removeEventListener("blur", handler);
+    }, [onBlurCallback]);
+    _react.useEffect.call(void 0, () => {
+      const el = internalRef.current;
+      if (!el || !onChange) return;
+      const handler = (e) => {
+        const input = _optionalChain([el, 'access', _45 => _45.shadowRoot, 'optionalAccess', _46 => _46.querySelector, 'call', _47 => _47("input")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -7033,7 +7046,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', _45 => _45[0], 'optionalAccess', _46 => _46.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _48 => _48[0], 'optionalAccess', _49 => _49.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);
@@ -7187,7 +7200,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _47 => _47.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', _48 => _48.map, 'call', _49 => _49((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _50 => _50.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', _51 => _51.map, 'call', _52 => _52((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,
       {
@@ -7433,7 +7446,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _50 => _50.Details, 'optionalAccess', _51 => _51.fileObjects, 'access', _52 => _52.sort, 'call', _53 => _53((c, d) => {
+        (item) => _optionalChain([item, 'access', _53 => _53.Details, 'optionalAccess', _54 => _54.fileObjects, 'access', _55 => _55.sort, 'call', _56 => _56((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -7494,24 +7507,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', _54 => _54.Details, 'optionalAccess', _55 => _55.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _56 => _56.Details, 'optionalAccess', _57 => _57.fileObjects, 'access', _58 => _58.map, 'call', _59 => _59((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _59 => _59.Details, 'optionalAccess', _60 => _60.fileObjects, 'access', _61 => _61.map, 'call', _62 => _62((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', _60 => _60.Details, 'optionalAccess', _61 => _61.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.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', _62 => _62.Details, 'optionalAccess', _63 => _63.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _64 => _64.Details, 'optionalAccess', _65 => _65.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', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _68 => _68.Details, 'optionalAccess', _69 => _69.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _70 => _70.map, 'call', _71 => _71((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _73 => _73.map, 'call', _74 => _74((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" }),
@@ -7631,9 +7644,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', _72 => _72.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', _75 => _75.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', _73 => _73.Details, 'optionalAccess', _74 => _74[columnKey]]);
+    const value = _optionalChain([item, 'access', _76 => _76.Details, 'optionalAccess', _77 => _77[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}`);
@@ -7643,7 +7656,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', _75 => _75.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', _76 => _76.map, 'call', _77 => _77((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _78 => _78.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', _79 => _79.map, 'call', _80 => _80((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) => {
@@ -7791,12 +7804,13 @@ var WavelengthAutoComplete = ({
   focusedLabelColor,
   id,
   name,
-  placeholder
+  placeholder,
+  onBlurCallback
 }) => {
   const inputRef = _react.useRef.call(void 0, null);
   const listRef = _react.useRef.call(void 0, null);
   const noItemListRef = _react.useRef.call(void 0, null);
-  const [inputValue, setInputValue] = _react.useState.call(void 0, _nullishCoalesce(placeholder, () => ( data[0])));
+  const [inputValue, setInputValue] = _react.useState.call(void 0, _nullishCoalesce(placeholder, () => ( "")));
   const [suggestions, setSuggestions] = _react.useState.call(void 0, []);
   const [isDropdownVisible, setIsDropdownVisible] = _react.useState.call(void 0, false);
   const suggestHasItems = suggestions.length > 0;
@@ -7902,7 +7916,12 @@ var WavelengthAutoComplete = ({
           onClick: handleInputClick,
           onInput: handleChange,
           onKeyDown: handleKeyDown,
-          onBlur: handleBlur,
+          onBlur: () => {
+            handleBlur();
+            if (onBlurCallback) {
+              onBlurCallback();
+            }
+          },
           placeholder: "",
           autoComplete: "off"
         }
@@ -7995,7 +8014,8 @@ var WavelengthDatePicker = ({
   min,
   max,
   inputTimeType,
-  OnDataChange
+  OnDataChange,
+  onBlurCallback
 }) => {
   const [inputType, setInputType] = _react.useState.call(void 0, "");
   const [value, setValue] = _react.useState.call(void 0, "");
@@ -8061,7 +8081,12 @@ var WavelengthDatePicker = ({
             name,
             "data-testid": "my_wl_date_input",
             onFocus: handleFocus,
-            onBlur: handleBlur,
+            onBlur: () => {
+              handleBlur();
+              if (onBlurCallback) {
+                onBlurCallback();
+              }
+            },
             onChange: handleChange,
             value,
             placeholder: " ",

package/dist/cjs/index.d.cts

@@ -748,6 +748,7 @@ interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement
     label?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     style?: StyleProp;
+    onBlurCallback?: () => void;
 }
 declare const WavelengthInput: React__default.ForwardRefExoticComponent<WavelengthInputProps & React__default.RefAttributes<HTMLElement & {
     validate?: () => boolean;
@@ -846,9 +847,10 @@ interface AutocompleteProps {
     id?: string;
     name?: string;
     placeholder?: string;
+    onBlurCallback?: () => void;
 }
 declare const WavelengthAutoComplete: {
-    ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, focusedLabelColor, id, name, placeholder, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+    ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, focusedLabelColor, id, name, placeholder, onBlurCallback, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -868,9 +870,10 @@ interface DateInputProps {
     FocusLabelColor?: string;
     id?: string;
     name?: string;
+    onBlurCallback?: () => void;
 }
 declare const WavelengthDatePicker: {
-    ({ id, name, inputBorderStyle, floatLabel, labelColor, inputFocusBorderColor, FocusLabelColor, backgroundColor, height, width, min, max, inputTimeType, OnDataChange, }: DateInputProps): react_jsx_runtime.JSX.Element;
+    ({ id, name, inputBorderStyle, floatLabel, labelColor, inputFocusBorderColor, FocusLabelColor, backgroundColor, height, width, min, max, inputTimeType, OnDataChange, onBlurCallback, }: DateInputProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/esm/index.d.ts

@@ -748,6 +748,7 @@ interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement
     label?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     style?: StyleProp;
+    onBlurCallback?: () => void;
 }
 declare const WavelengthInput: React__default.ForwardRefExoticComponent<WavelengthInputProps & React__default.RefAttributes<HTMLElement & {
     validate?: () => boolean;
@@ -846,9 +847,10 @@ interface AutocompleteProps {
     id?: string;
     name?: string;
     placeholder?: string;
+    onBlurCallback?: () => void;
 }
 declare const WavelengthAutoComplete: {
-    ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, focusedLabelColor, id, name, placeholder, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+    ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, focusedLabelColor, id, name, placeholder, onBlurCallback, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -868,9 +870,10 @@ interface DateInputProps {
     FocusLabelColor?: string;
     id?: string;
     name?: string;
+    onBlurCallback?: () => void;
 }
 declare const WavelengthDatePicker: {
-    ({ id, name, inputBorderStyle, floatLabel, labelColor, inputFocusBorderColor, FocusLabelColor, backgroundColor, height, width, min, max, inputTimeType, OnDataChange, }: DateInputProps): react_jsx_runtime.JSX.Element;
+    ({ id, name, inputBorderStyle, floatLabel, labelColor, inputFocusBorderColor, FocusLabelColor, backgroundColor, height, width, min, max, inputTimeType, OnDataChange, onBlurCallback, }: DateInputProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/esm/index.js

@@ -6748,6 +6748,7 @@ var WavelengthInput = forwardRef(
     label,
     onChange,
     style: style3,
+    onBlurCallback,
     ...rest
   }, ref) => {
     const internalRef = useRef8(null);
@@ -6826,6 +6827,18 @@ var WavelengthInput = forwardRef(
       label,
       disabled
     ]);
+    useEffect9(() => {
+      const el = internalRef.current;
+      if (!el || !onBlurCallback) return;
+      const handler = (e) => {
+        const input = el.shadowRoot?.querySelector("input");
+        if (input) {
+          onBlurCallback();
+        }
+      };
+      el.addEventListener("blur", handler);
+      return () => el.removeEventListener("blur", handler);
+    }, [onBlurCallback]);
     useEffect9(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
@@ -7791,12 +7804,13 @@ var WavelengthAutoComplete = ({
   focusedLabelColor,
   id,
   name,
-  placeholder
+  placeholder,
+  onBlurCallback
 }) => {
   const inputRef = useRef11(null);
   const listRef = useRef11(null);
   const noItemListRef = useRef11(null);
-  const [inputValue, setInputValue] = useState12(placeholder ?? data[0]);
+  const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
   const suggestHasItems = suggestions.length > 0;
@@ -7902,7 +7916,12 @@ var WavelengthAutoComplete = ({
           onClick: handleInputClick,
           onInput: handleChange,
           onKeyDown: handleKeyDown,
-          onBlur: handleBlur,
+          onBlur: () => {
+            handleBlur();
+            if (onBlurCallback) {
+              onBlurCallback();
+            }
+          },
           placeholder: "",
           autoComplete: "off"
         }
@@ -7995,7 +8014,8 @@ var WavelengthDatePicker = ({
   min,
   max,
   inputTimeType,
-  OnDataChange
+  OnDataChange,
+  onBlurCallback
 }) => {
   const [inputType, setInputType] = useState13("");
   const [value, setValue] = useState13("");
@@ -8061,7 +8081,12 @@ var WavelengthDatePicker = ({
             name,
             "data-testid": "my_wl_date_input",
             onFocus: handleFocus,
-            onBlur: handleBlur,
+            onBlur: () => {
+              handleBlur();
+              if (onBlurCallback) {
+                onBlurCallback();
+              }
+            },
             onChange: handleChange,
             value,
             placeholder: " ",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",