@wavelengthusaf/components 4.18.0 → 4.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/index.cjs +52 -30
  2. package/dist/cjs/index.d.cts +11 -4
  3. package/dist/esm/index.d.ts +11 -4
  4. package/dist/esm/index.js +27 -5
  5. package/package.json +2 -2
package/dist/cjs/index.cjs CHANGED
@@ -3745,6 +3745,8 @@ var WavelengthSearch = ({
3745
3745
  placeholderFont,
3746
3746
  inputColor,
3747
3747
  inputFont,
3748
+ onSearchSubmit,
3749
+ onSearchSelect,
3748
3750
  ...rest
3749
3751
  // This rest operator includes className, style, onClick, etc.
3750
3752
  }) => {
@@ -3771,13 +3773,31 @@ var WavelengthSearch = ({
3771
3773
  syncAttribute("border-color", borderColor2);
3772
3774
  syncAttribute("background-color", backgroundColor2);
3773
3775
  syncAttribute("hover-color", hoverColor);
3774
- syncAttribute("options", options);
3776
+ if (options !== void 0) {
3777
+ el.options = options;
3778
+ }
3775
3779
  syncAttribute("icon-pos", iconPos);
3776
3780
  syncAttribute("placeholder", placeholder);
3777
3781
  syncAttribute("placeholder-color", placeholderColor);
3778
3782
  syncAttribute("placeholder-font", placeholderFont);
3779
3783
  syncAttribute("input-color", inputColor);
3780
3784
  syncAttribute("input-font", inputFont);
3785
+ const handleSearchSubmit = (e) => {
3786
+ if (onSearchSubmit) {
3787
+ onSearchSubmit(e.detail.value);
3788
+ }
3789
+ };
3790
+ const handleSearchSelect = (e) => {
3791
+ if (onSearchSelect) {
3792
+ onSearchSelect(e.detail.value);
3793
+ }
3794
+ };
3795
+ el.addEventListener("wavelength-search-submit", handleSearchSubmit);
3796
+ el.addEventListener("wavelength-search-select", handleSearchSelect);
3797
+ return () => {
3798
+ el.removeEventListener("wavelength-search-submit", handleSearchSubmit);
3799
+ el.removeEventListener("wavelength-search-select", handleSearchSelect);
3800
+ };
3781
3801
  }, [
3782
3802
  customStyle,
3783
3803
  width2,
@@ -3795,7 +3815,9 @@ var WavelengthSearch = ({
3795
3815
  placeholderColor,
3796
3816
  placeholderFont,
3797
3817
  inputColor,
3798
- inputFont
3818
+ inputFont,
3819
+ onSearchSubmit,
3820
+ onSearchSelect
3799
3821
  ]);
3800
3822
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-search", { ref, ...rest });
3801
3823
  };
@@ -5437,7 +5459,7 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
5437
5459
  const el = ref.current;
5438
5460
  if (!el) return;
5439
5461
  if (numberOfPlanes !== void 0) {
5440
- el.setAttribute("number-of-planes", numberOfPlanes);
5462
+ el.numberOfPlanes = numberOfPlanes;
5441
5463
  }
5442
5464
  if (trailDir !== void 0) {
5443
5465
  el.setAttribute("trail-dir", trailDir);
@@ -5452,10 +5474,10 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
5452
5474
  el.setAttribute("gradient", gradient);
5453
5475
  }
5454
5476
  if (spaced !== void 0) {
5455
- el.setAttribute("spaced", spaced);
5477
+ el.spaced = spaced;
5456
5478
  }
5457
5479
  }, [numberOfPlanes, trailDir, opacity, color2, gradient, spaced]);
5458
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced, ...rest, children });
5480
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced: _optionalChain([spaced, 'optionalAccess', _22 => _22.toString, 'call', _23 => _23()]), ...rest, children });
5459
5481
  };
5460
5482
  WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
5461
5483
 
