@wavelengthusaf/components 4.0.1 → 4.1.1

package/README.md

@@ -14,6 +14,21 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 4.1.1 
+
+- 10/27/2025
+- Normalized web component and frontend naming conventions
+
+### 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
@@ -240,7 +255,7 @@ npm install @wavelengthusaf/components
 
 ### 2.3.0
 
-- Added `DefaultPagination` component to package for numbered pagination navigation, and modified PagePagination for testbed.
+- Added `WavelengthDefaultPagination` component to package for numbered pagination navigation, and modified PagePagination for testbed.
 
 ### 2.2.5
 

package/dist/cjs/index.cjs

@@ -6450,23 +6450,10 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     }
   };
   const dropstyles = {
-    dropcenter: {
-      position: "relative",
-      left: "-40px",
-      top: "-20px"
-    },
-    mydrop: {
-      position: "absolute",
-      zIndex: "3",
-      maxHeight: "200px",
-      overflow: "scroll"
-    },
-    rangenumbers: {
-      display: "flex"
-    },
-    butPagCompDivStyle: {
-      display: "flex"
-    }
+    dropcenter: { position: "relative", left: "-40px", top: "-20px" },
+    mydrop: { position: "absolute", zIndex: "3", maxHeight: "200px", overflow: "scroll" },
+    rangenumbers: { display: "flex" },
+    butPagCompDivStyle: { display: "flex" }
   };
   const WLButtonPagStyle = {
     background: "white",
@@ -6479,15 +6466,9 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     boxshadow: "4px 2px 4px darkslategray",
     borderRadius: "50%",
     margin: "3px",
-    "&:hover": {
-      background: "#49baf7"
-    },
-    "&:disabled": {
-      background: "rgb(226, 223, 223)"
-    },
-    "&.active": {
-      background: "#8FD8FF"
-    }
+    "&:hover": { background: "#49baf7" },
+    "&:disabled": { background: "rgb(226, 223, 223)" },
+    "&.active": { background: "#8FD8FF" }
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: dropstyles.butPagCompDivStyle, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowBackIosNew2.default, {}) }),
@@ -6639,7 +6620,7 @@ function ascendingRange(start, end) {
   }
   return result;
 }
-function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, boundaryCount = 1, style: style3, onPageChange }) {
+function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, boundaryCount = 1, style: style3, onPageChange }) {
   const [current, setCurrent] = _react.useState.call(void 0, currentPageNumber);
   const startPages = range(1, Math.min(boundaryCount, totalPages));
   const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
@@ -6727,8 +6708,8 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
-DefaultPagination.displayName = "DefaultPagination";
-var WavelengthDefaultPagination_default = DefaultPagination;
+WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
+var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
 
 // src/components/TextField/WavelengthInput.tsx
 
@@ -6784,6 +6765,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 +8103,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 +8209,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.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.WavelengthDefaultPagination = WavelengthDefaultPagination; 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';
@@ -707,11 +707,15 @@ interface PaginationProps {
 }
 declare const range: (start: number, end: number) => number[];
 declare function ascendingRange(start: number, end: number): number[];
-declare function DefaultPagination({ totalPages, currentPageNumber, siblingCount, boundaryCount, style, onPageChange }: PaginationProps): react_jsx_runtime.JSX.Element;
-declare namespace DefaultPagination {
+declare function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCount, boundaryCount, style, onPageChange }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare namespace WavelengthDefaultPagination {
     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, 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, WavelengthDefaultPagination, 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';
@@ -707,11 +707,15 @@ interface PaginationProps {
 }
 declare const range: (start: number, end: number) => number[];
 declare function ascendingRange(start: number, end: number): number[];
-declare function DefaultPagination({ totalPages, currentPageNumber, siblingCount, boundaryCount, style, onPageChange }: PaginationProps): react_jsx_runtime.JSX.Element;
-declare namespace DefaultPagination {
+declare function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCount, boundaryCount, style, onPageChange }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare namespace WavelengthDefaultPagination {
     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, 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, WavelengthDefaultPagination, 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

@@ -6450,23 +6450,10 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     }
   };
   const dropstyles = {
-    dropcenter: {
-      position: "relative",
-      left: "-40px",
-      top: "-20px"
-    },
-    mydrop: {
-      position: "absolute",
-      zIndex: "3",
-      maxHeight: "200px",
-      overflow: "scroll"
-    },
-    rangenumbers: {
-      display: "flex"
-    },
-    butPagCompDivStyle: {
-      display: "flex"
-    }
+    dropcenter: { position: "relative", left: "-40px", top: "-20px" },
+    mydrop: { position: "absolute", zIndex: "3", maxHeight: "200px", overflow: "scroll" },
+    rangenumbers: { display: "flex" },
+    butPagCompDivStyle: { display: "flex" }
   };
   const WLButtonPagStyle = {
     background: "white",
@@ -6479,15 +6466,9 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     boxshadow: "4px 2px 4px darkslategray",
     borderRadius: "50%",
     margin: "3px",
-    "&:hover": {
-      background: "#49baf7"
-    },
-    "&:disabled": {
-      background: "rgb(226, 223, 223)"
-    },
-    "&.active": {
-      background: "#8FD8FF"
-    }
+    "&:hover": { background: "#49baf7" },
+    "&:disabled": { background: "rgb(226, 223, 223)" },
+    "&.active": { background: "#8FD8FF" }
   };
   return /* @__PURE__ */ jsxs28("div", { style: dropstyles.butPagCompDivStyle, children: [
     /* @__PURE__ */ jsx38(Button5, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx38(ArrowBackIosNewIcon, {}) }),
@@ -6639,7 +6620,7 @@ function ascendingRange(start, end) {
   }
   return result;
 }
-function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, boundaryCount = 1, style: style3, onPageChange }) {
+function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, boundaryCount = 1, style: style3, onPageChange }) {
   const [current, setCurrent] = useState8(currentPageNumber);
   const startPages = range(1, Math.min(boundaryCount, totalPages));
   const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
@@ -6727,8 +6708,8 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
-DefaultPagination.displayName = "DefaultPagination";
-var WavelengthDefaultPagination_default = DefaultPagination;
+WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
+var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
 
 // src/components/TextField/WavelengthInput.tsx
 import { useRef as useRef8, useEffect as useEffect9, forwardRef, useImperativeHandle as useImperativeHandle2 } from "react";
@@ -6784,6 +6765,7 @@ var WavelengthInput = forwardRef(
           el.removeAttribute(attr);
         }
       };
+      if (style3) el.customStyles = style3;
       set("id", id);
       set("name", name);
       set("value", value);
@@ -8120,12 +8102,51 @@ 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,
   ChildDataTable,
   DefaultCarousel,
-  DefaultPagination,
   NestedDataTable,
   SampleComponent,
   SampleComponent2 as SampleComponentElement,
@@ -8149,6 +8170,7 @@ export {
   WavelengthDatePicker,
   WavelengthDatePicker2 as WavelengthDatePickerElement,
   WavelengthDefaultIcon,
+  WavelengthDefaultPagination,
   WavelengthDragAndDrop,
   WavelengthDropdown,
   WavelengthDropdownButton,
@@ -8160,6 +8182,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.1",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",
@@ -67,7 +67,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.15.7",
-    "@wavelengthusaf/web-components": "^1.0.1",
+    "@wavelengthusaf/web-components": "^1.1.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.12",