@wavelengthusaf/components 4.0.1 → 4.1.0

package/README.md

@@ -14,6 +14,16 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 4.1.0 
+
+- 10/22/2025
+- Added WavelengthMultiSelectAutocomplete
+
+### 4.0.1
+
+- 10/16/2025
+- Fixed issue where WavelengthAutoComplete won't trigger onChange callback
+
 ### 4.0.0
 
 -9/24/2025

package/dist/cjs/index.cjs

@@ -6784,6 +6784,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
           el.removeAttribute(attr);
         }
       };
+      if (style3) el.customStyles = style3;
       set("id", id);
       set("name", name);
       set("value", value);
@@ -8121,6 +8122,48 @@ SampleComponent.displayName = "SampleComponent";
 // src/index.ts
 
 
+// src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
+
+
+
+var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, ...rest }) => {
+  const componentRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const component = componentRef.current;
+    if (!component) return;
+    const handleValueChange = (event) => {
+      if (onChange) {
+        onChange(event.detail.value);
+      }
+    };
+    component.addEventListener("change", handleValueChange);
+    return () => {
+      component.removeEventListener("change", handleValueChange);
+    };
+  }, [onChange]);
+  _react.useEffect.call(void 0, () => {
+    const component = componentRef.current;
+    if (!component) return;
+    if (placeholder) component.setAttribute("placeholder", placeholder);
+    if (label) component.setAttribute("label", label);
+    if (name) component.setAttribute("name", name);
+    if (options) component.autocompleteOptions = options;
+    if (style3) component.customStyles = style3;
+  }, [options, placeholder, name, label, style3]);
+  _react.useEffect.call(void 0, () => {
+    const component = componentRef.current;
+    if (component && value) {
+      component.value = value;
+    }
+  }, [value]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
+};
+
+// src/index.ts
+
+
+
+
 
 
 
@@ -8185,7 +8228,7 @@ SampleComponent.displayName = "SampleComponent";
 
 
 
-exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js:

package/dist/cjs/index.d.cts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, ChangeEvent, ReactElement } from 'react';
-export { SampleComponent as SampleComponentElement, WavelengthBanner as WavelengthBannerElement, WavelengthButton as WavelengthButtonElement, WavelengthDatePicker as WavelengthDatePickerElement, WavelengthForm as WavelengthFormElement, WavelengthInput as WavelengthInputElement, WavelengthProgressBar as WavelengthProgressBarElement, WavelengthTitleBar as WavelengthTitleBarElement } from '@wavelengthusaf/web-components';
+import React__default, { ReactNode, ChangeEvent, ReactElement, CSSProperties } from 'react';
+export { 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 { z } from 'zod';
@@ -712,6 +712,10 @@ declare namespace DefaultPagination {
     var displayName: string;
 }
 
+type StyleProp = {
+    [selector: string]: any;
+};
+
 interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement> {
     id?: string;
     name?: string;
@@ -743,6 +747,7 @@ interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement
     helperColor?: string;
     label?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    style?: StyleProp;
 }
 declare const WavelengthInput: React__default.ForwardRefExoticComponent<WavelengthInputProps & React__default.RefAttributes<HTMLElement & {
     validate?: () => boolean;
@@ -873,4 +878,42 @@ interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement
 }
 declare const SampleComponent: React__default.FC<SampleComponentProps>;
 
-export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, DefaultPagination, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+interface Option {
+    label: string;
+    value: string;
+}
+interface CustomSelectors {
+    "&:hover"?: CSSProperties;
+    "&:focus"?: CSSProperties;
+    /**Styles the container which holds the input and label*/
+    "& .multi-select-input-wrapper"?: CSSProperties;
+    /**Styles the input*/
+    "& .multi-select-input"?: CSSProperties;
+    /**Styles the label*/
+    "& .multi-select-label"?: CSSProperties;
+    /**Styles the dropdown*/
+    "& .multi-select-dropdown"?: CSSProperties;
+    /** Styles the container that holds the options and checkbox*/
+    "& .multi-select-option-container"?: CSSProperties;
+    /**Styles the individual options*/
+    "& .multi-select-option"?: CSSProperties;
+    /**Styles the clear button*/
+    "& .multi-select-clear"?: CSSProperties;
+    /**Styles the dropdown arrow*/
+    "& .multi-select-arrow"?: CSSProperties;
+    /**Styles the chip*/
+    "& .multi-select-chip"?: CSSProperties;
+}
+type CustomStyleProp = CustomSelectors & StyleProp;
+interface MultiSelectAutocompleteProps {
+    options: Option[];
+    placeholder?: string;
+    label?: string;
+    name?: string;
+    style?: CustomStyleProp;
+    onChange?: (selectedOptions: Option[]) => void;
+    value?: Option[];
+}
+declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
+
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, DefaultPagination, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, ChangeEvent, ReactElement } from 'react';
-export { SampleComponent as SampleComponentElement, WavelengthBanner as WavelengthBannerElement, WavelengthButton as WavelengthButtonElement, WavelengthDatePicker as WavelengthDatePickerElement, WavelengthForm as WavelengthFormElement, WavelengthInput as WavelengthInputElement, WavelengthProgressBar as WavelengthProgressBarElement, WavelengthTitleBar as WavelengthTitleBarElement } from '@wavelengthusaf/web-components';
+import React__default, { ReactNode, ChangeEvent, ReactElement, CSSProperties } from 'react';
+export { 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 { z } from 'zod';
@@ -712,6 +712,10 @@ declare namespace DefaultPagination {
     var displayName: string;
 }
 
+type StyleProp = {
+    [selector: string]: any;
+};
+
 interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement> {
     id?: string;
     name?: string;
@@ -743,6 +747,7 @@ interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement
     helperColor?: string;
     label?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    style?: StyleProp;
 }
 declare const WavelengthInput: React__default.ForwardRefExoticComponent<WavelengthInputProps & React__default.RefAttributes<HTMLElement & {
     validate?: () => boolean;
@@ -873,4 +878,42 @@ interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement
 }
 declare const SampleComponent: React__default.FC<SampleComponentProps>;
 
-export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, DefaultPagination, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+interface Option {
+    label: string;
+    value: string;
+}
+interface CustomSelectors {
+    "&:hover"?: CSSProperties;
+    "&:focus"?: CSSProperties;
+    /**Styles the container which holds the input and label*/
+    "& .multi-select-input-wrapper"?: CSSProperties;
+    /**Styles the input*/
+    "& .multi-select-input"?: CSSProperties;
+    /**Styles the label*/
+    "& .multi-select-label"?: CSSProperties;
+    /**Styles the dropdown*/
+    "& .multi-select-dropdown"?: CSSProperties;
+    /** Styles the container that holds the options and checkbox*/
+    "& .multi-select-option-container"?: CSSProperties;
+    /**Styles the individual options*/
+    "& .multi-select-option"?: CSSProperties;
+    /**Styles the clear button*/
+    "& .multi-select-clear"?: CSSProperties;
+    /**Styles the dropdown arrow*/
+    "& .multi-select-arrow"?: CSSProperties;
+    /**Styles the chip*/
+    "& .multi-select-chip"?: CSSProperties;
+}
+type CustomStyleProp = CustomSelectors & StyleProp;
+interface MultiSelectAutocompleteProps {
+    options: Option[];
+    placeholder?: string;
+    label?: string;
+    name?: string;
+    style?: CustomStyleProp;
+    onChange?: (selectedOptions: Option[]) => void;
+    value?: Option[];
+}
+declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
+
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, DefaultPagination, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.js

@@ -6784,6 +6784,7 @@ var WavelengthInput = forwardRef(
           el.removeAttribute(attr);
         }
       };
