@wavelengthusaf/components 4.18.0 → 4.21.1

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 +55 -31
  2. package/dist/cjs/index.d.cts +12 -6
  3. package/dist/esm/index.d.ts +12 -6
  4. package/dist/esm/index.js +30 -6
  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
  }) => {
@@ -3761,7 +3763,9 @@ var WavelengthSearch = ({
3761
3763
  _react.useEffect.call(void 0, () => {
3762
3764
  const el = ref.current;
3763
3765
  if (!el) return;
3764
- el.customStyles = customStyle;
3766
+ if (customStyle) {
3767
+ el.customStyles = customStyle;
3768
+ }
3765
3769
  syncAttribute("width", width2);
3766
3770
  syncAttribute("mode", mode);
3767
3771
  syncAttribute("font-size", fontSize);
@@ -3771,13 +3775,31 @@ var WavelengthSearch = ({
3771
3775
  syncAttribute("border-color", borderColor2);
3772
3776
  syncAttribute("background-color", backgroundColor2);
3773
3777
  syncAttribute("hover-color", hoverColor);
3774
- syncAttribute("options", options);
3778
+ if (options !== void 0) {
3779
+ el.options = options;
3780
+ }
3775
3781
  syncAttribute("icon-pos", iconPos);
3776
3782
  syncAttribute("placeholder", placeholder);
3777
3783
  syncAttribute("placeholder-color", placeholderColor);
3778
3784
  syncAttribute("placeholder-font", placeholderFont);
3779
3785
  syncAttribute("input-color", inputColor);
3780
3786
  syncAttribute("input-font", inputFont);
3787
+ const handleSearchSubmit = (e) => {
3788
+ if (onSearchSubmit) {
3789
+ onSearchSubmit(e.detail.value);
3790
+ }
3791
+ };
3792
+ const handleSearchSelect = (e) => {
3793
+ if (onSearchSelect) {
3794
+ onSearchSelect(e.detail.value);
3795
+ }
3796
+ };
3797
+ el.addEventListener("wavelength-search-submit", handleSearchSubmit);
3798
+ el.addEventListener("wavelength-search-select", handleSearchSelect);
3799
+ return () => {
3800
+ el.removeEventListener("wavelength-search-submit", handleSearchSubmit);
3801
+ el.removeEventListener("wavelength-search-select", handleSearchSelect);
3802
+ };
3781
3803
  }, [
3782
3804
  customStyle,
3783
3805
  width2,
@@ -3795,7 +3817,9 @@ var WavelengthSearch = ({
3795
3817
  placeholderColor,
3796
3818
  placeholderFont,
3797
3819
  inputColor,
3798
- inputFont
3820
+ inputFont,
3821
+ onSearchSubmit,
3822
+ onSearchSelect
3799
3823
  ]);
3800
3824
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-search", { ref, ...rest });
3801
3825
  };
@@ -5437,7 +5461,7 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
5437
5461
  const el = ref.current;
5438
5462
  if (!el) return;
5439
5463
  if (numberOfPlanes !== void 0) {
5440
- el.setAttribute("number-of-planes", numberOfPlanes);
5464
+ el.numberOfPlanes = numberOfPlanes;
5441
5465
  }
5442
5466
  if (trailDir !== void 0) {
5443
5467
  el.setAttribute("trail-dir", trailDir);
@@ -5452,10 +5476,10 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
5452
5476
  el.setAttribute("gradient", gradient);
5453
5477
  }
5454
5478
  if (spaced !== void 0) {
5455
- el.setAttribute("spaced", spaced);
5479
+ el.spaced = spaced;
5456
5480
  }
5457
5481
  }, [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 });
5482
+ 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
5483
  };
5460
5484
  WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
5461
5485
 
@@ -5526,8 +5550,8 @@ function WavelengthConfirmationModal(props) {
5526
5550
  "font-family": props.fontFamily,
5527
5551
  "text-color": props.textColor,
5528
5552
  "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]),
5553
+ "title-text": _optionalChain([props, 'access', _24 => _24.textObj, 'optionalAccess', _25 => _25.title]),
5554
+ "dialog-text": _optionalChain([props, 'access', _26 => _26.textObj, 'optionalAccess', _27 => _27.dialog]),
5531
5555
  children: [
5532
5556
  props.cancelButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
5533
5557
  props.submitButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
@@ -5548,11 +5572,11 @@ function WavelengthContentModal(props) {
5548
5572
  };
5549
5573
  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
5574
  /* @__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]) }),
5575
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _28 => _28.textObj, 'optionalAccess', _29 => _29.title]) }),
5552
5576
  /* @__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
5577
  ] }) }),
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]) }) })
5578
+ /* @__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]) }) }),
5579
+ /* @__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
5580
  ] });
5557
5581
  }
5558
5582
  WavelengthContentModal.displayName = "WavelengthContentModal";
@@ -5807,8 +5831,8 @@ var WavelengthDialog = ({
5807
5831
  _react.useEffect.call(void 0, () => {
5808
5832
  const el = ref.current;
5809
5833
  if (!el) return;
5810
- const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _32 => _32(e)]);
5811
- const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _33 => _33(e)]);
5834
+ const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _34 => _34(e)]);
5835
+ const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _35 => _35(e)]);
5812
5836
  el.addEventListener("wl-left-btn-click", handleLeft);
5813
5837
  el.addEventListener("wl-right-btn-click", handleRight);
5814
5838
  return () => {
@@ -5906,8 +5930,8 @@ var WavelengthPagination = ({
5906
5930
  syncAttribute("active-text-color", activeTextColor || "");
5907
5931
  syncAttribute("background-color", backgroundColor2 || "");
5908
5932
  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()]) || "");
5933
+ syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _36 => _36.toString, 'call', _37 => _37()]) || "");
5934
+ syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _38 => _38.toString, 'call', _39 => _39()]) || "");
5911
5935
  const handlePageChange = (e) => {
5912
5936
  if (onPageChange) {
5913
5937
  onPageChange(e.detail.page);
@@ -6627,7 +6651,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
6627
6651
  const internalRef = _react.useRef.call(void 0, null);
6628
6652
  _react.useImperativeHandle.call(void 0, ref, () => ({
6629
6653
  ...internalRef.current,
6630
- validate: () => _optionalChain([internalRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.validate, 'optionalCall', _40 => _40(true)])
6654
+ validate: () => _optionalChain([internalRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.validate, 'optionalCall', _42 => _42(true)])
6631
6655
  }));
6632
6656
  _react.useEffect.call(void 0, () => {
6633
6657
  const el = internalRef.current;
@@ -6706,7 +6730,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
6706
6730
  const el = internalRef.current;
6707
6731
  if (!el || !onBlurCallback) return;
6708
6732
  const handler = (e) => {
6709
- const input = _optionalChain([el, 'access', _41 => _41.shadowRoot, 'optionalAccess', _42 => _42.querySelector, 'call', _43 => _43("input, textarea")]);
6733
+ const input = _optionalChain([el, 'access', _43 => _43.shadowRoot, 'optionalAccess', _44 => _44.querySelector, 'call', _45 => _45("input, textarea")]);
6710
6734
  if (input) {
6711
6735
  onBlurCallback();
6712
6736
  }
@@ -6718,7 +6742,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
6718
6742
  const el = internalRef.current;
6719
6743
  if (!el || !onChange) return;
6720
6744
  const handler = (e) => {
6721
- const input = _optionalChain([el, 'access', _44 => _44.shadowRoot, 'optionalAccess', _45 => _45.querySelector, 'call', _46 => _46("input, textarea")]);
6745
+ const input = _optionalChain([el, 'access', _46 => _46.shadowRoot, 'optionalAccess', _47 => _47.querySelector, 'call', _48 => _48("input, textarea")]);
6722
6746
  if (input) {
6723
6747
  const synthetic = {
6724
6748
  ...e,
@@ -6921,7 +6945,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
6921
6945
  const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
6922
6946
  const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
6923
6947
  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]) || "");
6948
+ const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _49 => _49[0], 'optionalAccess', _50 => _50.key]) || "");
6925
6949
  const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
6926
6950
  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
6927
6951
  const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7075,7 +7099,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
7075
7099
  ] }, index)
7076
7100
  ] }, `headCell-${index}`);
7077
7101
  });
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) => {
7102
+ 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
7103
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
7080
7104
  StyledInput,
7081
7105
  {
@@ -7321,7 +7345,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
7321
7345
  }
7322
7346
  if (sortSubOrder) {
7323
7347
  result.map(
7324
- (item) => _optionalChain([item, 'access', _52 => _52.Details, 'optionalAccess', _53 => _53.fileObjects, 'access', _54 => _54.sort, 'call', _55 => _55((c, d) => {
7348
+ (item) => _optionalChain([item, 'access', _54 => _54.Details, 'optionalAccess', _55 => _55.fileObjects, 'access', _56 => _56.sort, 'call', _57 => _57((c, d) => {
7325
7349
  const valueC = c[sortSubKey];
7326
7350
  const valueD = d[sortSubKey];
7327
7351
  if (typeof valueC === "string" && typeof valueD === "string") {
@@ -7382,24 +7406,24 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
7382
7406
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
7383
7407
  });
7384
7408
  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: [
7409
+ 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
7410
  /* @__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
7411
  "path",
7388
7412
  {
7389
7413
  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
7414
  fill: "#1C1B1F"
7391
7415
  }
7392
- ) }) }) }, `td-${_optionalChain([item, 'access', _62 => _62.Details, 'optionalAccess', _63 => _63.relationId])}-${fileItem.id}`),
7416
+ ) }) }) }, `td-${_optionalChain([item, 'access', _64 => _64.Details, 'optionalAccess', _65 => _65.relationId])}-${fileItem.id}`),
7393
7417
  SubDataColumns.map((column) => {
7394
7418
  const columnKey = trimBeforePeriod2(column.key);
7395
7419
  const value = fileItem[columnKey];
7396
7420
  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}`);
7421
+ 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
7422
  }
7399
7423
  })
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])}`));
7424
+ ] }, `${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
7425
  };
7402
- const dataRows = _optionalChain([processedRowData, 'optionalAccess', _72 => _72.map, 'call', _73 => _73((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
7426
+ const dataRows = _optionalChain([processedRowData, 'optionalAccess', _74 => _74.map, 'call', _75 => _75((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
7403
7427
  /* @__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
7428
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonStylingRow, { children: [
7405
7429
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
@@ -7493,8 +7517,8 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
7493
7517
  root = _client.createRoot.call(void 0, container);
7494
7518
  dropdownRoots.current.set(container, root);
7495
7519
  }
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) {
7520
+ const item = _optionalChain([data, 'optionalAccess', _76 => _76.find, 'call', _77 => _77((i) => String(i.id) === String(itemId))]);
7521
+ if (_optionalChain([item, 'optionalAccess', _78 => _78.dropdown]) && root) {
7498
7522
  root.render(item.dropdown);
7499
7523
  }
7500
7524
  };
@@ -7622,9 +7646,9 @@ var NestedDataTable = ({ data, columns, id }) => {
7622
7646
  const SubDataHeaders = SubDataColumns.map((column, index) => {
7623
7647
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
7624
7648
  });
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) => {
7649
+ 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
7650
  const columnKey = trimBeforePeriod(column.key);
7627
- const value = _optionalChain([item, 'access', _78 => _78.Details, 'optionalAccess', _79 => _79[columnKey]]);
7651
+ const value = _optionalChain([item, 'access', _80 => _80.Details, 'optionalAccess', _81 => _81[columnKey]]);
7628
7652
  console.log("value: ", value);
7629
7653
  if (value !== void 0) {
7630
7654
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }) }, `Span-${item.id}-${colIndex}`);
@@ -7634,7 +7658,7 @@ var NestedDataTable = ({ data, columns, id }) => {
7634
7658
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
7635
7659
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
7636
7660
  ] });
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: [
7661
+ 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
7662
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrimaryTrRows, { $index: index, children: [
7639
7663
  /* @__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
7664
  HeadColumns.map((column, index2) => {
package/dist/cjs/index.d.cts CHANGED
@@ -175,9 +175,13 @@ 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
- testProp?: string;
180
- customStyle: StyleProp;
184
+ customStyle?: StyleProp;
181
185
  width?: string;
182
186
  mode?: string;
183
187
  fontSize?: string;
@@ -188,12 +192,14 @@ interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElemen
188
192
  backgroundColor?: string;
189
193
  iconPos?: "start" | "end";
190
194
  hoverColor?: string;
191
- options?: string;
195
+ options?: SearchResult[];
192
196
  placeholder?: string;
193
197
  placeholderColor?: string;
194
198
  placeholderFont?: string;
195
199
  inputColor?: string;
196
200
  inputFont?: string;
201
+ onSearchSubmit?: (query: string) => void;
202
+ onSearchSelect?: (option: SearchResult) => void;
197
203
  }
198
204
  declare const WavelengthSearch: React__default.FC<WavelengthSearchProps>;
199
205
 
@@ -592,12 +598,12 @@ declare namespace WavelengthDefaultIcon {
592
598
  }
593
599
 
594
600
  interface WavelengthManyPlanesProps extends React__default.HTMLAttributes<HTMLElement> {
595
- numberOfPlanes?: string;
601
+ numberOfPlanes?: number;
596
602
  trailDir?: string;
597
603
  opacity?: string;
598
604
  color?: string;
599
605
  gradient?: string;
600
- spaced?: string;
606
+ spaced?: boolean;
601
607
  }
602
608
  declare const WavelengthManyPlanes: React__default.FC<WavelengthManyPlanesProps>;
603
609
 
@@ -1095,4 +1101,4 @@ interface MultiSelectAutocompleteProps {
1095
1101
  }
1096
1102
  declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
1097
1103
 
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 };
1104
+ 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,9 +175,13 @@ 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
- testProp?: string;
180
- customStyle: StyleProp;
184
+ customStyle?: StyleProp;
181
185
  width?: string;
182
186
  mode?: string;
183
187
  fontSize?: string;
@@ -188,12 +192,14 @@ interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElemen
188
192
  backgroundColor?: string;
189
193
  iconPos?: "start" | "end";
190
194
  hoverColor?: string;
191
- options?: string;
195
+ options?: SearchResult[];
192
196
  placeholder?: string;
193
197
  placeholderColor?: string;
194
198
  placeholderFont?: string;
195
199
  inputColor?: string;
196
200
  inputFont?: string;
201
+ onSearchSubmit?: (query: string) => void;
202
+ onSearchSelect?: (option: SearchResult) => void;
197
203
  }
198
204
  declare const WavelengthSearch: React__default.FC<WavelengthSearchProps>;
199
205
 
@@ -592,12 +598,12 @@ declare namespace WavelengthDefaultIcon {
592
598
  }
593
599
 
594
600
  interface WavelengthManyPlanesProps extends React__default.HTMLAttributes<HTMLElement> {
595
- numberOfPlanes?: string;
601
+ numberOfPlanes?: number;
596
602
  trailDir?: string;
597
603
  opacity?: string;
598
604
  color?: string;
599
605
  gradient?: string;
600
- spaced?: string;
606
+ spaced?: boolean;
601
607
  }
602
608
  declare const WavelengthManyPlanes: React__default.FC<WavelengthManyPlanesProps>;
603
609
 
@@ -1095,4 +1101,4 @@ interface MultiSelectAutocompleteProps {
1095
1101
  }
1096
1102
  declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
1097
1103
 
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 };
1104
+ 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
  }) => {
@@ -3761,7 +3763,9 @@ var WavelengthSearch = ({
3761
3763
  useEffect2(() => {
3762
3764
  const el = ref.current;
3763
3765
  if (!el) return;
3764
- el.customStyles = customStyle;
3766
+ if (customStyle) {
3767
+ el.customStyles = customStyle;
3768
+ }
3765
3769
  syncAttribute("width", width2);
3766
3770
  syncAttribute("mode", mode);
3767
3771
  syncAttribute("font-size", fontSize);
@@ -3771,13 +3775,31 @@ var WavelengthSearch = ({
3771
3775
  syncAttribute("border-color", borderColor2);
3772
3776
  syncAttribute("background-color", backgroundColor2);
3773
3777
  syncAttribute("hover-color", hoverColor);
3774
- syncAttribute("options", options);
3778
+ if (options !== void 0) {
3779
+ el.options = options;
3780
+ }
3775
3781
  syncAttribute("icon-pos", iconPos);
3776
3782
  syncAttribute("placeholder", placeholder);
3777
3783
  syncAttribute("placeholder-color", placeholderColor);
3778
3784
  syncAttribute("placeholder-font", placeholderFont);
3779
3785
  syncAttribute("input-color", inputColor);
3780
3786
  syncAttribute("input-font", inputFont);
3787
+ const handleSearchSubmit = (e) => {
3788
+ if (onSearchSubmit) {
3789
+ onSearchSubmit(e.detail.value);
3790
+ }
3791
+ };
3792
+ const handleSearchSelect = (e) => {
3793
+ if (onSearchSelect) {
3794
+ onSearchSelect(e.detail.value);
3795
+ }
3796
+ };
3797
+ el.addEventListener("wavelength-search-submit", handleSearchSubmit);
3798
+ el.addEventListener("wavelength-search-select", handleSearchSelect);
3799
+ return () => {
3800
+ el.removeEventListener("wavelength-search-submit", handleSearchSubmit);
3801
+ el.removeEventListener("wavelength-search-select", handleSearchSelect);
3802
+ };
3781
3803
  }, [
3782
3804
  customStyle,
3783
3805
  width2,
@@ -3795,7 +3817,9 @@ var WavelengthSearch = ({
3795
3817
  placeholderColor,
3796
3818
  placeholderFont,
3797
3819
  inputColor,
3798
- inputFont
3820
+ inputFont,
3821
+ onSearchSubmit,
3822
+ onSearchSelect
3799
3823
  ]);
3800
3824
  return /* @__PURE__ */ jsx8("wavelength-search", { ref, ...rest });
3801
3825
  };
@@ -5437,7 +5461,7 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
5437
5461
  const el = ref.current;
5438
5462
  if (!el) return;
5439
5463
  if (numberOfPlanes !== void 0) {
5440
- el.setAttribute("number-of-planes", numberOfPlanes);
5464
+ el.numberOfPlanes = numberOfPlanes;
5441
5465
  }
5442
5466
  if (trailDir !== void 0) {
5443
5467
  el.setAttribute("trail-dir", trailDir);
@@ -5452,10 +5476,10 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
5452
5476
  el.setAttribute("gradient", gradient);
5453
5477
  }
5454
5478
  if (spaced !== void 0) {
5455
- el.setAttribute("spaced", spaced);
5479
+ el.spaced = spaced;
5456
5480
  }
5457
5481
  }, [numberOfPlanes, trailDir, opacity, color2, gradient, spaced]);
5458
- return /* @__PURE__ */ jsx31("wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced, ...rest, children });
5482
+ return /* @__PURE__ */ jsx31("wavelength-manyplanes", { ref, trailDir, opacity, color: color2, gradient, spaced: spaced?.toString(), ...rest, children });
5459
5483
  };
5460
5484
  WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
5461
5485
 
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.1",
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.1",
75
75
  "react": "^18.2.0",
76
76
  "react-router-dom": "^6.26.2",
77
77
  "styled-components": "^6.1.12",