@@ -5526,8 +5548,8 @@ function WavelengthConfirmationModal(props) {
5526
5548
  "font-family": props.fontFamily,
5527
5549
  "text-color": props.textColor,
5528
5550
  "background-color": props.backgroundColor,
5529
- "title-text": _optionalChain([props, 'access', _22 => _22.textObj, 'optionalAccess', _23 => _23.title]),
5530
- "dialog-text": _optionalChain([props, 'access', _24 => _24.textObj, 'optionalAccess', _25 => _25.dialog]),
5551
+ "title-text": _optionalChain([props, 'access', _24 => _24.textObj, 'optionalAccess', _25 => _25.title]),
5552
+ "dialog-text": _optionalChain([props, 'access', _26 => _26.textObj, 'optionalAccess', _27 => _27.dialog]),
5531
5553
  children: [
5532
5554
  props.cancelButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
5533
5555
  props.submitButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
@@ -5548,11 +5570,11 @@ function WavelengthContentModal(props) {
5548
5570
  };
5549
5571
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", id: props.id, children: [
5550
5572
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { display: "flex", alignItems: "center", children: [
5551
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _26 => _26.textObj, 'optionalAccess', _27 => _27.title]) }),
5573
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _28 => _28.textObj, 'optionalAccess', _29 => _29.title]) }),
5552
5574
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) }) })
5553
5575
  ] }) }),
5554
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _28 => _28.textObj, 'optionalAccess', _29 => _29.dialog]) }) }),
5555
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _30 => _30.textObj, 'optionalAccess', _31 => _31.purpose]) }) })
5576
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _30 => _30.textObj, 'optionalAccess', _31 => _31.dialog]) }) }),
5577
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _32 => _32.textObj, 'optionalAccess', _33 => _33.purpose]) }) })
5556
5578
  ] });
5557
5579
  }
5558
5580
  WavelengthContentModal.displayName = "WavelengthContentModal";
@@ -5807,8 +5829,8 @@ var WavelengthDialog = ({
5807
5829
  _react.useEffect.call(void 0, () => {
5808
5830
  const el = ref.current;
5809
5831
  if (!el) return;
5810
- const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _32 => _32(e)]);
5811
- const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _33 => _33(e)]);
5832
+ const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _34 => _34(e)]);
5833
+ const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _35 => _35(e)]);
5812
5834
  el.addEventListener("wl-left-btn-click", handleLeft);
5813
5835
  el.addEventListener("wl-right-btn-click", handleRight);
5814
5836
  return () => {
@@ -5906,8 +5928,8 @@ var WavelengthPagination = ({
5906
5928
  syncAttribute("active-text-color", activeTextColor || "");
5907
5929
  syncAttribute("background-color", backgroundColor2 || "");
5908
5930
  syncAttribute("disabled-color", disabledColor || "");
5909
- syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _34 => _34.toString, 'call', _35 => _35()]) || "");
5910
- syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _36 => _36.toString, 'call', _37 => _37()]) || "");
5931
+ syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _36 => _36.toString, 'call', _37 => _37()]) || "");
5932
+ syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _38 => _38.toString, 'call', _39 => _39()]) || "");
5911
5933
  const handlePageChange = (e) => {
5912
5934
  if (onPageChange) {
5913
5935
  onPageChange(e.detail.page);
@@ -6627,7 +6649,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
6627
6649
  const internalRef = _react.useRef.call(void 0, null);
6628
6650
  _react.useImperativeHandle.call(void 0, ref, () => ({
6629
6651
  ...internalRef.current,
6630
- validate: () => _optionalChain([internalRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.validate, 'optionalCall', _40 => _40(true)])
6652
+ validate: () => _optionalChain([internalRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.validate, 'optionalCall', _42 => _42(true)])
6631
6653
  }));
6632
6654
  _react.useEffect.call(void 0, () => {
6633
6655
  const el = internalRef.current;
@@ -6706,7 +6728,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
6706
6728
  const el = internalRef.current;
6707
6729
  if (!el || !onBlurCallback) return;
6708
6730
  const handler = (e) => {
6709
- const input = _optionalChain([el, 'access', _41 => _41.shadowRoot, 'optionalAccess', _42 => _42.querySelector, 'call', _43 => _43("input, textarea")]);
6731
+ const input = _optionalChain([el, 'access', _43 => _43.shadowRoot, 'optionalAccess', _44 => _44.querySelector, 'call', _45 => _45("input, textarea")]);
6710
6732
  if (input) {
6711
6733
  onBlurCallback();
6712
6734
  }
@@ -6718,7 +6740,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
6718
6740
  const el = internalRef.current;
6719
6741
  if (!el || !onChange) return;
6720
6742
  const handler = (e) => {
6721
- const input = _optionalChain([el, 'access', _44 => _44.shadowRoot, 'optionalAccess', _45 => _45.querySelector, 'call', _46 => _46("input, textarea")]);
6743
+ const input = _optionalChain([el, 'access', _46 => _46.shadowRoot, 'optionalAccess', _47 => _47.querySelector, 'call', _48 => _48("input, textarea")]);
6722
6744
  if (input) {
6723
6745
  const synthetic = {
6724
6746
  ...e,
@@ -6921,7 +6943,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
6921
6943
  const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
6922
6944
  const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
6923
6945
  const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
6924
- const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _47 => _47[0], 'optionalAccess', _48 => _48.key]) || "");
6946
+ const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _49 => _49[0], 'optionalAccess', _50 => _50.key]) || "");
6925
6947
  const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
6926
6948
  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
6927
6949
  const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7075,7 +7097,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
7075
7097
  ] }, index)
