@wavelengthusaf/components 4.1.3 → 4.2.1

package/README.md

@@ -14,6 +14,11 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 4.1.4
+
+- 12/4/2025
+- Added WavelengthNavbar
+
 ### 4.1.3
 
 - 11/24/2025

package/dist/cjs/index.cjs

@@ -4848,6 +4848,25 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
 }
 WavelengthSideBar.displayName = "WavelengthSideBar";
 
+// src/components/PageComponents/WavelengthNavBar.tsx
+
+
+
+var WavelengthNavBar = ({ items, bgColor, txtColor, hoverColor, height: height2, padding: padding2, children, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (items) el.setAttribute("items", JSON.stringify(items));
+    if (bgColor) el.setAttribute("bg-color", bgColor);
+    if (txtColor) el.setAttribute("txt-color", txtColor);
+    if (hoverColor) el.setAttribute("hover-color", hoverColor);
+    if (height2) el.setAttribute("height", height2.toString());
+    if (padding2) el.setAttribute("padding", padding2);
+  }, [items, bgColor, txtColor, hoverColor, height2, padding2]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-nav-bar", { ref, ...rest, children });
+};
+
 // src/components/PageComponents/WavelengthSpinningLogo.tsx
 
 function WavelengthSpinningOuterCircle({ size, id, clip, color: color2, gradient, radius }) {
@@ -7549,6 +7568,68 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 };
 ChildDataTable.displayName = "ChildDataTable";
 
+// src/components/DataTable/SubRowTable/ChildDataTable.tsx
+
+
+var _client = require('react-dom/client');
+
+var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
+  const tableRef = _react.useRef.call(void 0, null);
+  const reactDropdownRoots = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  _react.useEffect.call(void 0, () => {
+    const customChildDataTableElement = tableRef.current;
+    if (!customChildDataTableElement) return;
+    if (columns !== void 0) customChildDataTableElement.setColumns = columns;
+    if (data !== void 0) customChildDataTableElement.setData = data;
+    if (dropdownArrowLocation !== void 0) customChildDataTableElement.setDropdownArrowLocation = dropdownArrowLocation;
+    if (sortIcon !== void 0) customChildDataTableElement.setSortIcon = sortIcon;
+    if (dropdownButtonIcon !== void 0) customChildDataTableElement.setDropdownButtonIcon = dropdownButtonIcon;
+  }, [columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon]);
+  _react.useEffect.call(void 0, () => {
+    const el = tableRef.current;
+    if (!el) return;
+    const handleReactDropdown = (event) => {
+      console.log("handling react dropdown");
+      const customEvent = event;
+      event.stopPropagation();
+      const { container, itemId } = customEvent.detail;
+      let root = reactDropdownRoots.current.get(container);
+      if (!root) {
+        root = _client.createRoot.call(void 0, container);
+        reactDropdownRoots.current.set(container, root);
+      }
+      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);
+      }
+      const dropdown = container.querySelector("#dropdown");
+      if (dropdown) {
+        dropdown.hidden = false;
+      }
+    };
+    const handleCleanupDropdown = (event) => {
+      event.stopPropagation();
+      const { container } = event.detail;
+      const root = reactDropdownRoots.current.get(container);
+      const dropdown = container.querySelector("#dropdown");
+      if (root && dropdown) {
+        dropdown.hidden = true;
+      }
+    };
+    el.addEventListener("getReactDropdown", handleReactDropdown);
+    el.addEventListener("cleanupDropdown", handleCleanupDropdown);
+    return () => {
+      el.removeEventListener("getReactDropdown", handleReactDropdown);
+      el.removeEventListener("cleanupDropdown", handleCleanupDropdown);
+    };
+  }, [data]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-child-data-table", { ref: tableRef, ...rest });
+};
+ChildDataTable2.displayName = "ChildDataTable";
+
+// src/index.ts
+
+
 // src/components/DataTable/NestedDataTable/NestedDataTable.tsx
 
 
@@ -7644,9 +7725,9 @@ var NestedDataTable = ({ data, columns }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !_optionalChain([data, 'optionalAccess', _75 => _75.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const 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', _76 => _76.Details, 'optionalAccess', _77 => _77[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}`);
@@ -7656,7 +7737,7 @@ var NestedDataTable = ({ data, columns }) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
   ] });
