@wavelengthusaf/components 4.15.0 → 4.16.0

package/dist/cjs/index.cjs

@@ -6463,32 +6463,36 @@ WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
 
 // src/components/sliders/WavelengthSlider.tsx
 
-var _Slider = require('@mui/material/Slider'); var _Slider2 = _interopRequireDefault(_Slider);
 
-function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, id, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
-  const on = valueDisplayed ? "on" : "off";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { width: width2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Slider2.default,
-    {
-      id,
-      "aria-label": "Custom marks",
+var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, handleChange, labelFunc, valueDisplayed, marks, color: color2, width: width2, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle;
+    const attrs = {
       value,
-      getAriaValueText: labelFunc,
+      "max-val": maxVal,
+      "min-val": minVal,
       step,
-      marks,
-      valueLabelDisplay: on,
-      max: maxVal,
-      min: minVal,
-      onChange: handleChange,
-      sx: {
-        color: color2,
-        "& .MuiSlider-markLabel": {
-          color: labelColor
-        }
-      }
-    }
-  ) });
-}
+      marks: marks ? JSON.stringify(marks) : void 0,
+      color: color2,
+      width: width2,
+      "value-displayed": _nullishCoalesce(valueDisplayed, () => ( (labelFunc && value !== void 0 ? labelFunc(value) : void 0)))
+    };
+    Object.entries(attrs).forEach(([key, val]) => {
+      if (val !== void 0) el.setAttribute(key, val.toString());
+    });
+  }, [value, maxVal, minVal, step, marks, customStyle, color2, width2, valueDisplayed, labelFunc]);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el || !handleChange) return;
+    const onSliderChange = (e) => handleChange(e, e.detail.value);
+    el.addEventListener("slider-change", onSliderChange);
+    return () => el.removeEventListener("slider-change", onSliderChange);
+  }, [handleChange]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-slider", { ref, ...rest, children });
+};
 WavelengthSlider.displayName = "WavelengthSlider";
 
 // src/components/carousels/WavelengthDefaultCarousel.tsx

package/dist/cjs/index.d.cts

@@ -5,7 +5,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants } from '@mui/material';
 import { CSSProperties } from 'styled-components';
 import { z } from 'zod';