7076
7098
  ] }, `headCell-${index}`);
7077
7099
  });
7078
- const rows = !_optionalChain([currentPageData, 'optionalAccess', _49 => _49.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _50 => _50.map, 'call', _51 => _51((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
7100
+ const rows = !_optionalChain([currentPageData, 'optionalAccess', _51 => _51.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _52 => _52.map, 'call', _53 => _53((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
7079
7101
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
7080
7102
  StyledInput,
7081
7103
  {
@@ -7321,7 +7343,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
7321
7343
  }
7322
7344
  if (sortSubOrder) {
7323
7345
  result.map(
7324
- (item) => _optionalChain([item, 'access', _52 => _52.Details, 'optionalAccess', _53 => _53.fileObjects, 'access', _54 => _54.sort, 'call', _55 => _55((c, d) => {
7346
+ (item) => _optionalChain([item, 'access', _54 => _54.Details, 'optionalAccess', _55 => _55.fileObjects, 'access', _56 => _56.sort, 'call', _57 => _57((c, d) => {
7325
7347
  const valueC = c[sortSubKey];
7326
7348
  const valueD = d[sortSubKey];
7327
7349
  if (typeof valueC === "string" && typeof valueD === "string") {
@@ -7382,24 +7404,24 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
7382
7404
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
7383
7405
  });
7384
7406
  const subDataRows = (itemId) => {
7385
- return processedRowData.filter((item) => _optionalChain([item, 'access', _56 => _56.Details, 'optionalAccess', _57 => _57.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _58 => _58.Details, 'optionalAccess', _59 => _59.fileObjects, 'access', _60 => _60.map, 'call', _61 => _61((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
7407
+ return processedRowData.filter((item) => _optionalChain([item, 'access', _58 => _58.Details, 'optionalAccess', _59 => _59.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _60 => _60.Details, 'optionalAccess', _61 => _61.fileObjects, 'access', _62 => _62.map, 'call', _63 => _63((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
7386
7408
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
7387
7409
  "path",
7388
7410
  {
7389
7411
  d: "M8.5 12L3.5 7L4.9 5.55L7.5 8.15V0H9.5V8.15L12.1 5.55L13.5 7L8.5 12ZM2.5 16C1.95 16 1.47917 15.8042 1.0875 15.4125C0.695833 15.0208 0.5 14.55 0.5 14V11H2.5V14H14.5V11H16.5V14C16.5 14.55 16.3042 15.0208 15.9125 15.4125C15.5208 15.8042 15.05 16 14.5 16H2.5Z",
7390
7412
  fill: "#1C1B1F"
7391
7413
  }
7392
- ) }) }) }, `td-${_optionalChain([item, 'access', _62 => _62.Details, 'optionalAccess', _63 => _63.relationId])}-${fileItem.id}`),
7414
+ ) }) }) }, `td-${_optionalChain([item, 'access', _64 => _64.Details, 'optionalAccess', _65 => _65.relationId])}-${fileItem.id}`),
7393
7415
  SubDataColumns.map((column) => {
7394
7416
  const columnKey = trimBeforePeriod2(column.key);
7395
7417
  const value = fileItem[columnKey];
7396
7418
  if (value !== void 0) {
7397
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _64 => _64.Details, 'optionalAccess', _65 => _65.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}-${fileItem.id}-${index}-${column.title}`);
7419
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _68 => _68.Details, 'optionalAccess', _69 => _69.relationId])}-${fileItem.id}-${index}-${column.title}`);
7398
7420
  }
7399
7421
  })
7400
- ] }, `${item}-${_optionalChain([item, 'access', _68 => _68.Details, 'optionalAccess', _69 => _69.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _70 => _70.Details, 'optionalAccess', _71 => _71.relationId])}`));
7422
+ ] }, `${item}-${_optionalChain([item, 'access', _70 => _70.Details, 'optionalAccess', _71 => _71.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _72 => _72.Details, 'optionalAccess', _73 => _73.relationId])}`));
7401
7423
  };
7402
- const dataRows = _optionalChain([processedRowData, 'optionalAccess', _72 => _72.map, 'call', _73 => _73((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
7424
+ const dataRows = _optionalChain([processedRowData, 'optionalAccess', _74 => _74.map, 'call', _75 => _75((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
7403
7425
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
7404
7426
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonStylingRow, { children: [
7405
7427
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
@@ -7493,8 +7515,8 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
7493
7515
  root = _client.createRoot.call(void 0, container);
7494
7516
  dropdownRoots.current.set(container, root);
7495
7517
  }
7496
- const item = _optionalChain([data, 'optionalAccess', _74 => _74.find, 'call', _75 => _75((i) => String(i.id) === String(itemId))]);
7497
- if (_optionalChain([item, 'optionalAccess', _76 => _76.dropdown]) && root) {
7518
+ const item = _optionalChain([data, 'optionalAccess', _76 => _76.find, 'call', _77 => _77((i) => String(i.id) === String(itemId))]);
7519
+ if (_optionalChain([item, 'optionalAccess', _78 => _78.dropdown]) && root) {
7498
7520
  root.render(item.dropdown);
7499
7521
  }
7500
7522
  };
@@ -7622,9 +7644,9 @@ var NestedDataTable = ({ data, columns, id }) => {
7622
7644
  const SubDataHeaders = SubDataColumns.map((column, index) => {
7623
7645
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
7624
7646
  });
7625
- 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) => {
7647
+ const subDataRows = !_optionalChain([data, 'optionalAccess', _79 => _79.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) => {
7626
7648
  const columnKey = trimBeforePeriod(column.key);
7627
- const value = _optionalChain([item, 'access', _78 => _78.Details, 'optionalAccess', _79 => _79[columnKey]]);
7649
+ const value = _optionalChain([item, 'access', _80 => _80.Details, 'optionalAccess', _81 => _81[columnKey]]);
7628
7650
  console.log("value: ", value);
7629
7651
  if (value !== void 0) {
7630
7652
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }) }, `Span-${item.id}-${colIndex}`);
@@ -7634,7 +7656,7 @@ var NestedDataTable = ({ data, columns, id }) => {
7634
7656
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
7635
7657
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
7636
7658
  ] });
7637
- 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: [
7659
+ const rows = !_optionalChain([data, 'optionalAccess', _82 => _82.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', _83 => _83.map, 'call', _84 => _84((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
7638
7660
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrimaryTrRows, { $index: index, children: [
7639
7661
  /* @__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" }) }),
7640
7662
  HeadColumns.map((column, index2) => {
package/dist/cjs/index.d.cts CHANGED
@@ -175,6 +175,11 @@ interface StylableElement extends HTMLElement {
175
175
  customStyles?: StyleProp;
176
176
  }
177
177
 
178
+ interface SearchResult {
179
+ id: number | string;
180
+ title: string;
181
+ subtitle?: string;
182
+ }
178
183
  interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElement> {
179
184
  testProp?: string;
180
185
  customStyle: StyleProp;
@@ -188,12 +193,14 @@ interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElemen
188
193
  backgroundColor?: string;
189
194
  iconPos?: "start" | "end";
190
195
  hoverColor?: string;
191
- options?: string;
196
+ options?: SearchResult[];
192
197
  placeholder?: string;
193
198
  placeholderColor?: string;
194
199
  placeholderFont?: string;
195
200
  inputColor?: string;
196
201
  inputFont?: string;
202
+ onSearchSubmit?: (query: string) => void;
203
+ onSearchSelect?: (option: SearchResult) => void;
197
204
  }
198
205
  declare const WavelengthSearch: React__default.FC<WavelengthSearchProps>;
199
206
 
@@ -592,12 +599,12 @@ declare namespace WavelengthDefaultIcon {
592
599
  }
593
600
 
594
601
  interface WavelengthManyPlanesProps extends React__default.HTMLAttributes<HTMLElement> {
595
- numberOfPlanes?: string;
602
+ numberOfPlanes?: number;
596
603
  trailDir?: string;
597
604
  opacity?: string;
598
605
  color?: string;
599
606
  gradient?: string;
600
- spaced?: string;
607
+ spaced?: boolean;
601
608
  }
602
609
  declare const WavelengthManyPlanes: React__default.FC<WavelengthManyPlanesProps>;
603
610
 
@@ -1095,4 +1102,4 @@ interface MultiSelectAutocompleteProps {
1095
1102
  }
1096
1103
  declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
1097
1104
 
1098
- export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDialog, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthSwitch, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, findBestStringMatch, useOutsideClick, useThemeContext };
1105
+ export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDialog, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthSwitch, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, findBestStringMatch, useOutsideClick, useThemeContext };
package/dist/esm/index.d.ts CHANGED
@@ -175,6 +175,11 @@ interface StylableElement extends HTMLElement {
175
175
  customStyles?: StyleProp;
176
176
  }
177
177
 
178
+ interface SearchResult {
179
+ id: number | string;
180
+ title: string;
181
+ subtitle?: string;
182
+ }
178
183
  interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElement> {
179
184
  testProp?: string;
180
185
  customStyle: StyleProp;
@@ -188,12 +193,14 @@ interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElemen
188
193
  backgroundColor?: string;
189
194
  iconPos?: "start" | "end";
190
195
  hoverColor?: string;
191
- options?: string;
196
+ options?: SearchResult[];
192
197
  placeholder?: string;
193
198
  placeholderColor?: string;
194
199
  placeholderFont?: string;
195
200
  inputColor?: string;
196
201
  inputFont?: string;
202
+ onSearchSubmit?: (query: string) => void;
203
+ onSearchSelect?: (option: SearchResult) => void;
197
204
  }
198
205
  declare const WavelengthSearch: React__default.FC<WavelengthSearchProps>;
199
206
 
@@ -592,12 +599,12 @@ declare namespace WavelengthDefaultIcon {
592
599
  }
593
600
 
594
601
  interface WavelengthManyPlanesProps extends React__default.HTMLAttributes<HTMLElement> {
595
- numberOfPlanes?: string;
602
+ numberOfPlanes?: number;
596
603
  trailDir?: string;
597
604
  opacity?: string;
598
605
  color?: string;
599
606
  gradient?: string;
600
- spaced?: string;
607
+ spaced?: boolean;
601
608
  }
602
609
  declare const WavelengthManyPlanes: React__default.FC<WavelengthManyPlanesProps>;
603
610
 
@@ -1095,4 +1102,4 @@ interface MultiSelectAutocompleteProps {
1095
1102
  }
1096
1103
  declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
1097
1104
 
1098
- export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDialog, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthSwitch, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, findBestStringMatch, useOutsideClick, useThemeContext };
1105
+ export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDialog, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthSwitch, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, findBestStringMatch, useOutsideClick, useThemeContext };
package/dist/esm/index.js CHANGED
@@ -3745,6 +3745,8 @@ var WavelengthSearch = ({
3745
3745
  placeholderFont,
3746
3746
  inputColor,
3747
3747
  inputFont,
3748
+ onSearchSubmit,
3749
+ onSearchSelect,
3748
3750
  ...rest
3749
3751
  // This rest operator includes className, style, onClick, etc.
3750
3752
  }) => {
@@ -3771,13 +3773,31 @@ var WavelengthSearch = ({
3771
3773
  syncAttribute("border-color", borderColor2);
3772
3774
  syncAttribute("background-color", backgroundColor2);
3773
3775
  syncAttribute("hover-color", hoverColor);
3774
- syncAttribute("options", options);
3776
+ if (options !== void 0) {
3777
+ el.options = options;
3778
+ }
3775
3779
  syncAttribute("icon-pos", iconPos);
3776
3780
  syncAttribute("placeholder", placeholder);
3777
3781
  syncAttribute("placeholder-color", placeholderColor);
3778
3782
  syncAttribute("placeholder-font", placeholderFont);
3779
3783
  syncAttribute("input-color", inputColor);
3780
3784
  syncAttribute("input-font", inputFont);
3785
+ const handleSearchSubmit = (e) => {
3786
+ if (onSearchSubmit) {
3787
+ onSearchSubmit(e.detail.value);
3788
+ }
3789
+ };
3790
+ const handleSearchSelect = (e) => {
3791
+ if (onSearchSelect) {
3792
+ onSearchSelect(e.detail.value);
3793
+ }
3794
+ };
3795
+ el.addEventListener("wavelength-search-submit", handleSearchSubmit);
3796
+ el.addEventListener("wavelength-search-select", handleSearchSelect);
3797
+ return () => {
3798
+ el.removeEventListener("wavelength-search-submit", handleSearchSubmit);
3799
+ el.removeEventListener("wavelength-search-select", handleSearchSelect);
3800
+ };
3781
3801
  }, [
3782
3802
  customStyle,
3783
3803
  width2,
@@ -3795,7 +3815,9 @@ var WavelengthSearch = ({
3795
3815
  placeholderColor,
3796
3816
  placeholderFont,
3797
3817
  inputColor,
3798
- inputFont
3818
+ inputFont,
3819
+ onSearchSubmit,
3820
+ onSearchSelect
3799
3821
  ]);
3800
3822
  return /* @__PURE__ */ jsx8("wavelength-search", { ref, ...rest });
3801
3823
  };
@@ -5437,7 +5459,7 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
5437
5459
  const el = ref.current;
5438
5460
  if (!el) return;
5439
5461
  if (numberOfPlanes !== void 0) {
5440
- el.setAttribute("number-of-planes", numberOfPlanes);
5462
+ el.numberOfPlanes = numberOfPlanes;
5441
5463
  }
5442
5464
  if (trailDir !== void 0) {
5443
5465
  el.setAttribute("trail-dir", trailDir);
@@ -5452,10 +5474,10 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
5452
5474
  el.setAttribute("gradient", gradient);
5453
5475
  }
5454
5476
  if (spaced !== void 0) {
5455
- el.setAttribute("spaced", spaced);
5477
+ el.spaced = spaced;
5456
5478
  }
5457
5479
  }, [numberOfPlanes, trailDir, opacity, color2, gradient, spaced]);
5458
- return /* @__PURE__ */ jsx31("wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced, ...rest, children });
5480
+ return /* @__PURE__ */ jsx31("wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced: spaced?.toString(), ...rest, children });
5459
5481
  };
5460
5482
  WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
5461
5483
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@wavelengthusaf/components",
3
3
  "author": "563 EWS - Wavelength",
4
4
  "license": "MIT",
5
- "version": "4.18.0",
5
+ "version": "4.21.0",
6
6
  "description": "Common component library used by Wavelength developers",
7
7
  "main": "/dist/cjs/index.cjs",
8
8
  "module": "/dist/esm/index.js",
@@ -71,7 +71,7 @@
71
71
  "@emotion/styled": "^11.11.0",
72
72
  "@mui/icons-material": "^5.16.5",
73
73
  "@mui/material": "^5.15.7",
74
- "@wavelengthusaf/web-components": "^1.17.0",
74
+ "@wavelengthusaf/web-components": "^1.21.0",
75
75
  "react": "^18.2.0",
76
76
  "react-router-dom": "^6.26.2",
77
77
  "styled-components": "^6.1.12",