@wavelengthusaf/components 5.0.0 → 5.0.3

package/README.md

@@ -14,6 +14,16 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 5.0.2
+
+- 5/15/2026
+- Added Jest test for `wavelength-sidebar` web component
+
+### 5.0.1
+
+- 5/15/2026
+- Added Jest tests for wavelength-banner web component
+
 ### 4.4.1
 
 - 2/25/2026

package/dist/cjs/index.cjs

@@ -826,115 +826,169 @@ var WavelengthNavBar = ({ items, bgColor, txtColor, hoverColor, height, padding,
 
 
 
-var WavelengthFileDropZone = ({
-  acceptedTypes,
-  maxSize,
-  multiple,
-  dragText,
-  iconSrc,
-  onFilesSelected,
-  hostDisplay,
-  hostWidth,
-  inputDisplay,
-  borderWidth,
-  borderStyle,
-  borderColor,
-  borderRadius,
-  padding,
-  textAlign,
-  backgroundColor,
-  cursor,
-  transition,
-  display,
-  flexDirection,
-  alignItems,
-  gap,
-  borderHoverColor,
-  backgroundHoverColor,
-  borderActiveColor,
-  backgroundActiveColor,
-  contentDisplay,
-  contentFlexDirection,
-  contentAlignItems,
-  contentGap,
-  textColor,
-  fontFamily,
-  fontStyle,
-  fontSize,
-  lineHeight,
-  letterSpacing,
-  iconSize,
-  errorColor,
-  errorFontFamily,
-  errorFontSize,
-  errorMarginTop,
-  style,
-  children,
-  ...rest
-}) => {
-  const ref = _react.useRef.call(void 0, null);
-  _react.useEffect.call(void 0, () => {
-    const el = ref.current;
-    if (!el) return;
-    if (acceptedTypes !== void 0) el.setAttribute("accepted-types", acceptedTypes);
-    else el.removeAttribute("accepted-types");
-    if (maxSize !== void 0) el.setAttribute("max-size", String(maxSize));
-    else el.removeAttribute("max-size");
-    if (dragText !== void 0) el.setAttribute("drag-text", dragText);
-    else el.removeAttribute("drag-text");
-    if (iconSrc !== void 0) el.setAttribute("icon-src", iconSrc);
-    else el.removeAttribute("icon-src");
-    if (multiple) el.setAttribute("multiple", "");
-    else el.removeAttribute("multiple");
-    const handleFilesSelected = (event) => {
-      const customEvent = event;
-      _optionalChain([onFilesSelected, 'optionalCall', _2 => _2(customEvent.detail.files)]);
-    };
-    el.addEventListener("files-selected", handleFilesSelected);
-    return () => {
-      el.removeEventListener("files-selected", handleFilesSelected);
-    };
-  }, [acceptedTypes, maxSize, multiple, dragText, iconSrc, onFilesSelected]);
-  const mergedStyle = {
-    ...style,
-    "--hostDisplay": hostDisplay,
-    "--hostWidth": hostWidth,
-    "--inputDisplay": inputDisplay,
-    "--borderWidth": borderWidth,
-    "--borderStyle": borderStyle,
-    "--borderColor": borderColor,
-    "--borderRadius": borderRadius,
-    "--padding": padding,
-    "--textAlign": textAlign,
-    "--backgroundColor": backgroundColor,
-    "--cursor": cursor,
-    "--transition": transition,
-    "--display": display,
-    "--flexDirection": flexDirection,
-    "--alignItems": alignItems,
-    "--gap": gap,
-    "--borderHoverColor": borderHoverColor,
-    "--backgroundHoverColor": backgroundHoverColor,
-    "--borderActiveColor": borderActiveColor,
-    "--backgroundActiveColor": backgroundActiveColor,
-    "--contentDisplay": contentDisplay,
-    "--contentFlexDirection": contentFlexDirection,
-    "--contentAlignItems": contentAlignItems,
-    "--contentGap": contentGap,
-    "--textColor": textColor,
-    "--fontFamily": fontFamily,
-    "--fontStyle": fontStyle,
-    "--fontSize": fontSize,
-    "--lineHeight": lineHeight,
-    "--letterSpacing": letterSpacing,
-    "--iconSize": iconSize,
-    "--errorColor": errorColor,
-    "--errorFontFamily": errorFontFamily,
-    "--errorFontSize": errorFontSize,
-    "--errorMarginTop": errorMarginTop
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-file-drop-zone", { ref, style: mergedStyle, ...rest, children });
+var setAttribute = (element, attribute, value) => {
+  if (value === void 0 || value === null) {
+    element.removeAttribute(attribute);
+    return;
+  }
+  element.setAttribute(attribute, String(value));
 };
+var WavelengthFileDropZone = _react.forwardRef.call(void 0, 
+  ({
+    acceptedTypes,
+    maxSize,
+    multiple,
+    dragText,
+    iconSrc,
+    width,
+    onFilesSelected,
+    hostDisplay,
+    hostWidth,
+    inputDisplay,
+    borderWidth,
+    borderStyle,
+    borderColor,
+    borderRadius,
+    padding,
+    textAlign,
+    backgroundColor,
+    cursor,
+    transition,
+    display,
+    flexDirection,
+    alignItems,
+    gap,
+    borderHoverColor,
+    backgroundHoverColor,
+    borderActiveColor,
+    backgroundActiveColor,
+    contentDisplay,
+    contentFlexDirection,
+    contentAlignItems,
+    contentGap,
+    textColor,
+    fontFamily,
+    fontStyle,
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    iconSize,
+    errorColor,
+    errorFontFamily,
+    errorFontSize,
+    errorMarginTop,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const elementRef = _react.useRef.call(void 0, null);
+    _react.useImperativeHandle.call(void 0, ref, () => elementRef.current);
+    _react.useEffect.call(void 0, () => {
+      const element = elementRef.current;
+      if (!element) return;
+      setAttribute(element, "accepted-types", acceptedTypes);
+      setAttribute(element, "max-size", maxSize);
+      setAttribute(element, "drag-text", dragText);
+      setAttribute(element, "icon-src", iconSrc);
+      if (multiple) {
+        element.setAttribute("multiple", "");
+      } else {
+        element.removeAttribute("multiple");
+      }
+    }, [acceptedTypes, maxSize, multiple, dragText, iconSrc]);
+    _react.useEffect.call(void 0, () => {
+      const element = elementRef.current;
+      if (!element || !onFilesSelected) return;
+      const handleFilesSelected = (event) => {
+        const customEvent = event;
+        onFilesSelected(customEvent.detail.files);
+      };
+      element.addEventListener("files-selected", handleFilesSelected);
+      return () => element.removeEventListener("files-selected", handleFilesSelected);
+    }, [onFilesSelected]);
+    const mergedStyle = _react.useMemo.call(void 0, 
+      () => ({
+        ...style,
+        "--hostDisplay": hostDisplay,
+        "--hostWidth": _nullishCoalesce(hostWidth, () => ( width)),
+        "--inputDisplay": inputDisplay,
+        "--borderWidth": borderWidth,
+        "--borderStyle": borderStyle,
+        "--borderColor": borderColor,
+        "--borderRadius": borderRadius,
+        "--padding": padding,
+        "--textAlign": textAlign,
+        "--backgroundColor": backgroundColor,
+        "--cursor": cursor,
+        "--transition": transition,
+        "--display": display,
+        "--flexDirection": flexDirection,
+        "--alignItems": alignItems,
+        "--gap": gap,
+        "--borderHoverColor": borderHoverColor,
+        "--backgroundHoverColor": backgroundHoverColor,
+        "--borderActiveColor": borderActiveColor,
+        "--backgroundActiveColor": backgroundActiveColor,
+        "--contentDisplay": contentDisplay,
+        "--contentFlexDirection": contentFlexDirection,
+        "--contentAlignItems": contentAlignItems,
+        "--contentGap": contentGap,
+        "--textColor": textColor,
+        "--fontFamily": fontFamily,
+        "--fontStyle": fontStyle,
+        "--fontSize": fontSize,
+        "--lineHeight": lineHeight,
+        "--letterSpacing": letterSpacing,
+        "--iconSize": iconSize,
+        "--errorColor": errorColor,
+        "--errorFontFamily": errorFontFamily,
+        "--errorFontSize": errorFontSize,
+        "--errorMarginTop": errorMarginTop
+      }),
+      [
+        style,
+        hostDisplay,
+        hostWidth,
+        width,
+        inputDisplay,
+        borderWidth,
+        borderStyle,
+        borderColor,
+        borderRadius,
+        padding,
+        textAlign,
+        backgroundColor,
+        cursor,
+        transition,
+        display,
+        flexDirection,
+        alignItems,
+        gap,
+        borderHoverColor,
+        backgroundHoverColor,
+        borderActiveColor,
+        backgroundActiveColor,
+        contentDisplay,
+        contentFlexDirection,
+        contentAlignItems,
+        contentGap,
+        textColor,
+        fontFamily,
+        fontStyle,
+        fontSize,
+        lineHeight,
+        letterSpacing,
+        iconSize,
+        errorColor,
+        errorFontFamily,
+        errorFontSize,
+        errorMarginTop
+      ]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-file-drop-zone", { ref: elementRef, style: mergedStyle, ...rest, children });
+  }
+);
+WavelengthFileDropZone.displayName = "WavelengthFileDropZone";
 
 // src/components/SnackBar/WavelengthWebSnackbar.tsx
 
@@ -1181,7 +1235,7 @@ var WavelengthBadge = ({
     updateAttribute("text-box-border-radius", textBoxBorderRadius);
     updateAttribute("text-box-hover-border-color", textBoxHoverBorderColor);
     updateAttribute("badge-font", badgeFont);
-    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]));
+    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _2 => _2.toString, 'call', _3 => _3()]));
     updateAttribute("badge-size", badgeSize);
   }, [
     variant,
@@ -1276,7 +1330,7 @@ function useStableCallback(fn) {
   _react.useEffect.call(void 0, () => {
     fnRef.current = fn;
   }, [fn]);
-  return (...args) => _optionalChain([fnRef, 'access', _5 => _5.current, 'optionalCall', _6 => _6(...args)]);
+  return (...args) => _optionalChain([fnRef, 'access', _4 => _4.current, 'optionalCall', _5 => _5(...args)]);
 }
 function WavelengthFormInner(props, ref) {
   const {
@@ -1316,7 +1370,7 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     let finalSchema = schema;
     if (placeholders) {
-      const shape = _optionalChain([schema, 'optionalAccess', _7 => _7.shape]);
+      const shape = _optionalChain([schema, 'optionalAccess', _6 => _6.shape]);
       if (shape) {
         const overrides = {};
         for (const [key, ph] of Object.entries(placeholders)) {
@@ -1349,15 +1403,15 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     const handleChange = (e) => {
       const detail = e.detail;
-      _optionalChain([onChangeStable, 'optionalCall', _8 => _8(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _9 => _9.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _10 => _10.issues]), () => ( [])))]);
+      _optionalChain([onChangeStable, 'optionalCall', _7 => _7(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _8 => _8.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _9 => _9.issues]), () => ( [])))]);
     };
     const handleValid = (e) => {
       const detail = e.detail;
-      _optionalChain([onValidStable, 'optionalCall', _11 => _11(_optionalChain([detail, 'optionalAccess', _12 => _12.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _13 => _13.issues]), () => ( [])))]);
+      _optionalChain([onValidStable, 'optionalCall', _10 => _10(_optionalChain([detail, 'optionalAccess', _11 => _11.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _12 => _12.issues]), () => ( [])))]);
     };
     const handleInvalid = (e) => {
       const detail = e.detail;
-      _optionalChain([onInvalidStable, 'optionalCall', _14 => _14(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _15 => _15.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _16 => _16.issues]), () => ( [])))]);
+      _optionalChain([onInvalidStable, 'optionalCall', _13 => _13(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _14 => _14.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _15 => _15.issues]), () => ( [])))]);
     };
     el.addEventListener("form-change", handleChange);
     el.addEventListener("form-valid", handleValid);
