@wavelengthusaf/components 4.4.0 → 4.4.1

package/README.md

@@ -14,6 +14,11 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 4.4.1
+
+- 2/25/2026
+- Changed the `WavelengthDropdown` to be a native web component
+
 ### 4.4.0
 
 - 2/24/2026

package/dist/cjs/index.cjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment18 = REACT_FRAGMENT_TYPE;
+        var Fragment17 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment18;
+        exports.Fragment = Fragment17;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -6085,131 +6085,45 @@ WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 // src/components/modals/WavelengthDropdown.tsx
 
 
-
-var _Grow = require('@mui/material/Grow'); var _Grow2 = _interopRequireDefault(_Grow);
-
-function WavelengthDropdown({
-  id,
-  options,
-  buttonSx,
-  width: width2 = "200px",
-  buttonText,
-  menuSx = { backgroundColor: "#FCFAF8", borderColor: "blue", width: width2, boxShadow: "none" },
-  palette: palette2
-}) {
-  const [anchorEl, setAnchorEl] = React2.default.useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const breweryStyleButton = {
-    backgroundColor: "#d16a2f",
-    color: "white",
-    padding: "16px 16px",
-    width: width2,
-    fontSize: "18px",
-    minWidth: "min-content",
-    borderTopRightRadius: "8px",
-    borderTopLeftRadius: "8px",
-    "&:hover": {
-      backgroundColor: "rgba(228, 119, 57, 1)"
-    }
-  };
-  const breweryDropDownStyle = {
-    backgroundColor: "#FCFAF8",
-    borderColor: "#d16a2f",
-    hoverColor: "rgba(209, 106, 47, 0.1)",
-    width: width2
-  };
-  const defaultDropdownSx = {
-    backgroundColor: "white",
-    borderColor: "blue",
-    hoverColor: "#d4d4e3",
-    width: width2
-  };
-  const defaultsx = menuSx ? { ...defaultDropdownSx, ...menuSx } : defaultDropdownSx;
-  let myButtonSx;
-  let myMenusx;
-  if (palette2 === "brewery") {
-    myButtonSx = { ...breweryStyleButton, ...buttonSx };
-    myMenusx = { ...breweryDropDownStyle, ...menuSx };
-  } else {
-    myButtonSx = buttonSx;
-    myMenusx = defaultsx;
-  }
-  const MenuItem2 = _material.styled.call(void 0, (0, _material.MenuItem))({
-    "&.MuiMenuItem-root": {
-      "&.Mui-selected": {
-        backgroundColor: `${myMenusx.backgroundColor}`
-      },
-      "&:hover": {
-        backgroundColor: `${myMenusx.hoverColor}`
-      }
+var WavelengthDropdown = _react.forwardRef.call(void 0, (props, ref) => {
+  const { options, defaultValue, value, fontSize, fontFamily, borderRadius: borderRadius2, width: width2, height: height2, textColor, arrowSize, popupRadius, popupAlign, popupSelectedColor, onChange, ...rest } = props;
+  const elementRef = _react.useRef.call(void 0, null);
+  _react.useImperativeHandle.call(void 0, ref, () => elementRef.current);
+  _react.useEffect.call(void 0, () => {
+    const el = elementRef.current;
+    if (!el || !onChange) return;
+    const handler = (e) => {
+      const customEvent = e;
+      onChange(customEvent);
+    };
+    el.addEventListener("change", handler);
+    return () => el.removeEventListener("change", handler);
+  }, [onChange]);
+  _react.useEffect.call(void 0, () => {
+    if (value !== void 0 && elementRef.current) {
+      elementRef.current.value = value;
     }
-  });
-  const MyMenu = _material.styled.call(void 0, (0, _material.Menu))({
-    top: "-7px",
-    left: "0px",
-    boxSizing: "border-box",
-    "& .MuiMenu-paper": {
-      borderBottomLeftRadius: "8px",
-      borderBottomRightRadius: "8px",
-      borderTopRightRadius: "0px",
-      borderTopLeftRadius: "0px",
-      boxShadow: _optionalChain([menuSx, 'optionalAccess', _39 => _39.boxShadow]),
-      width: myMenusx.width,
-      backgroundColor: `${myMenusx.backgroundColor}`
-    },
-    "& .MuiMenu-list": {
-      borderBottomLeftRadius: "8px",
-      borderBottomRightRadius: "8px",
-      borderLeft: `1px solid ${myMenusx.borderColor}`,
-      borderRight: `1px solid ${myMenusx.borderColor}`,
-      borderBottom: `1px solid ${myMenusx.borderColor}`
+  }, [value]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "wavelength-dropdown",
+    {
+      ref: elementRef,
+      options: JSON.stringify(options),
+      defaultValue,
+      "font-size": fontSize,
+      "font-family": fontFamily,
+      "border-radius": borderRadius2,
+      width: width2,
+      height: height2,
+      color: textColor,
+      "arrow-size": arrowSize,
+      "popup-radius": popupRadius,
+      "popup-align": popupAlign,
+      "popup-selected-color": popupSelectedColor,
+      ...rest
     }
-  });
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      WavelengthButton,
-      {
-        variant: "contained",
-        size: "large",
-        borderRadius: "0.5rem",
-        padding: myButtonSx.padding || breweryStyleButton.padding,
-        width: width2,
-        margin: "0rem",
-        colorOne: menuSx.borderColor,
-        colorTwo: menuSx.backgroundColor,
-        fontSize: "1.125rem",
-        boxShadow: "none",
-        onClick: handleClick,
-        children: buttonText
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      MyMenu,
-      {
-        id,
-        anchorEl,
-        open,
-        onClose: handleClose,
-        MenuListProps: {
-          "aria-labelledby": "basic-button"
-        },
-        anchorOrigin: { vertical: "bottom", horizontal: "center" },
-        transformOrigin: { vertical: "top", horizontal: "center" },
-        TransitionComponent: _Grow2.default,
-        children: options.map((item, index) => {
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuItem2, { onClick: item.onClick, children: item.option }, index);
-        })
-      }
-    )
-  ] });
-}
-var WavelengthDropdownStyled = _material.styled.call(void 0, WavelengthDropdown)``;
+  );
+});
 WavelengthDropdown.displayName = "WavelengthDropdown";
 
 // src/components/snackbars/WavelengthSnackbar.tsx
