@wavelengthusaf/components 4.2.0 → 4.2.1

package/dist/cjs/index.cjs

@@ -7568,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
 
 
@@ -7663,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}`);
@@ -7675,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) => {
@@ -8256,7 +8318,8 @@ 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.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;
+
+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,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode, ChangeEvent, ReactElement, CSSProperties as CSSProperties$1 } 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';
+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';
@@ -771,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 Details$1 {
-    relationId: number;
-    fileObjects: fileObject[];
-}
-interface DataType$1 {
-    id: number;
-    [key: string]: any;
-    Details?: Details$1;
+interface ChildDataTableProps extends React__default.HTMLAttributes<HTMLElement> {
+    columns?: object;
+    data?: object;
+    dropdownArrowLocation?: string;
+    sortIcon?: string | HTMLElement;
+    dropdownButtonIcon?: string | HTMLElement;
 }
-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;

package/dist/esm/index.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode, ChangeEvent, ReactElement, CSSProperties as CSSProperties$1 } 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';
+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';
@@ -771,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 Details$1 {
-    relationId: number;
-    fileObjects: fileObject[];
-}
-interface DataType$1 {
-    id: number;
-    [key: string]: any;
-    Details?: Details$1;
+interface ChildDataTableProps extends React__default.HTMLAttributes<HTMLElement> {
+    columns?: object;
+    data?: object;
+    dropdownArrowLocation?: string;
+    sortIcon?: string | HTMLElement;
+    dropdownButtonIcon?: string | HTMLElement;
 }
-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;

package/dist/esm/index.js

@@ -7568,10 +7568,72 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 };
 ChildDataTable.displayName = "ChildDataTable";
 
+// src/components/DataTable/SubRowTable/ChildDataTable.tsx
+import { useRef as useRef11, useEffect as useEffect12 } from "react";
+import "@wavelengthusaf/web-components";
+import { createRoot } from "react-dom/client";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
+  const tableRef = useRef11(null);
+  const reactDropdownRoots = useRef11(/* @__PURE__ */ new Map());
+  useEffect12(() => {
+    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]);
+  useEffect12(() => {
+    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 = createRoot(container);
+        reactDropdownRoots.current.set(container, root);
+      }
+      const item = data?.find((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__ */ jsx45("wavelength-child-data-table", { ref: tableRef, ...rest });
+};
+ChildDataTable2.displayName = "ChildDataTable";
+
+// src/index.ts
+import { ChildDataTable as ChildDataTable3 } from "@wavelengthusaf/web-components";
+
 // src/components/DataTable/NestedDataTable/NestedDataTable.tsx
 import { useState as useState11 } from "react";
 import styled12 from "styled-components";
-import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableStyle = styled12.table`
   width: 100%;
   height: 100%;
@@ -7658,46 +7720,46 @@ var NestedDataTable = ({ data, columns }) => {
     setPrimaryRowIndex(rowIndex);
   };
   const headers = HeadColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx45(MainThHeaders, { children: column.title }, `headCell-${index}`);