-  const rows = !_optionalChain([data, 'optionalAccess', _78 => _78.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _79 => _79.map, 'call', _80 => _80((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  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) => {
@@ -8107,10 +8188,11 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 // src/components/samples/SampleComponent.tsx
 
 
-
 var SampleComponent = ({
   testProp,
   children,
+  // Style argument
+  customStyle: customStyle2,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
@@ -8118,6 +8200,7 @@ var SampleComponent = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
+    el.customStyles = customStyle2;
     if (testProp !== void 0) {
       el.setAttribute("test-prop", testProp);
     }
@@ -8132,7 +8215,6 @@ SampleComponent.displayName = "SampleComponent";
 // 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, () => {
@@ -8235,7 +8317,9 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
 
 
 
-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;
+
+
+exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.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.WavelengthNavBar = WavelengthNavBar; 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,10 +1,11 @@
 import * as React$1 from 'react';
-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 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 { z } from 'zod';
 import { Mark } from '@mui/material/Slider/useSlider.types';
+import { CSSProperties } from 'styled-components';
 
 /**
  * Helper Functions
@@ -238,6 +239,22 @@ declare namespace WavelengthSideBar {
     var displayName: string;
 }
 
+interface NavItem {
+    title: string;
+    path?: string;
+    onClick?: () => void;
+    children?: NavItem[];
+}
+interface WavelengthNavBarProps extends React__default.HTMLAttributes<HTMLElement> {
+    items: NavItem[];
+    bgColor?: string;
+    txtColor?: string;
+    hoverColor?: string;
+    height?: string | number;
+    padding?: string;
+}
+declare const WavelengthNavBar: React__default.FC<WavelengthNavBarProps>;
+
 interface ISpinningSvgProps {
     size: number;
     id: "outer-circle" | "middle-circle" | "inner-circle" | "spinning";
@@ -714,7 +731,7 @@ declare namespace WavelengthDefaultPagination {
 
 type StyleProp = {
     [selector: string]: any;
-};
+} & CSSProperties;
 
 interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement> {
     id?: string;
@@ -754,58 +771,36 @@ declare const WavelengthInput: React__default.ForwardRefExoticComponent<Waveleng
     validate?: () => boolean;
 }>>;
 
-interface DataType$2 {
+interface DataType$1 {
     id: number;
     [key: string]: any;
 }
-interface ColumnProps$2<T> {
+interface ColumnProps$1<T> {
     key: string;
     title: string | ReactElement;
     width?: string;
     editable?: boolean;
-    render?: (column: ColumnProps$2<T>, item: T) => ReactElement;
+    render?: (column: ColumnProps$1<T>, item: T) => ReactElement;
 }
-type Props$2<T> = {
-    columns: Array<ColumnProps$2<T>>;
+type Props$1<T> = {
+    columns: Array<ColumnProps$1<T>>;
     data?: T[] | undefined;
     itemsPerPage: number;
     totalPages: number;
 };
 declare const WavelengthDataTable: {
-    <T extends DataType$2>({ data, columns, itemsPerPage, totalPages }: Props$2<T>): react_jsx_runtime.JSX.Element;
+    <T extends DataType$1>({ data, columns, itemsPerPage, totalPages }: Props$1<T>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface fileObject {
-    id: number;
-    [key: string]: any;
+interface ChildDataTableProps extends React__default.HTMLAttributes<HTMLElement> {
+    columns?: object;
+    data?: object;
+    dropdownArrowLocation?: string;
+    sortIcon?: string | HTMLElement;
+    dropdownButtonIcon?: string | HTMLElement;
 }
-interface Details$1 {
-    relationId: number;
-    fileObjects: fileObject[];
-}
-interface DataType$1 {
-    id: number;
-    [key: string]: any;
-    Details?: Details$1;
-}
-interface ColumnProps$1 {
-    key: string;
-    title: string | ReactElement;
-    subDataTableColumn: boolean;
-    PrimaryBoldText?: boolean;
-}
-type Props$1<T> = {
-    columns: Array<ColumnProps$1>;
-    data?: T[] | undefined;
-    downloadArrowOnClick?: () => void | Promise<void>;
-    downloadMissionOnClick?: () => void | Promise<void>;
-    addFilesOnClick?: () => void | Promise<void>;
-};
-declare const ChildDataTable: {
-    <T extends DataType$1>({ data, columns, downloadArrowOnClick, downloadMissionOnClick, addFilesOnClick }: Props$1<T>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const ChildDataTable: React__default.FC<ChildDataTableProps>;
 
 interface Details {
     relationId: number;
@@ -879,6 +874,7 @@ declare const WavelengthDatePicker: {
 
 interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement> {
     testProp?: string;
+    customStyle: StyleProp;
 }
 declare const SampleComponent: React__default.FC<SampleComponentProps>;
 
@@ -887,26 +883,26 @@ interface Option {
     value: string;
 }
 interface CustomSelectors {
-    "&:hover"?: CSSProperties;
-    "&:focus"?: CSSProperties;
+    "&:hover"?: CSSProperties$1;
+    "&:focus"?: CSSProperties$1;
     /**Styles the container which holds the input and label*/
-    "& .multi-select-input-wrapper"?: CSSProperties;
+    "& .multi-select-input-wrapper"?: CSSProperties$1;
     /**Styles the input*/
-    "& .multi-select-input"?: CSSProperties;
+    "& .multi-select-input"?: CSSProperties$1;
     /**Styles the label*/
-    "& .multi-select-label"?: CSSProperties;
+    "& .multi-select-label"?: CSSProperties$1;
     /**Styles the dropdown*/
-    "& .multi-select-dropdown"?: CSSProperties;
+    "& .multi-select-dropdown"?: CSSProperties$1;
     /** Styles the container that holds the options and checkbox*/
-    "& .multi-select-option-container"?: CSSProperties;
+    "& .multi-select-option-container"?: CSSProperties$1;
     /**Styles the individual options*/
-    "& .multi-select-option"?: CSSProperties;
+    "& .multi-select-option"?: CSSProperties$1;
     /**Styles the clear button*/
-    "& .multi-select-clear"?: CSSProperties;
+    "& .multi-select-clear"?: CSSProperties$1;
     /**Styles the dropdown arrow*/
-    "& .multi-select-arrow"?: CSSProperties;
+    "& .multi-select-arrow"?: CSSProperties$1;
     /**Styles the chip*/
-    "& .multi-select-chip"?: CSSProperties;
+    "& .multi-select-chip"?: CSSProperties$1;
 }
 type CustomStyleProp = CustomSelectors & StyleProp;
 interface MultiSelectAutocompleteProps {
@@ -920,4 +916,4 @@ interface MultiSelectAutocompleteProps {
 }
 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 };
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type NavItem, 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, WavelengthNavBar, type WavelengthNavBarProps, 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,10 +1,11 @@
 import * as React$1 from 'react';
-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 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 { z } from 'zod';
 import { Mark } from '@mui/material/Slider/useSlider.types';
+import { CSSProperties } from 'styled-components';
 
 /**
  * Helper Functions
@@ -238,6 +239,22 @@ declare namespace WavelengthSideBar {
     var displayName: string;
 }
 
+interface NavItem {
+    title: string;
+    path?: string;
+    onClick?: () => void;
+    children?: NavItem[];
+}
+interface WavelengthNavBarProps extends React__default.HTMLAttributes<HTMLElement> {
+    items: NavItem[];
+    bgColor?: string;
+    txtColor?: string;
+    hoverColor?: string;
+    height?: string | number;
+    padding?: string;
+}
+declare const WavelengthNavBar: React__default.FC<WavelengthNavBarProps>;
+
 interface ISpinningSvgProps {
     size: number;
     id: "outer-circle" | "middle-circle" | "inner-circle" | "spinning";
@@ -714,7 +731,7 @@ declare namespace WavelengthDefaultPagination {
 
 type StyleProp = {
     [selector: string]: any;
-};
+} & CSSProperties;
 
 interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement> {
     id?: string;
@@ -754,58 +771,36 @@ declare const WavelengthInput: React__default.ForwardRefExoticComponent<Waveleng
     validate?: () => boolean;
 }>>;
 
-interface DataType$2 {
+interface DataType$1 {
     id: number;
     [key: string]: any;
 }
-interface ColumnProps$2<T> {
+interface ColumnProps$1<T> {
     key: string;
     title: string | ReactElement;
     width?: string;
     editable?: boolean;
-    render?: (column: ColumnProps$2<T>, item: T) => ReactElement;
+    render?: (column: ColumnProps$1<T>, item: T) => ReactElement;
 }
-type Props$2<T> = {
-    columns: Array<ColumnProps$2<T>>;
+type Props$1<T> = {
+    columns: Array<ColumnProps$1<T>>;
     data?: T[] | undefined;
     itemsPerPage: number;
     totalPages: number;
 };
 declare const WavelengthDataTable: {
-    <T extends DataType$2>({ data, columns, itemsPerPage, totalPages }: Props$2<T>): react_jsx_runtime.JSX.Element;
+    <T extends DataType$1>({ data, columns, itemsPerPage, totalPages }: Props$1<T>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface fileObject {
-    id: number;
-    [key: string]: any;
+interface ChildDataTableProps extends React__default.HTMLAttributes<HTMLElement> {
+    columns?: object;
+    data?: object;
+    dropdownArrowLocation?: string;
+    sortIcon?: string | HTMLElement;
+    dropdownButtonIcon?: string | HTMLElement;
 }
-interface Details$1 {
-    relationId: number;
-    fileObjects: fileObject[];
-}
-interface DataType$1 {
-    id: number;
-    [key: string]: any;
-    Details?: Details$1;
-}
-interface ColumnProps$1 {
-    key: string;
-    title: string | ReactElement;
-    subDataTableColumn: boolean;
-    PrimaryBoldText?: boolean;
-}
-type Props$1<T> = {
-    columns: Array<ColumnProps$1>;
-    data?: T[] | undefined;
-    downloadArrowOnClick?: () => void | Promise<void>;
-    downloadMissionOnClick?: () => void | Promise<void>;
-    addFilesOnClick?: () => void | Promise<void>;
-};
-declare const ChildDataTable: {
-    <T extends DataType$1>({ data, columns, downloadArrowOnClick, downloadMissionOnClick, addFilesOnClick }: Props$1<T>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const ChildDataTable: React__default.FC<ChildDataTableProps>;
 
 interface Details {
     relationId: number;
@@ -879,6 +874,7 @@ declare const WavelengthDatePicker: {
 
 interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement> {
     testProp?: string;
+    customStyle: StyleProp;
 }
 declare const SampleComponent: React__default.FC<SampleComponentProps>;
 
@@ -887,26 +883,26 @@ interface Option {
     value: string;
 }
 interface CustomSelectors {
-    "&:hover"?: CSSProperties;
-    "&:focus"?: CSSProperties;
+    "&:hover"?: CSSProperties$1;
+    "&:focus"?: CSSProperties$1;
     /**Styles the container which holds the input and label*/
-    "& .multi-select-input-wrapper"?: CSSProperties;
+    "& .multi-select-input-wrapper"?: CSSProperties$1;
     /**Styles the input*/
-    "& .multi-select-input"?: CSSProperties;
+    "& .multi-select-input"?: CSSProperties$1;
     /**Styles the label*/
-    "& .multi-select-label"?: CSSProperties;
+    "& .multi-select-label"?: CSSProperties$1;
     /**Styles the dropdown*/
-    "& .multi-select-dropdown"?: CSSProperties;
+    "& .multi-select-dropdown"?: CSSProperties$1;
     /** Styles the container that holds the options and checkbox*/
-    "& .multi-select-option-container"?: CSSProperties;
+    "& .multi-select-option-container"?: CSSProperties$1;
     /**Styles the individual options*/
-    "& .multi-select-option"?: CSSProperties;
+    "& .multi-select-option"?: CSSProperties$1;
     /**Styles the clear button*/
-    "& .multi-select-clear"?: CSSProperties;
+    "& .multi-select-clear"?: CSSProperties$1;
     /**Styles the dropdown arrow*/
-    "& .multi-select-arrow"?: CSSProperties;
+    "& .multi-select-arrow"?: CSSProperties$1;
     /**Styles the chip*/
-    "& .multi-select-chip"?: CSSProperties;
+    "& .multi-select-chip"?: CSSProperties$1;
 }
 type CustomStyleProp = CustomSelectors & StyleProp;
 interface MultiSelectAutocompleteProps {
@@ -920,4 +916,4 @@ interface MultiSelectAutocompleteProps {
 }
 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 };
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type NavItem, 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, WavelengthNavBar, type WavelengthNavBarProps, 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 };