+      if (style3) el.customStyles = style3;
       set("id", id);
       set("name", name);
       set("value", value);
@@ -8120,6 +8121,46 @@ SampleComponent.displayName = "SampleComponent";
 
 // src/index.ts
 import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-components";
+
+// src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
+import { useEffect as useEffect14, useRef as useRef13 } from "react";
+import "@wavelengthusaf/web-components";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, ...rest }) => {
+  const componentRef = useRef13(null);
+  useEffect14(() => {
+    const component = componentRef.current;
+    if (!component) return;
+    const handleValueChange = (event) => {
+      if (onChange) {
+        onChange(event.detail.value);
+      }
+    };
+    component.addEventListener("change", handleValueChange);
+    return () => {
+      component.removeEventListener("change", handleValueChange);
+    };
+  }, [onChange]);
+  useEffect14(() => {
+    const component = componentRef.current;
+    if (!component) return;
+    if (placeholder) component.setAttribute("placeholder", placeholder);
+    if (label) component.setAttribute("label", label);
+    if (name) component.setAttribute("name", name);
+    if (options) component.autocompleteOptions = options;
+    if (style3) component.customStyles = style3;
+  }, [options, placeholder, name, label, style3]);
+  useEffect14(() => {
+    const component = componentRef.current;
+    if (component && value) {
+      component.value = value;
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsx48("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
+};
+
+// src/index.ts
+import { WavelengthMultiSelectAutocomplete as WavelengthMultiSelectAutocomplete2 } from "@wavelengthusaf/web-components";
 export {
   ButtonIcon,
   ButtonMenu,
@@ -8160,6 +8201,8 @@ export {
   WavelengthInput,
   WavelengthInput2 as WavelengthInputElement,
   WavelengthManyPlanes,
+  WavelengthMultiSelectAutocomplete,
+  WavelengthMultiSelectAutocomplete2 as WavelengthMultiSelectAutocompleteElement,
   WavelengthNotAvailablePage,
   WavelengthPermissionAlert,
   WavelengthPlaneTrail,

package/package.json

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