+    return /* @__PURE__ */ jsx46(MainThHeaders, { children: column.title }, `headCell-${index}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx45("th", { children: column.title }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx46("th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !data?.length ? /* @__PURE__ */ jsx45("tr", { children: /* @__PURE__ */ jsx45("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx45(Fragment16, { children: /* @__PURE__ */ jsx45(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !data?.length ? /* @__PURE__ */ jsx46("tr", { children: /* @__PURE__ */ jsx46("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx46(Fragment16, { children: /* @__PURE__ */ jsx46(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
     const columnKey = trimBeforePeriod(column.key);
     const value = item.Details?.[columnKey];
     console.log("value: ", value);
     if (value !== void 0) {
-      return /* @__PURE__ */ jsx45("td", { children: /* @__PURE__ */ jsx45("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
+      return /* @__PURE__ */ jsx46("td", { children: /* @__PURE__ */ jsx46("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
     }
   }) }, `Sub-${item.id}-${index}`) }));
   const childRows = /* @__PURE__ */ jsxs32(SubTableStyle, { children: [
-    /* @__PURE__ */ jsx45("thead", { children: /* @__PURE__ */ jsx45("tr", { children: SubDataHeaders }) }),
-    /* @__PURE__ */ jsx45("tbody", { children: subDataRows })
+    /* @__PURE__ */ jsx46("thead", { children: /* @__PURE__ */ jsx46("tr", { children: SubDataHeaders }) }),
+    /* @__PURE__ */ jsx46("tbody", { children: subDataRows })
   ] });
-  const rows = !data?.length ? /* @__PURE__ */ jsx45("tr", { children: /* @__PURE__ */ jsx45("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs32(Fragment16, { children: [
+  const rows = !data?.length ? /* @__PURE__ */ jsx46("tr", { children: /* @__PURE__ */ jsx46("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs32(Fragment16, { children: [
     /* @__PURE__ */ jsxs32(PrimaryTrRows, { $index: index, children: [
-      /* @__PURE__ */ jsx45(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx45(Fragment16, { children: "\u2227" }) : /* @__PURE__ */ jsx45(Fragment16, { children: "\u2228" }) }),
+      /* @__PURE__ */ jsx46(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx46(Fragment16, { children: "\u2227" }) : /* @__PURE__ */ jsx46(Fragment16, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
-        return /* @__PURE__ */ jsx45(PrimaryTdSpan, { children: /* @__PURE__ */ jsx45("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+        return /* @__PURE__ */ jsx46(PrimaryTdSpan, { children: /* @__PURE__ */ jsx46("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
       })
     ] }, index),
-    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx45(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx45("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx46(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx46("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
   ] }));
-  return /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsxs32(TableStyle, { children: [
-    /* @__PURE__ */ jsx45("thead", { children: /* @__PURE__ */ jsxs32("tr", { children: [
-      /* @__PURE__ */ jsx45("th", { title: "dropdownth" }),
+  return /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsxs32(TableStyle, { children: [
+    /* @__PURE__ */ jsx46("thead", { children: /* @__PURE__ */ jsxs32("tr", { children: [
+      /* @__PURE__ */ jsx46("th", { title: "dropdownth" }),
       headers
     ] }) }),
-    /* @__PURE__ */ jsx45("tbody", { children: rows })
+    /* @__PURE__ */ jsx46("tbody", { children: rows })
   ] }) });
 };
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect12, useRef as useRef12, useState as useState12 } from "react";
+import { useEffect as useEffect13, useRef as useRef13, useState as useState12 } from "react";
 import styled13 from "styled-components";
-import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
 var AutoContainer = styled13.div`
   //position: relative;
   position: relative;
@@ -7826,9 +7888,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef12(null);
-  const listRef = useRef12(null);
-  const noItemListRef = useRef12(null);
+  const inputRef = useRef13(null);
+  const listRef = useRef13(null);
+  const noItemListRef = useRef13(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -7836,7 +7898,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect12(() => {
+  useEffect13(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -7848,7 +7910,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect12(() => {
+    useEffect13(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -7914,9 +7976,9 @@ var WavelengthAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx46(Fragment17, { children: /* @__PURE__ */ jsxs33(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
+  return /* @__PURE__ */ jsx47(Fragment17, { children: /* @__PURE__ */ jsxs33(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
     /* @__PURE__ */ jsxs33(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47(
         Input,
         {
           id: idName,
@@ -7945,11 +8007,11 @@ var WavelengthAutoComplete = ({
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ jsx46(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+      /* @__PURE__ */ jsx47(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
     ] }),
-    isDropdownVisible && /* @__PURE__ */ jsx46(DropDownList, { id: `${idName}-drop-list`, ref: listRef, $inputWidth: width2, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
+    isDropdownVisible && /* @__PURE__ */ jsx47(DropDownList, { id: `${idName}-drop-list`, ref: listRef, $inputWidth: width2, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
       //suggestions length controls showing the suggestions
-      suggestions.map((item, index) => /* @__PURE__ */ jsx46(
+      suggestions.map((item, index) => /* @__PURE__ */ jsx47(
         ActiveListItem,
         {
           "data-testid": `${idName}-input-search-list-${index + 1}`,
@@ -7962,15 +8024,15 @@ var WavelengthAutoComplete = ({
         },
         `active-list-item-${item}-${index}`
       ))
-    ) : /* @__PURE__ */ jsx46(NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
+    ) : /* @__PURE__ */ jsx47(NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
   ] }) });
 };
 WavelengthAutoComplete.displayName = "WavelengthAutoComplete";
 
 // src/components/inputs/WavelengthDatePicker.tsx
-import { useEffect as useEffect13, useState as useState13 } from "react";
+import { useEffect as useEffect14, useState as useState13 } from "react";
 import styled14 from "styled-components";
-import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
 var Label2 = styled14.label`
   position: absolute;
   top: 50%;
@@ -8041,7 +8103,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect13(() => {
+  useEffect14(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -8092,7 +8154,7 @@ var WavelengthDatePicker = ({
       $FocusLabelColor: FocusLabelColor,
       $inputBackGroundColor: backgroundColor2,
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           "input",
           {
             type: inputType,
@@ -8113,7 +8175,7 @@ var WavelengthDatePicker = ({
             max: maxAdjusted
           }
         ),
-        /* @__PURE__ */ jsx47(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+        /* @__PURE__ */ jsx48(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
       ]
     }
   );
@@ -8124,8 +8186,8 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef13, useEffect as useEffect14 } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { useRef as useRef14, useEffect as useEffect15 } from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
   children,
@@ -8134,8 +8196,8 @@ var SampleComponent = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef13(null);
-  useEffect14(() => {
+  const ref = useRef14(null);
+  useEffect15(() => {
     const el = ref.current;
     if (!el) return;
     el.customStyles = customStyle2;
@@ -8143,7 +8205,7 @@ var SampleComponent = ({
       el.setAttribute("test-prop", testProp);
     }
   }, [testProp]);
-  return /* @__PURE__ */ jsx48("sample-component", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx49("sample-component", { ref, ...rest, children });
 };
 SampleComponent.displayName = "SampleComponent";
 
@@ -8151,11 +8213,11 @@ SampleComponent.displayName = "SampleComponent";
 import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-components";
 
 // src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
-import { useEffect as useEffect15, useRef as useRef14 } from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useRef as useRef15 } from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, ...rest }) => {
-  const componentRef = useRef14(null);
-  useEffect15(() => {
+  const componentRef = useRef15(null);
+  useEffect16(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8168,7 +8230,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect15(() => {
+  useEffect16(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
@@ -8177,13 +8239,13 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect15(() => {
+  useEffect16(() => {
     const component = componentRef.current;
     if (component && value) {
       component.value = value;
     }
   }, [value]);
-  return /* @__PURE__ */ jsx49("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
+  return /* @__PURE__ */ jsx50("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
 };
 
 // src/index.ts
@@ -8191,7 +8253,8 @@ import { WavelengthMultiSelectAutocomplete as WavelengthMultiSelectAutocomplete2
 export {
   ButtonIcon,
   ButtonMenu,
-  ChildDataTable,
+  ChildDataTable2 as ChildDataTable,
+  ChildDataTable3 as ChildDataTableElement,
   DefaultCarousel,
   NestedDataTable,
   SampleComponent,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",
@@ -42,6 +42,11 @@
   "directories": {
     "test": "jest"
   },
+  "peerDependencies": {
+    "react-dom": "^18.0.0",
+    "react": "^18.0.0"
+  },
+
   "devDependencies": {
     "@babel/preset-typescript": "^7.25.7",
     "@testing-library/react": "^16.0.0",
@@ -67,7 +72,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.15.7",
-    "@wavelengthusaf/web-components": "^1.2.0",
+    "@wavelengthusaf/web-components": "^1.3.1",
     "react": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.12",