-import { Mark } from '@mui/material/Slider/useSlider.types';
 
 /**
  * Helper Functions
@@ -173,7 +172,7 @@ type StyleProp = {
 } & CSSProperties;
 /** Extending from this instead of HTMLElement in component refs allows for integration with the styling mixin in web components*/
 interface StylableElement extends HTMLElement {
-    customStyles: StyleProp;
+    customStyles?: StyleProp;
 }
 
 interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElement> {
@@ -856,24 +855,23 @@ declare namespace WavelengthTestSnackbar {
     var displayName: string;
 }
 
-interface sliderProps {
-    width?: string;
-    labelColor?: string;
+interface WavelengthSliderProps extends React__default.HTMLAttributes<HTMLElement> {
+    customStyle?: StyleProp;
+    value?: number;
+    maxVal?: number;
+    minVal?: number;
+    step?: number;
+    handleChange?: (event: Event, newValue: number | number[]) => void;
+    labelFunc?: (val: number) => string;
+    valueDisplayed?: string;
+    marks?: (number | {
+        value: number;
+        label: string;
+    })[];
     color?: string;
-    value: number;
-    id?: string;
-    valueDisplayed?: boolean;
-    minVal: number;
-    maxVal: number;
-    step: number;
-    handleChange: (event: Event, newValue: number | number[]) => void;
-    labelFunc?(val: number): string;
-    marks?: Mark[];
-}
-declare function WavelengthSlider({ width, color, valueDisplayed, marks, labelColor, value, id, maxVal, minVal, step, labelFunc, handleChange }: sliderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSlider {
-    var displayName: string;
+    width?: string;
 }
+declare const WavelengthSlider: React__default.FC<WavelengthSliderProps>;
 
 interface carouselItem$1 {
     title?: string;

package/dist/esm/index.d.ts

@@ -5,7 +5,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants } from '@mui/material';
 import { CSSProperties } from 'styled-components';
 import { z } from 'zod';
-import { Mark } from '@mui/material/Slider/useSlider.types';
 
 /**
  * Helper Functions
@@ -173,7 +172,7 @@ type StyleProp = {
 } & CSSProperties;
 /** Extending from this instead of HTMLElement in component refs allows for integration with the styling mixin in web components*/
 interface StylableElement extends HTMLElement {
-    customStyles: StyleProp;
+    customStyles?: StyleProp;
 }
 
 interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElement> {
@@ -856,24 +855,23 @@ declare namespace WavelengthTestSnackbar {
     var displayName: string;
 }
 
-interface sliderProps {
-    width?: string;
-    labelColor?: string;
+interface WavelengthSliderProps extends React__default.HTMLAttributes<HTMLElement> {
+    customStyle?: StyleProp;
+    value?: number;
+    maxVal?: number;
+    minVal?: number;
+    step?: number;
+    handleChange?: (event: Event, newValue: number | number[]) => void;
+    labelFunc?: (val: number) => string;
+    valueDisplayed?: string;
+    marks?: (number | {
+        value: number;
+        label: string;
+    })[];
     color?: string;
-    value: number;
-    id?: string;
-    valueDisplayed?: boolean;
-    minVal: number;
-    maxVal: number;
-    step: number;
-    handleChange: (event: Event, newValue: number | number[]) => void;
-    labelFunc?(val: number): string;
-    marks?: Mark[];
-}
-declare function WavelengthSlider({ width, color, valueDisplayed, marks, labelColor, value, id, maxVal, minVal, step, labelFunc, handleChange }: sliderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSlider {
-    var displayName: string;
+    width?: string;
 }
+declare const WavelengthSlider: React__default.FC<WavelengthSliderProps>;
 
 interface carouselItem$1 {
     title?: string;

package/dist/esm/index.js

@@ -6462,33 +6462,37 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
 WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
 
 // src/components/sliders/WavelengthSlider.tsx
-import Box4 from "@mui/material/Box";
-import Slider from "@mui/material/Slider";
+import { useRef as useRef22, useEffect as useEffect22 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
-function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, id, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
-  const on = valueDisplayed ? "on" : "off";
-  return /* @__PURE__ */ jsx47(Box4, { sx: { width: width2 }, children: /* @__PURE__ */ jsx47(
-    Slider,
-    {
-      id,
-      "aria-label": "Custom marks",
+var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, handleChange, labelFunc, valueDisplayed, marks, color: color2, width: width2, ...rest }) => {
+  const ref = useRef22(null);
+  useEffect22(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle;
+    const attrs = {
       value,
-      getAriaValueText: labelFunc,
+      "max-val": maxVal,
+      "min-val": minVal,
       step,
-      marks,
-      valueLabelDisplay: on,
-      max: maxVal,
-      min: minVal,
-      onChange: handleChange,
-      sx: {
-        color: color2,
-        "& .MuiSlider-markLabel": {
-          color: labelColor
-        }
-      }
-    }
-  ) });
-}
+      marks: marks ? JSON.stringify(marks) : void 0,
+      color: color2,
+      width: width2,
+      "value-displayed": valueDisplayed ?? (labelFunc && value !== void 0 ? labelFunc(value) : void 0)
+    };
+    Object.entries(attrs).forEach(([key, val]) => {
+      if (val !== void 0) el.setAttribute(key, val.toString());
+    });
+  }, [value, maxVal, minVal, step, marks, customStyle, color2, width2, valueDisplayed, labelFunc]);
+  useEffect22(() => {
+    const el = ref.current;
+    if (!el || !handleChange) return;
+    const onSliderChange = (e) => handleChange(e, e.detail.value);
+    el.addEventListener("slider-change", onSliderChange);
+    return () => el.removeEventListener("slider-change", onSliderChange);
+  }, [handleChange]);
+  return /* @__PURE__ */ jsx47("wavelength-slider", { ref, ...rest, children });
+};
 WavelengthSlider.displayName = "WavelengthSlider";
 
 // src/components/carousels/WavelengthDefaultCarousel.tsx
@@ -6553,7 +6557,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 DefaultCarousel.displayName = "DefaultCarousel";
 
 // src/components/carousels/WavelengthSliderCarousel.tsx
-import { useState as useState8, useEffect as useEffect23 } from "react";
+import { useState as useState8, useEffect as useEffect24 } from "react";
 import Grid4 from "@mui/material/Grid";
 import Card2 from "@mui/material/Card";
 import CardContent2 from "@mui/material/CardContent";
@@ -6564,7 +6568,7 @@ var delay = 2500;
 var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
   const [index, setIndex] = useState8(0);
   const [isHovered, setIsHovered] = useState8(false);
-  useEffect23(() => {
+  useEffect24(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6637,7 +6641,7 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
 SliderCardCarousel.displayName = "SliderCardCarousel";
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef22, useEffect as useEffect24, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useRef as useRef23, useEffect as useEffect25, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var WavelengthInput = forwardRef2(
@@ -6677,12 +6681,12 @@ var WavelengthInput = forwardRef2(
     onBlurCallback,
     ...rest
   }, ref) => {
-    const internalRef = useRef22(null);
+    const internalRef = useRef23(null);
     useImperativeHandle3(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
-    useEffect24(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el) return;
       const set = (attr, val) => {
@@ -6755,7 +6759,7 @@ var WavelengthInput = forwardRef2(
       disabled,
       multiLine
     ]);
-    useEffect24(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
@@ -6767,7 +6771,7 @@ var WavelengthInput = forwardRef2(
       el.addEventListener("blur", handler);
       return () => el.removeEventListener("blur", handler);
     }, [onBlurCallback]);
-    useEffect24(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
@@ -6797,7 +6801,7 @@ WavelengthInput.displayName = "WavelengthInput";
 import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-components";
 
 // src/components/DataTable/WavelengthDataTable.tsx
-import { useEffect as useEffect25, useRef as useRef23, useState as useState9 } from "react";
+import { useEffect as useEffect26, useRef as useRef24, useState as useState9 } from "react";
 import styled7 from "styled-components";
 import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
 var ModalInputDiv = styled7.div`
@@ -6978,8 +6982,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [currentPage, setCurrentPage] = useState9(1);
   const [isOpen, setIsOpen] = useState9(false);
   const [editingMenuKey, setEditingMenuKey] = useState9(null);
-  const menuRef = useRef23(null);
-  const modalRef = useRef23(null);
+  const menuRef = useRef24(null);
+  const modalRef = useRef24(null);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -6987,7 +6991,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setSelectedValue(event.target.value);
     setLocalData(copiedArray);
   };
-  useEffect25(() => {
+  useEffect26(() => {
     if (!selectedValue || searchItem === "") {
       setLocalData(copiedArray);
       setNoRowsOpen(false);
@@ -7017,7 +7021,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  useEffect25(() => {
+  useEffect26(() => {
     const handleClickOutside = (event) => {
       if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
         closeModal();
@@ -7478,14 +7482,14 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef24, useEffect as useEffect26 } from "react";
+import { useRef as useRef25, useEffect as useEffect27 } from "react";
 import "@wavelengthusaf/web-components";
 import { createRoot } from "react-dom/client";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
-  const tableRef = useRef24(null);
-  const reactDropdownRoots = useRef24(/* @__PURE__ */ new Map());
-  useEffect26(() => {
+  const tableRef = useRef25(null);
+  const reactDropdownRoots = useRef25(/* @__PURE__ */ new Map());
+  useEffect27(() => {
     const customChildDataTableElement = tableRef.current;
     if (!customChildDataTableElement) return;
     if (columns !== void 0) customChildDataTableElement.setColumns = columns;
@@ -7494,7 +7498,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
     if (sortIcon !== void 0) customChildDataTableElement.setSortIcon = sortIcon;
     if (dropdownButtonIcon !== void 0) customChildDataTableElement.setDropdownButtonIcon = dropdownButtonIcon;
   }, [columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon]);
-  useEffect26(() => {
+  useEffect27(() => {
     const el = tableRef.current;
     if (!el) return;
     const handleReactDropdown = (event) => {
@@ -7665,7 +7669,7 @@ var NestedDataTable = ({ data, columns, id }) => {
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect27, useRef as useRef26, useState as useState12 } from "react";
+import { useEffect as useEffect28, useRef as useRef27, useState as useState12 } from "react";
 import styled10 from "styled-components";
 import { Fragment as Fragment14, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 var AutoContainer = styled10.div`
@@ -7796,9 +7800,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef26(null);
-  const listRef = useRef26(null);
-  const noItemListRef = useRef26(null);
+  const inputRef = useRef27(null);
+  const listRef = useRef27(null);
+  const noItemListRef = useRef27(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -7806,7 +7810,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect27(() => {
+  useEffect28(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -7818,7 +7822,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect27(() => {
+    useEffect28(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -7938,7 +7942,7 @@ var WavelengthAutoComplete = ({
 WavelengthAutoComplete.displayName = "WavelengthAutoComplete";
 
 // src/components/inputs/WavelengthDatePicker.tsx
-import { useEffect as useEffect28, useState as useState13 } from "react";
+import { useEffect as useEffect29, useState as useState13 } from "react";
 import styled11 from "styled-components";
 import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
 var Label2 = styled11.label`
@@ -8012,7 +8016,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect28(() => {
+  useEffect29(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -8095,7 +8099,7 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/inputs/WavelengthCheckbox.tsx
-import { useRef as useRef27, useEffect as useEffect29 } from "react";
+import { useRef as useRef28, useEffect as useEffect30 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
@@ -8107,8 +8111,8 @@ var WavelengthCheckbox = ({
   textSize,
   ...rest
 }) => {
-  const ref = useRef27(null);
-  useEffect29(() => {
+  const ref = useRef28(null);
+  useEffect30(() => {
     const el = ref.current;
     if (!el) return;
     if (size !== void 0) {
@@ -8137,7 +8141,7 @@ var WavelengthCheckbox = ({
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef28, useEffect as useEffect30 } from "react";
+import { useRef as useRef29, useEffect as useEffect31 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
@@ -8147,8 +8151,8 @@ var SampleComponent = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef28(null);
-  useEffect30(() => {
+  const ref = useRef29(null);
+  useEffect31(() => {
     const el = ref.current;
     if (!el) return;
     el.customStyles = customStyle;
@@ -8161,7 +8165,7 @@ var SampleComponent = ({
 SampleComponent.displayName = "SampleComponent";
 
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
-import { useRef as useRef29, useEffect as useEffect31 } from "react";
+import { useRef as useRef30, useEffect as useEffect32 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
@@ -8172,8 +8176,8 @@ var WavelengthNotificationPanel = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef29(null);
-  useEffect31(() => {
+  const ref = useRef30(null);
+  useEffect32(() => {
     const el = ref.current;
     if (!el) return;
     if (notifications !== void 0) {
@@ -8199,11 +8203,11 @@ var WavelengthNotificationPanel = ({
 import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-components";
 
 // src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
-import { useEffect as useEffect32, useRef as useRef30 } from "react";
+import { useEffect as useEffect33, useRef as useRef31 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, disabled, ...rest }) => {
-  const componentRef = useRef30(null);
-  useEffect32(() => {
+  const componentRef = useRef31(null);
+  useEffect33(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8216,7 +8220,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect32(() => {
+  useEffect33(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
@@ -8226,7 +8230,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect32(() => {
+  useEffect33(() => {
     const component = componentRef.current;
     if (component && value) {
       component.value = value;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",
@@ -71,7 +71,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.15.7",
-    "@wavelengthusaf/web-components": "^1.17.0",
+    "@wavelengthusaf/web-components": "^1.18.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.12",