@@ -6909,7 +6823,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', _40 => _40.current, 'optionalAccess', _41 => _41.validate, 'optionalCall', _42 => _42(true)])
+      validate: () => _optionalChain([internalRef, 'access', _39 => _39.current, 'optionalAccess', _40 => _40.validate, 'optionalCall', _41 => _41(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -6986,7 +6900,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _43 => _43.shadowRoot, 'optionalAccess', _44 => _44.querySelector, 'call', _45 => _45("input")]);
+        const input = _optionalChain([el, 'access', _42 => _42.shadowRoot, 'optionalAccess', _43 => _43.querySelector, 'call', _44 => _44("input")]);
         if (input) {
           onBlurCallback();
         }
@@ -6998,7 +6912,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _46 => _46.shadowRoot, 'optionalAccess', _47 => _47.querySelector, 'call', _48 => _48("input")]);
+        const input = _optionalChain([el, 'access', _45 => _45.shadowRoot, 'optionalAccess', _46 => _46.querySelector, 'call', _47 => _47("input")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -7201,7 +7115,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', _49 => _49[0], 'optionalAccess', _50 => _50.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);
@@ -7355,7 +7269,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _51 => _51.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', _52 => _52.map, 'call', _53 => _53((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,
       {
@@ -7601,7 +7515,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _54 => _54.Details, 'optionalAccess', _55 => _55.fileObjects, 'access', _56 => _56.sort, 'call', _57 => _57((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") {
@@ -7662,24 +7576,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', _58 => _58.Details, 'optionalAccess', _59 => _59.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _60 => _60.Details, 'optionalAccess', _61 => _61.fileObjects, 'access', _62 => _62.map, 'call', _63 => _63((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', _64 => _64.Details, 'optionalAccess', _65 => _65.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', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _68 => _68.Details, 'optionalAccess', _69 => _69.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', _70 => _70.Details, 'optionalAccess', _71 => _71.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _72 => _72.Details, 'optionalAccess', _73 => _73.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', _74 => _74.map, 'call', _75 => _75((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" }),
@@ -7733,7 +7647,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
         root = _client.createRoot.call(void 0, container);
         reactDropdownRoots.current.set(container, root);
       }
-      const item = _optionalChain([data, 'optionalAccess', _76 => _76.find, 'call', _77 => _77((item2) => String(item2.id) === String(itemId))]);
+      const item = _optionalChain([data, 'optionalAccess', _75 => _75.find, 'call', _76 => _76((item2) => String(item2.id) === String(itemId))]);
       if (item && item.dropdown && root) {
         root.render(item.dropdown);
       }
@@ -7860,9 +7774,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', _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 subDataRows = !_optionalChain([data, 'optionalAccess', _77 => _77.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', _79 => _79.Details, 'optionalAccess', _80 => _80[columnKey]]);
+    const value = _optionalChain([item, 'access', _78 => _78.Details, 'optionalAccess', _79 => _79[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}`);
@@ -7872,7 +7786,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', _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: [
+  const rows = !_optionalChain([data, 'optionalAccess', _80 => _80.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', _81 => _81.map, 'call', _82 => _82((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) => {

package/dist/cjs/index.d.cts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { ReactNode, ChangeEvent, ReactElement, CSSProperties as CSSProperties$1 } from 'react';
 export { ChildDataTable as ChildDataTableElement, SampleComponent as SampleComponentElement, WavelengthBanner as WavelengthBannerElement, WavelengthButton as WavelengthButtonElement, WavelengthDatePicker as WavelengthDatePickerElement, WavelengthForm as WavelengthFormElement, WavelengthInput as WavelengthInputElement, WavelengthMultiSelectAutocomplete as WavelengthMultiSelectAutocompleteElement, WavelengthProgressBar as WavelengthProgressBarElement, WavelengthTitleBar as WavelengthTitleBarElement } from '@wavelengthusaf/web-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TextFieldVariants, SxProps, Theme } from '@mui/material';
+import { TextFieldVariants } from '@mui/material';
 import { z } from 'zod';
 import { Mark } from '@mui/material/Slider/useSlider.types';
 import { CSSProperties } from 'styled-components';
@@ -657,30 +657,27 @@ declare namespace WavelengthPopUpMenu {
     var displayName: string;
 }
 
-interface DropdownProps {
-    id?: string;
-    palette: "brewery" | "custom";
-    width: string;
-    options: menuOptions[];
-    buttonSx?: SxProps<Theme> | undefined;
-    menuSx?: MenuSxProps;
-    buttonText: string | ReactNode;
-}
-interface menuOptions {
-    option: React__default.ReactNode;
-    onClick?: React__default.MouseEventHandler<HTMLLIElement> | undefined;
-}
-interface MenuSxProps {
-    backgroundColor?: string;
-    borderColor?: string;
-    hoverColor?: string;
+interface WavelengthDropdownProps extends React.HTMLAttributes<HTMLElement> {
+    options?: {
+        label?: string;
+        value: string;
+        color?: string;
+    }[];
+    defaultValue?: string;
+    value?: string;
+    textColor?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    borderRadius?: string;
     width?: string;
-    boxShadow?: string;
-}
-declare function WavelengthDropdown({ id, options, buttonSx, width, buttonText, menuSx, palette, }: DropdownProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthDropdown {
-    var displayName: string;
+    height?: string;
+    arrowSize?: string;
+    popupRadius?: string;
+    popupAlign?: "left" | "center" | "right";
+    popupSelectedColor?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
+declare const WavelengthDropdown: React$1.ForwardRefExoticComponent<WavelengthDropdownProps & React$1.RefAttributes<HTMLElement>>;
 
 interface ConfirmationSnackbarProps {
     show: boolean;

package/dist/esm/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { ReactNode, ChangeEvent, ReactElement, CSSProperties as CSSProperties$1 } from 'react';
 export { ChildDataTable as ChildDataTableElement, SampleComponent as SampleComponentElement, WavelengthBanner as WavelengthBannerElement, WavelengthButton as WavelengthButtonElement, WavelengthDatePicker as WavelengthDatePickerElement, WavelengthForm as WavelengthFormElement, WavelengthInput as WavelengthInputElement, WavelengthMultiSelectAutocomplete as WavelengthMultiSelectAutocompleteElement, WavelengthProgressBar as WavelengthProgressBarElement, WavelengthTitleBar as WavelengthTitleBarElement } from '@wavelengthusaf/web-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TextFieldVariants, SxProps, Theme } from '@mui/material';
+import { TextFieldVariants } from '@mui/material';
 import { z } from 'zod';
 import { Mark } from '@mui/material/Slider/useSlider.types';
 import { CSSProperties } from 'styled-components';
@@ -657,30 +657,27 @@ declare namespace WavelengthPopUpMenu {
     var displayName: string;
 }
 
-interface DropdownProps {
-    id?: string;
-    palette: "brewery" | "custom";
-    width: string;
-    options: menuOptions[];
-    buttonSx?: SxProps<Theme> | undefined;
-    menuSx?: MenuSxProps;
-    buttonText: string | ReactNode;
-}
-interface menuOptions {
-    option: React__default.ReactNode;
-    onClick?: React__default.MouseEventHandler<HTMLLIElement> | undefined;
-}
-interface MenuSxProps {
-    backgroundColor?: string;
-    borderColor?: string;
-    hoverColor?: string;
+interface WavelengthDropdownProps extends React.HTMLAttributes<HTMLElement> {
+    options?: {
+        label?: string;
+        value: string;
+        color?: string;
+    }[];
+    defaultValue?: string;
+    value?: string;
+    textColor?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    borderRadius?: string;
     width?: string;
-    boxShadow?: string;
-}
-declare function WavelengthDropdown({ id, options, buttonSx, width, buttonText, menuSx, palette, }: DropdownProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthDropdown {
-    var displayName: string;
+    height?: string;
+    arrowSize?: string;
+    popupRadius?: string;
+    popupAlign?: "left" | "center" | "right";
+    popupSelectedColor?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
+declare const WavelengthDropdown: React$1.ForwardRefExoticComponent<WavelengthDropdownProps & React$1.RefAttributes<HTMLElement>>;
 
 interface ConfirmationSnackbarProps {
     show: boolean;