@@ -1379,8 +1433,8 @@ function WavelengthFormInner(props, ref) {
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.validate, 'optionalCall', _19 => _19()]), () => ( false)),
-      getValue: () => _optionalChain([hostRef, 'access', _20 => _20.current, 'optionalAccess', _21 => _21.value]),
+      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _16 => _16.current, 'optionalAccess', _17 => _17.validate, 'optionalCall', _18 => _18()]), () => ( false)),
+      getValue: () => _optionalChain([hostRef, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.value]),
       setValue: (v) => {
         if (hostRef.current) hostRef.current.value = v;
       }
@@ -1505,7 +1559,7 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
       el.spaced = spaced;
     }
   }, [numberOfPlanes, trailDir, opacity, color, gradient, spaced]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color, gradient, spaced: _optionalChain([spaced, 'optionalAccess', _22 => _22.toString, 'call', _23 => _23()]), ...rest, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color, gradient, spaced: _optionalChain([spaced, 'optionalAccess', _21 => _21.toString, 'call', _22 => _22()]), ...rest, children });
 };
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 
@@ -1576,8 +1630,8 @@ function WavelengthConfirmationModal(props) {
       "font-family": props.fontFamily,
       "text-color": props.textColor,
       "background-color": props.backgroundColor,
-      "title-text": _optionalChain([props, 'access', _24 => _24.textObj, 'optionalAccess', _25 => _25.title]),
-      "dialog-text": _optionalChain([props, 'access', _26 => _26.textObj, 'optionalAccess', _27 => _27.dialog]),
+      "title-text": _optionalChain([props, 'access', _23 => _23.textObj, 'optionalAccess', _24 => _24.title]),
+      "dialog-text": _optionalChain([props, 'access', _25 => _25.textObj, 'optionalAccess', _26 => _26.dialog]),
       children: [
         props.cancelButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
         props.submitButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
@@ -1837,8 +1891,8 @@ var WavelengthDialog = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _28 => _28(e)]);
-    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _29 => _29(e)]);
+    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _27 => _27(e)]);
+    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _28 => _28(e)]);
     el.addEventListener("wl-left-btn-click", handleLeft);
     el.addEventListener("wl-right-btn-click", handleRight);
     return () => {
@@ -1936,8 +1990,8 @@ var WavelengthPagination = ({
     syncAttribute("active-text-color", activeTextColor || "");
     syncAttribute("background-color", backgroundColor || "");
     syncAttribute("disabled-color", disabledColor || "");
-    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _30 => _30.toString, 'call', _31 => _31()]) || "");
-    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _32 => _32.toString, 'call', _33 => _33()]) || "");
+    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _29 => _29.toString, 'call', _30 => _30()]) || "");
+    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _31 => _31.toString, 'call', _32 => _32()]) || "");
     const handlePageChange = (e) => {
       if (onPageChange) {
         onPageChange(e.detail.page);
@@ -2033,7 +2087,7 @@ var WavelengthInput = _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', _34 => _34.current, 'optionalAccess', _35 => _35.validate, 'optionalCall', _36 => _36(true)])
+      validate: () => _optionalChain([internalRef, 'access', _33 => _33.current, 'optionalAccess', _34 => _34.validate, 'optionalCall', _35 => _35(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -2112,7 +2166,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _37 => _37.shadowRoot, 'optionalAccess', _38 => _38.querySelector, 'call', _39 => _39("input, textarea")]);
+        const input = _optionalChain([el, 'access', _36 => _36.shadowRoot, 'optionalAccess', _37 => _37.querySelector, 'call', _38 => _38("input, textarea")]);
         if (input) {
           onBlurCallback();
         }
@@ -2124,7 +2178,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _40 => _40.shadowRoot, 'optionalAccess', _41 => _41.querySelector, 'call', _42 => _42("input, textarea")]);
+        const input = _optionalChain([el, 'access', _39 => _39.shadowRoot, 'optionalAccess', _40 => _40.querySelector, 'call', _41 => _41("input, textarea")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -2327,7 +2381,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   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', _43 => _43[0], 'optionalAccess', _44 => _44.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _42 => _42[0], 'optionalAccess', _43 => _43.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);
@@ -2481,7 +2535,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _45 => _45.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', _46 => _46.map, 'call', _47 => _47((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _44 => _44.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', _45 => _45.map, 'call', _46 => _46((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,
       {
@@ -2757,7 +2811,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _48 => _48.Details, 'optionalAccess', _49 => _49.fileObjects, 'access', _50 => _50.sort, 'call', _51 => _51((c, d) => {
+        (item) => _optionalChain([item, 'access', _47 => _47.Details, 'optionalAccess', _48 => _48.fileObjects, 'access', _49 => _49.sort, 'call', _50 => _50((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -2818,24 +2872,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', _52 => _52.Details, 'optionalAccess', _53 => _53.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _54 => _54.Details, 'optionalAccess', _55 => _55.fileObjects, 'access', _56 => _56.map, 'call', _57 => _57((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _51 => _51.Details, 'optionalAccess', _52 => _52.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _53 => _53.Details, 'optionalAccess', _54 => _54.fileObjects, 'access', _55 => _55.map, 'call', _56 => _56((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', _58 => _58.Details, 'optionalAccess', _59 => _59.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.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', _60 => _60.Details, 'optionalAccess', _61 => _61.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _62 => _62.Details, 'optionalAccess', _63 => _63.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', _59 => _59.Details, 'optionalAccess', _60 => _60.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _64 => _64.Details, 'optionalAccess', _65 => _65.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _68 => _68.map, 'call', _69 => _69((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _67 => _67.map, 'call', _68 => _68((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" }),
@@ -2929,8 +2983,8 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
         root = _client.createRoot.call(void 0, container);
         dropdownRoots.current.set(container, root);
       }
-      const item = _optionalChain([data, 'optionalAccess', _70 => _70.find, 'call', _71 => _71((i) => String(i.id) === String(itemId))]);
-      if (_optionalChain([item, 'optionalAccess', _72 => _72.dropdown]) && root) {
+      const item = _optionalChain([data, 'optionalAccess', _69 => _69.find, 'call', _70 => _70((i) => String(i.id) === String(itemId))]);
+      if (_optionalChain([item, 'optionalAccess', _71 => _71.dropdown]) && root) {
         root.render(item.dropdown);
       }
     };
@@ -3062,9 +3116,9 @@ var NestedDataTable = ({ data, columns, id }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !_optionalChain([data, 'optionalAccess', _73 => _73.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', _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 columnKey = trimBeforePeriod(column.key);
-    const value = _optionalChain([item, 'access', _74 => _74.Details, 'optionalAccess', _75 => _75[columnKey]]);
+    const value = _optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74[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}`);
@@ -3074,7 +3128,7 @@ var NestedDataTable = ({ data, columns, id }) => {
     /* @__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', _76 => _76.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', _77 => _77.map, 'call', _78 => _78((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  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: [
     /* @__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) => {
@@ -3671,10 +3725,10 @@ var WavelengthCheckboxList = ({ label, helperText, checkboxInformation, children
     if (!el) return;
     function verifyAttribute(attribute, value) {
       if (value === void 0 || value === null) {
-        _optionalChain([el, 'optionalAccess', _79 => _79.removeAttribute, 'call', _80 => _80(attribute)]);
+        _optionalChain([el, 'optionalAccess', _78 => _78.removeAttribute, 'call', _79 => _79(attribute)]);
         return;
       }
-      _optionalChain([el, 'optionalAccess', _81 => _81.setAttribute, 'call', _82 => _82(attribute, value)]);
+      _optionalChain([el, 'optionalAccess', _80 => _80.setAttribute, 'call', _81 => _81(attribute, value)]);
     }
     verifyAttribute("label", label);
     verifyAttribute("helper-text", helperText);

package/dist/cjs/index.d.cts

@@ -154,15 +154,17 @@ interface WavelengthNavBarProps extends React__default.HTMLAttributes<HTMLElemen
 }
 declare const WavelengthNavBar: React__default.FC<WavelengthNavBarProps>;
 
-interface IFileSelectedEventDetail {
+interface FileSelectedEventDetail {
     files: File | File[];
 }
+type IFileSelectedEventDetail = FileSelectedEventDetail;
 interface WavelengthFileDropZoneProps extends React__default.HTMLAttributes<HTMLElement> {
     acceptedTypes?: string;
     maxSize?: number;
     multiple?: boolean;
     dragText?: string;
     iconSrc?: string;
+    width?: string;
     onFilesSelected?: (files: File | File[]) => void;
     hostDisplay?: string;
     hostWidth?: string;
@@ -200,7 +202,7 @@ interface WavelengthFileDropZoneProps extends React__default.HTMLAttributes<HTML
     errorFontSize?: string;
     errorMarginTop?: string;
 }
-declare const WavelengthFileDropZone: React__default.FC<WavelengthFileDropZoneProps>;
+declare const WavelengthFileDropZone: React__default.ForwardRefExoticComponent<WavelengthFileDropZoneProps & React__default.RefAttributes<HTMLElement>>;
 
 interface WavelengthWebSnackbarProps extends React__default.HTMLAttributes<HTMLElement> {
     message?: string;
@@ -838,4 +840,4 @@ interface WavelengthCheckboxListProps extends React__default.HTMLAttributes<HTML
 }
 declare const WavelengthCheckboxList: React__default.FC<WavelengthCheckboxListProps>;
 
-export { ChildDataTable, type DataGridColumn, type DataGridRow, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchResult, type ThemeProperties, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthButton, WavelengthCard, WavelengthCheckbox, WavelengthCheckboxList, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentPlaceholder, WavelengthDataGrid, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDialog, WavelengthDropdown, WavelengthExampleComponent, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSpinningLogo, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, useThemeContext };
+export { ChildDataTable, type DataGridColumn, type DataGridRow, type FileSelectedEventDetail, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchResult, type ThemeProperties, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthButton, WavelengthCard, WavelengthCheckbox, WavelengthCheckboxList, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentPlaceholder, WavelengthDataGrid, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDialog, WavelengthDropdown, WavelengthExampleComponent, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSpinningLogo, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, useThemeContext };

package/dist/esm/index.d.ts

@@ -154,15 +154,17 @@ interface WavelengthNavBarProps extends React__default.HTMLAttributes<HTMLElemen
 }
 declare const WavelengthNavBar: React__default.FC<WavelengthNavBarProps>;
 
-interface IFileSelectedEventDetail {
+interface FileSelectedEventDetail {
     files: File | File[];
 }
+type IFileSelectedEventDetail = FileSelectedEventDetail;
 interface WavelengthFileDropZoneProps extends React__default.HTMLAttributes<HTMLElement> {
     acceptedTypes?: string;
     maxSize?: number;
     multiple?: boolean;
     dragText?: string;
     iconSrc?: string;
+    width?: string;
     onFilesSelected?: (files: File | File[]) => void;
     hostDisplay?: string;
     hostWidth?: string;
@@ -200,7 +202,7 @@ interface WavelengthFileDropZoneProps extends React__default.HTMLAttributes<HTML
     errorFontSize?: string;
     errorMarginTop?: string;
 }
-declare const WavelengthFileDropZone: React__default.FC<WavelengthFileDropZoneProps>;
+declare const WavelengthFileDropZone: React__default.ForwardRefExoticComponent<WavelengthFileDropZoneProps & React__default.RefAttributes<HTMLElement>>;
 
 interface WavelengthWebSnackbarProps extends React__default.HTMLAttributes<HTMLElement> {
     message?: string;
@@ -838,4 +840,4 @@ interface WavelengthCheckboxListProps extends React__default.HTMLAttributes<HTML
 }
 declare const WavelengthCheckboxList: React__default.FC<WavelengthCheckboxListProps>;
 
-export { ChildDataTable, type DataGridColumn, type DataGridRow, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchResult, type ThemeProperties, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthButton, WavelengthCard, WavelengthCheckbox, WavelengthCheckboxList, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentPlaceholder, WavelengthDataGrid, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDialog, WavelengthDropdown, WavelengthExampleComponent, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSpinningLogo, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, useThemeContext };
+export { ChildDataTable, type DataGridColumn, type DataGridRow, type FileSelectedEventDetail, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchResult, type ThemeProperties, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthButton, WavelengthCard, WavelengthCheckbox, WavelengthCheckboxList, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentPlaceholder, WavelengthDataGrid, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDialog, WavelengthDropdown, WavelengthExampleComponent, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSpinningLogo, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, useThemeContext };

package/dist/esm/index.js

@@ -823,118 +823,172 @@ var WavelengthNavBar = ({ items, bgColor, txtColor, hoverColor, height, padding,
 };
 
 // src/components/FileDropZone/WavelengthFileDropZone.tsx
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { forwardRef, useEffect as useEffect6, useImperativeHandle, useMemo, useRef as useRef6 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var WavelengthFileDropZone = ({
-  acceptedTypes,
-  maxSize,
-  multiple,
-  dragText,
-  iconSrc,
-  onFilesSelected,
-  hostDisplay,
-  hostWidth,
-  inputDisplay,
-  borderWidth,
-  borderStyle,
-  borderColor,
-  borderRadius,
-  padding,
-  textAlign,
-  backgroundColor,
-  cursor,
-  transition,
-  display,
-  flexDirection,
-  alignItems,
-  gap,
-  borderHoverColor,
-  backgroundHoverColor,
-  borderActiveColor,
-  backgroundActiveColor,
-  contentDisplay,
-  contentFlexDirection,
-  contentAlignItems,
-  contentGap,
-  textColor,
-  fontFamily,
-  fontStyle,
-  fontSize,
-  lineHeight,
-  letterSpacing,
-  iconSize,
-  errorColor,
-  errorFontFamily,
-  errorFontSize,
-  errorMarginTop,
-  style,
-  children,
-  ...rest
-}) => {
-  const ref = useRef6(null);
-  useEffect6(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (acceptedTypes !== void 0) el.setAttribute("accepted-types", acceptedTypes);
-    else el.removeAttribute("accepted-types");
-    if (maxSize !== void 0) el.setAttribute("max-size", String(maxSize));
-    else el.removeAttribute("max-size");
-    if (dragText !== void 0) el.setAttribute("drag-text", dragText);
-    else el.removeAttribute("drag-text");
-    if (iconSrc !== void 0) el.setAttribute("icon-src", iconSrc);
-    else el.removeAttribute("icon-src");
-    if (multiple) el.setAttribute("multiple", "");
-    else el.removeAttribute("multiple");
-    const handleFilesSelected = (event) => {
-      const customEvent = event;
-      onFilesSelected?.(customEvent.detail.files);
-    };
-    el.addEventListener("files-selected", handleFilesSelected);
-    return () => {
-      el.removeEventListener("files-selected", handleFilesSelected);
-    };
-  }, [acceptedTypes, maxSize, multiple, dragText, iconSrc, onFilesSelected]);
-  const mergedStyle = {
-    ...style,
-    "--hostDisplay": hostDisplay,
-    "--hostWidth": hostWidth,
-    "--inputDisplay": inputDisplay,
-    "--borderWidth": borderWidth,
-    "--borderStyle": borderStyle,
-    "--borderColor": borderColor,
-    "--borderRadius": borderRadius,
-    "--padding": padding,
-    "--textAlign": textAlign,
-    "--backgroundColor": backgroundColor,
-    "--cursor": cursor,
-    "--transition": transition,
-    "--display": display,
-    "--flexDirection": flexDirection,
-    "--alignItems": alignItems,
-    "--gap": gap,
-    "--borderHoverColor": borderHoverColor,
-    "--backgroundHoverColor": backgroundHoverColor,
-    "--borderActiveColor": borderActiveColor,
-    "--backgroundActiveColor": backgroundActiveColor,
-    "--contentDisplay": contentDisplay,
-    "--contentFlexDirection": contentFlexDirection,
-    "--contentAlignItems": contentAlignItems,
-    "--contentGap": contentGap,
-    "--textColor": textColor,
-    "--fontFamily": fontFamily,
-    "--fontStyle": fontStyle,
-    "--fontSize": fontSize,
-    "--lineHeight": lineHeight,
-    "--letterSpacing": letterSpacing,
-    "--iconSize": iconSize,
-    "--errorColor": errorColor,
-    "--errorFontFamily": errorFontFamily,
-    "--errorFontSize": errorFontSize,
-    "--errorMarginTop": errorMarginTop
-  };
-  return /* @__PURE__ */ jsx9("wavelength-file-drop-zone", { ref, style: mergedStyle, ...rest, children });
+var setAttribute = (element, attribute, value) => {
+  if (value === void 0 || value === null) {
+    element.removeAttribute(attribute);
+    return;
+  }
+  element.setAttribute(attribute, String(value));
 };
+var WavelengthFileDropZone = forwardRef(
+  ({
+    acceptedTypes,
+    maxSize,
+    multiple,
+    dragText,
+    iconSrc,
+    width,
+    onFilesSelected,
+    hostDisplay,
+    hostWidth,
+    inputDisplay,
+    borderWidth,
+    borderStyle,
+    borderColor,
+    borderRadius,
+    padding,
+    textAlign,
+    backgroundColor,
+    cursor,
+    transition,
+    display,
+    flexDirection,
+    alignItems,
+    gap,
+    borderHoverColor,
+    backgroundHoverColor,
+    borderActiveColor,
+    backgroundActiveColor,
+    contentDisplay,
+    contentFlexDirection,
+    contentAlignItems,
+    contentGap,
+    textColor,
+    fontFamily,
+    fontStyle,
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    iconSize,
+    errorColor,
+    errorFontFamily,
+    errorFontSize,
+    errorMarginTop,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const elementRef = useRef6(null);
+    useImperativeHandle(ref, () => elementRef.current);
+    useEffect6(() => {
+      const element = elementRef.current;
+      if (!element) return;
+      setAttribute(element, "accepted-types", acceptedTypes);
+      setAttribute(element, "max-size", maxSize);
+      setAttribute(element, "drag-text", dragText);
+      setAttribute(element, "icon-src", iconSrc);
+      if (multiple) {
+        element.setAttribute("multiple", "");
+      } else {
+        element.removeAttribute("multiple");
+      }
+    }, [acceptedTypes, maxSize, multiple, dragText, iconSrc]);
+    useEffect6(() => {
+      const element = elementRef.current;
+      if (!element || !onFilesSelected) return;
+      const handleFilesSelected = (event) => {
+        const customEvent = event;
+        onFilesSelected(customEvent.detail.files);
+      };
+      element.addEventListener("files-selected", handleFilesSelected);
+      return () => element.removeEventListener("files-selected", handleFilesSelected);
+    }, [onFilesSelected]);
+    const mergedStyle = useMemo(
+      () => ({
+        ...style,
+        "--hostDisplay": hostDisplay,
+        "--hostWidth": hostWidth ?? width,
+        "--inputDisplay": inputDisplay,
+        "--borderWidth": borderWidth,
+        "--borderStyle": borderStyle,
+        "--borderColor": borderColor,
+        "--borderRadius": borderRadius,
+        "--padding": padding,
+        "--textAlign": textAlign,
+        "--backgroundColor": backgroundColor,
+        "--cursor": cursor,
+        "--transition": transition,
+        "--display": display,
+        "--flexDirection": flexDirection,
+        "--alignItems": alignItems,
+        "--gap": gap,
+        "--borderHoverColor": borderHoverColor,
+        "--backgroundHoverColor": backgroundHoverColor,
+        "--borderActiveColor": borderActiveColor,
+        "--backgroundActiveColor": backgroundActiveColor,
+        "--contentDisplay": contentDisplay,
+        "--contentFlexDirection": contentFlexDirection,
+        "--contentAlignItems": contentAlignItems,
+        "--contentGap": contentGap,
+        "--textColor": textColor,
+        "--fontFamily": fontFamily,
+        "--fontStyle": fontStyle,
+        "--fontSize": fontSize,
+        "--lineHeight": lineHeight,
+        "--letterSpacing": letterSpacing,
+        "--iconSize": iconSize,
+        "--errorColor": errorColor,
+        "--errorFontFamily": errorFontFamily,
+        "--errorFontSize": errorFontSize,
+        "--errorMarginTop": errorMarginTop
+      }),
+      [
+        style,
+        hostDisplay,
+        hostWidth,
+        width,
+        inputDisplay,
+        borderWidth,
+        borderStyle,
+        borderColor,
+        borderRadius,
+        padding,
+        textAlign,
+        backgroundColor,
+        cursor,
+        transition,
+        display,
+        flexDirection,
+        alignItems,
+        gap,
+        borderHoverColor,
+        backgroundHoverColor,
+        borderActiveColor,
+        backgroundActiveColor,
+        contentDisplay,
+        contentFlexDirection,
+        contentAlignItems,
+        contentGap,
+        textColor,
+        fontFamily,
+        fontStyle,
+        fontSize,
+        lineHeight,
+        letterSpacing,
+        iconSize,
+        errorColor,
+        errorFontFamily,
+        errorFontSize,
+        errorMarginTop
+      ]
+    );
+    return /* @__PURE__ */ jsx9("wavelength-file-drop-zone", { ref: elementRef, style: mergedStyle, ...rest, children });
+  }
+);
+WavelengthFileDropZone.displayName = "WavelengthFileDropZone";
 
 // src/components/SnackBar/WavelengthWebSnackbar.tsx
 import { useEffect as useEffect7, useRef as useRef7 } from "react";
@@ -1268,7 +1322,7 @@ var WavelengthCommentDisplay = ({
 WavelengthCommentDisplay.displayName = "WavelengthCommentDisplay";
 
 // src/components/forms/WavelengthForm.tsx
-import React12, { useEffect as useEffect13, useImperativeHandle, useRef as useRef13 } from "react";
+import React12, { useEffect as useEffect13, useImperativeHandle as useImperativeHandle2, useRef as useRef13 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx16 } from "react/jsx-runtime";
 function useStableCallback(fn) {
@@ -1376,7 +1430,7 @@ function WavelengthFormInner(props, ref) {
       el.removeEventListener("submit", onSubmitStable);
     };
   }, [onChangeStable, onValidStable, onInvalidStable, onLeftStable, onCenterStable, onRightStable, onSubmitStable]);
-  useImperativeHandle(
+  useImperativeHandle2(
     ref,
     () => ({
       validate: () => hostRef.current?.validate?.() ?? false,
@@ -1620,9 +1674,9 @@ var WavelengthPopUpMenu = React16.forwardRef(
 WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 
 // src/components/modals/WavelengthDropdown.tsx
-import { forwardRef, useEffect as useEffect20, useImperativeHandle as useImperativeHandle2, useRef as useRef20 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect20, useImperativeHandle as useImperativeHandle3, useRef as useRef20 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
-var WavelengthDropdown = forwardRef((props, ref) => {
+var WavelengthDropdown = forwardRef2((props, ref) => {
   const {
     options,
     defaultValue,
@@ -1647,7 +1701,7 @@ var WavelengthDropdown = forwardRef((props, ref) => {
     ...rest
   } = props;
   const elementRef = useRef20(null);
-  useImperativeHandle2(ref, () => elementRef.current);
+  useImperativeHandle3(ref, () => elementRef.current);
   useEffect20(() => {
     const el = elementRef.current;
     if (!el || !onChange) return;
@@ -1990,10 +2044,10 @@ var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, ha
 WavelengthSlider.displayName = "WavelengthSlider";
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef26, useEffect as useEffect26, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useRef as useRef26, useEffect as useEffect26, forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle4 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx30 } from "react/jsx-runtime";
-var WavelengthInput = forwardRef2(
+var WavelengthInput = forwardRef3(
   ({
     id,
     name,
@@ -2031,7 +2085,7 @@ var WavelengthInput = forwardRef2(
     ...rest
   }, ref) => {
     const internalRef = useRef26(null);
-    useImperativeHandle3(ref, () => ({
+    useImperativeHandle4(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
@@ -2542,7 +2596,7 @@ var WavelengthDataGrid = ({ columns, rows, pageSize = 10, checkboxSelection = fa
 WavelengthDataGrid.displayName = "WavelengthDataGrid";
 
 // src/components/DataTable/SubRowTable/ChildSubTable.tsx
-import { useMemo as useMemo2, useState as useState2, Fragment as Fragment4 } from "react";
+import { useMemo as useMemo3, useState as useState2, Fragment as Fragment4 } from "react";
 import styled2 from "styled-components";
 import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs9 } from "react/jsx-runtime";
 var TableContainer = styled2.div`
@@ -2732,7 +2786,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     const index = text.indexOf(".");
     return index === -1 ? text : text.substring(index + 1);
   }
-  const processedRowData = useMemo2(() => {
+  const processedRowData = useMemo3(() => {
     const result = [...data ?? []];
     if (sortOrder) {
       result.sort((a, b) => {
@@ -2861,7 +2915,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef29, useEffect as useEffect29, useMemo as useMemo3 } from "react";
+import { useRef as useRef29, useEffect as useEffect29, useMemo as useMemo4 } from "react";
 import { createRoot } from "react-dom/client";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -2877,7 +2931,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
     root.render(element);
     return container;
   };
-  const processedColumns = useMemo3(() => {
+  const processedColumns = useMemo4(() => {
     if (!Array.isArray(columns)) return columns;
     return columns.map((col) => {
       if (typeof col.renderCell === "function") {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "5.0.0",
+  "version": "5.0.3",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",
@@ -67,7 +67,7 @@
     "tsup": "^8.0.1"
   },
   "dependencies": {
-    "@wavelengthusaf/web-components": "^2.0.0",
+    "@wavelengthusaf/web-components": "^2.0.3",
     "react": "^18.0.0",
     "styled-components": "^6.1.12",
     "typescript": "^5.5.2"