@deephaven/components 0.46.1-beta.2 → 0.46.1-beta.4

package/dist/TimeSlider.js

@@ -6,6 +6,9 @@ import classNames from 'classnames';
 import TimeInput from "./TimeInput.js";
 import StyleExports from "./TimeSlider.module.css";
 import "./TimeSlider.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);
 var POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);
 var SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59
@@ -56,45 +59,50 @@ function TimeSlider(_ref) {
   var handleEndTimeChange = useCallback(newEndTime => {
     updateTime(startTime, newEndTime);
   }, [updateTime, startTime]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "time-slider",
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(PopOvers, {
-    startTime: startTime,
-    endTime: endTime,
-    onStartTimeChange: handleStartTimeChange,
-    onEndTimeChange: handleEndTimeChange,
-    isStartModified: isStartModified,
-    isEndModified: isEndModified
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "track",
-    ref: track
-  }, /*#__PURE__*/React.createElement(TrackFills, {
-    startTime: startTime,
-    endTime: endTime
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "ticks"
-  }, Array(24).fill(null).map((value, index) => /*#__PURE__*/React.createElement("div", {
-    className: "tick",
-    key: index
-  }))), /*#__PURE__*/React.createElement(Handle, {
-    track: track,
-    time: startTime,
-    setTime: handleStartTimeChange
-  }), /*#__PURE__*/React.createElement(Handle, {
-    track: track,
-    time: endTime,
-    setTime: handleEndTimeChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "tick-labels"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "tick-label"
-  }, "0:00"), /*#__PURE__*/React.createElement("div", {
-    className: "tick-label-wrapper"
-  }, Array(24).fill(null).map((value, index) => /*#__PURE__*/React.createElement("div", {
-    className: "tick-label",
-    key: index
-  }, "".concat(index + 1, ":00"))))));
+    "data-testid": dataTestId,
+    children: [/*#__PURE__*/_jsx(PopOvers, {
+      startTime: startTime,
+      endTime: endTime,
+      onStartTimeChange: handleStartTimeChange,
+      onEndTimeChange: handleEndTimeChange,
+      isStartModified: isStartModified,
+      isEndModified: isEndModified
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "track",
+      ref: track,
+      children: [/*#__PURE__*/_jsx(TrackFills, {
+        startTime: startTime,
+        endTime: endTime
+      }), /*#__PURE__*/_jsx("div", {
+        className: "ticks",
+        children: Array(24).fill(null).map((value, index) => /*#__PURE__*/_jsx("div", {
+          className: "tick"
+        }, index))
+      }), /*#__PURE__*/_jsx(Handle, {
+        track: track,
+        time: startTime,
+        setTime: handleStartTimeChange
+      }), /*#__PURE__*/_jsx(Handle, {
+        track: track,
+        time: endTime,
+        setTime: handleEndTimeChange
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "tick-labels",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "tick-label",
+        children: "0:00"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "tick-label-wrapper",
+        children: Array(24).fill(null).map((value, index) => /*#__PURE__*/_jsx("div", {
+          className: "tick-label",
+          children: "".concat(index + 1, ":00")
+        }, index))
+      })]
+    })]
+  });
 }
 function PopOvers(props) {
   var {
@@ -150,47 +158,52 @@ function PopOvers(props) {
     firstTimeSelectionRef.current = null;
     secondTimeSelectionRef.current = selection;
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "time-slider-popovers"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex",
-    style: {
-      flexBasis: "calc(".concat(firstTime / SECONDS_IN_DAY * 100, "% - ").concat(POPOVER_WIDTH / 2, "px)")
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "handle-popper"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: classNames({
-      modified: swapTimes ? isEndModified : isStartModified
-    })
-  }, swapTimes ? 'End Time' : 'Start Time'), /*#__PURE__*/React.createElement(TimeInput, {
-    ref: firstTimeRef,
-    allowValueWrapping: false,
-    value: firstTime,
-    onChange: onFirstTimeChange,
-    onSelect: onFirstTimeSelect,
-    "data-testid": dataTestId !== undefined ? "".concat(dataTestId, "-input-1") : undefined
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex-spacer"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "handle-popper"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: classNames({
-      modified: swapTimes ? isStartModified : isEndModified
-    })
-  }, swapTimes ? 'Start Time' : 'End Time'), /*#__PURE__*/React.createElement(TimeInput, {
-    ref: secondTimeRef,
-    allowValueWrapping: false,
-    value: secondTime,
-    onChange: onSecondTimeChange,
-    onSelect: onSecondTimeSelect,
-    "data-testid": dataTestId !== undefined ? "".concat(dataTestId, "-input-2") : undefined
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex",
-    style: {
-      flexBasis: "calc(".concat((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY * 100, "% - ").concat(POPOVER_WIDTH / 2, "px)")
-    }
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "time-slider-popovers",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "flex",
+      style: {
+        flexBasis: "calc(".concat(firstTime / SECONDS_IN_DAY * 100, "% - ").concat(POPOVER_WIDTH / 2, "px)")
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "handle-popper",
+      children: [/*#__PURE__*/_jsx("label", {
+        className: classNames({
+          modified: swapTimes ? isEndModified : isStartModified
+        }),
+        children: swapTimes ? 'End Time' : 'Start Time'
+      }), /*#__PURE__*/_jsx(TimeInput, {
+        ref: firstTimeRef,
+        allowValueWrapping: false,
+        value: firstTime,
+        onChange: onFirstTimeChange,
+        onSelect: onFirstTimeSelect,
+        "data-testid": dataTestId !== undefined ? "".concat(dataTestId, "-input-1") : undefined
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "flex-spacer"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "handle-popper",
+      children: [/*#__PURE__*/_jsx("label", {
+        className: classNames({
+          modified: swapTimes ? isStartModified : isEndModified
+        }),
+        children: swapTimes ? 'Start Time' : 'End Time'
+      }), /*#__PURE__*/_jsx(TimeInput, {
+        ref: secondTimeRef,
+        allowValueWrapping: false,
+        value: secondTime,
+        onChange: onSecondTimeChange,
+        onSelect: onSecondTimeSelect,
+        "data-testid": dataTestId !== undefined ? "".concat(dataTestId, "-input-2") : undefined
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "flex",
+      style: {
+        flexBasis: "calc(".concat((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY * 100, "% - ").concat(POPOVER_WIDTH / 2, "px)")
+      }
+    })]
+  });
 }
 /**
  * Shades the area between or outside of handles according to if start or endtime is greater.
@@ -201,25 +214,28 @@ function TrackFills(props) {
     endTime,
     'data-testid': dataTestId
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "track-fills",
-    "data-testid": dataTestId
-  }, startTime > endTime && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "track-fill track-fill-start",
-    style: {
-      transform: "scaleX(".concat(endTime / SECONDS_IN_DAY, ")")
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "track-fill track-fill-end",
-    style: {
-      transform: "scaleX(".concat((SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY, ")")
-    }
-  })), startTime < endTime && /*#__PURE__*/React.createElement("div", {
-    className: "track-fill track-fill-middle",
-    style: {
-      transform: "translateX(".concat(startTime / SECONDS_IN_DAY * 100, "%) scaleX(").concat((endTime - startTime) / SECONDS_IN_DAY, ")")
-    }
-  }));
+    "data-testid": dataTestId,
+    children: [startTime > endTime && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "track-fill track-fill-start",
+        style: {
+          transform: "scaleX(".concat(endTime / SECONDS_IN_DAY, ")")
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        className: "track-fill track-fill-end",
+        style: {
+          transform: "scaleX(".concat((SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY, ")")
+        }
+      })]
+    }), startTime < endTime && /*#__PURE__*/_jsx("div", {
+      className: "track-fill track-fill-middle",
+      style: {
+        transform: "translateX(".concat(startTime / SECONDS_IN_DAY * 100, "%) scaleX(").concat((endTime - startTime) / SECONDS_IN_DAY, ")")
+      }
+    })]
+  });
 }
 /**
  * Creates a draggable handle the sets the time
@@ -297,18 +313,19 @@ function Handle(props) {
       stopDragListening();
     };
   }, [stopDragListening]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "handle-track",
     style: {
       transform
-    }
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "handle",
-    type: "button",
-    "aria-label": "Change time",
-    onMouseDown: handleMouseDown,
-    "data-testid": dataTestId
-  }));
+    },
+    children: /*#__PURE__*/_jsx("button", {
+      className: "handle",
+      type: "button",
+      "aria-label": "Change time",
+      onMouseDown: handleMouseDown,
+      "data-testid": dataTestId
+    })
+  });
 }
 export default TimeSlider;
 //# sourceMappingURL=TimeSlider.js.map

package/dist/TimeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSlider.js","names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","startTime","propStartTime","endTime","propEndTime","onChange","isStartModified","isEndModified","dataTestId","setStartTime","setEndTime","track","setTimeOnPropTimeChange","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","swapTimes","firstTime","setFirstTime","secondTime","setSecondTime","firstTimeRef","secondTimeRef","firstTimeSelectionRef","secondTimeSelectionRef","setFocusOnSwapTimesChange","current","setSelection","onFirstTimeChange","onSecondTimeChange","onFirstTimeSelect","selection","onSecondTimeSelect","flexBasis","modified","undefined","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","trackRect","getBoundingClientRect","leftEdge","Math","max","left","preciseTime","min","width","roundedTime","round","limitMax","handleMouseMove","handleMouseUp","window","removeEventListener","document","documentElement","classList","remove","startDragListening","addEventListener","add","stopDragListening","handleMouseDown","removeListenersOnUnmount"],"sources":["../src/TimeSlider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n// array maps being used are static, this is fine.\n\nimport React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  useEffect,\n} from 'react';\nimport classNames from 'classnames';\nimport TimeInput, { SelectionSegment, TimeInputElement } from './TimeInput';\nimport StyleExports from './TimeSlider.module.scss';\nimport './TimeSlider.scss';\n\nconst HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);\nconst POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);\nconst SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59\nconst SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals\n\ntype TimeSliderProps = {\n  startTime: number;\n  endTime: number;\n  onChange(value: { startTime: number; endTime: number }): void;\n  isStartModified?: boolean;\n  isEndModified?: boolean;\n  'data-testid'?: string;\n};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param props takes times in seconds 0 - 86399 and a callback\n */\nfunction TimeSlider({\n  startTime: propStartTime,\n  endTime: propEndTime,\n  onChange,\n  isStartModified = false,\n  isEndModified = false,\n  'data-testid': dataTestId,\n}: TimeSliderProps): JSX.Element {\n  const [startTime, setStartTime] = useState(propStartTime);\n  const [endTime, setEndTime] = useState(propEndTime);\n\n  const track = useRef<HTMLDivElement>(null); // we need the track width while calulculating time from handle drag\n\n  // updates state if props change\n  useEffect(\n    function setTimeOnPropTimeChange() {\n      setStartTime(propStartTime);\n      setEndTime(propEndTime);\n    },\n    [propStartTime, propEndTime]\n  );\n\n  const updateTime = useCallback(\n    (newStartTime: number, newEndTime: number) => {\n      let start = newStartTime;\n      let end = newEndTime;\n      if (start === end) {\n        if (end < SECONDS_IN_DAY) {\n          end += 1;\n        } else {\n          start -= 1;\n        }\n      }\n\n      setStartTime(start);\n      setEndTime(end);\n      onChange({ startTime: start, endTime: end });\n    },\n    [setStartTime, setEndTime, onChange]\n  );\n\n  const handleStartTimeChange = useCallback(\n    (newStartTime: number) => {\n      updateTime(newStartTime, endTime);\n    },\n    [updateTime, endTime]\n  );\n\n  const handleEndTimeChange = useCallback(\n    (newEndTime: number) => {\n      updateTime(startTime, newEndTime);\n    },\n    [updateTime, startTime]\n  );\n\n  return (\n    <div className=\"time-slider\" data-testid={dataTestId}>\n      <PopOvers\n        startTime={startTime}\n        endTime={endTime}\n        onStartTimeChange={handleStartTimeChange}\n        onEndTimeChange={handleEndTimeChange}\n        isStartModified={isStartModified}\n        isEndModified={isEndModified}\n      />\n      <div className=\"track\" ref={track}>\n        <TrackFills startTime={startTime} endTime={endTime} />\n        <div className=\"ticks\">\n          {Array(24)\n            .fill(null)\n            .map((value, index) => (\n              <div className=\"tick\" key={index} />\n            ))}\n        </div>\n        <Handle\n          track={track}\n          time={startTime}\n          setTime={handleStartTimeChange}\n        />\n        <Handle track={track} time={endTime} setTime={handleEndTimeChange} />\n      </div>\n\n      <div className=\"tick-labels\">\n        <div className=\"tick-label\">0:00</div>\n        <div className=\"tick-label-wrapper\">\n          {Array(24)\n            .fill(null)\n            .map((value, index) => (\n              <div className=\"tick-label\" key={index}>{`${index + 1}:00`}</div>\n            ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype PopOversProps = {\n  startTime: number;\n  endTime: number;\n  onStartTimeChange(time: number): void;\n  onEndTimeChange(time: number): void;\n  isStartModified: boolean;\n  isEndModified: boolean;\n  'data-testid'?: string;\n};\n\nfunction PopOvers(props: PopOversProps): JSX.Element {\n  const {\n    startTime,\n    endTime,\n    onStartTimeChange,\n    onEndTimeChange,\n    isStartModified,\n    isEndModified,\n    'data-testid': dataTestId,\n  } = props;\n\n  const swapTimes = startTime > endTime;\n\n  const [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);\n  const [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);\n  const firstTimeRef = useRef<TimeInputElement>(null);\n  const secondTimeRef = useRef<TimeInputElement>(null);\n  // Keep track of selection in both time inputs\n  const firstTimeSelectionRef = useRef<SelectionSegment | null>(null);\n  const secondTimeSelectionRef = useRef<SelectionSegment | null>(null);\n\n  useEffect(\n    function setTimeOnPropTimeChange() {\n      setFirstTime(startTime > endTime ? endTime : startTime);\n      setSecondTime(startTime > endTime ? startTime : endTime);\n    },\n    [startTime, endTime]\n  );\n\n  useEffect(\n    function setFocusOnSwapTimesChange() {\n      if (firstTimeSelectionRef.current !== null) {\n        secondTimeRef.current?.setSelection(firstTimeSelectionRef.current);\n      }\n      if (secondTimeSelectionRef.current !== null) {\n        firstTimeRef.current?.setSelection(secondTimeSelectionRef.current);\n      }\n    },\n    [swapTimes]\n  );\n\n  function onFirstTimeChange(value: number) {\n    if (startTime <= endTime) {\n      onStartTimeChange(value);\n    } else {\n      onEndTimeChange(value);\n    }\n  }\n\n  function onSecondTimeChange(value: number) {\n    if (startTime <= endTime) {\n      onEndTimeChange(value);\n    } else {\n      onStartTimeChange(value);\n    }\n  }\n\n  const onFirstTimeSelect = useCallback(selection => {\n    firstTimeSelectionRef.current = selection;\n    secondTimeSelectionRef.current = null;\n  }, []);\n\n  const onSecondTimeSelect = useCallback(selection => {\n    firstTimeSelectionRef.current = null;\n    secondTimeSelectionRef.current = selection;\n  }, []);\n\n  return (\n    <div className=\"time-slider-popovers\">\n      <div\n        className=\"flex\"\n        style={{\n          flexBasis: `calc(${(firstTime / SECONDS_IN_DAY) * 100}% - ${\n            POPOVER_WIDTH / 2\n          }px)`,\n        }}\n      />\n      <div className=\"handle-popper\">\n        <label\n          className={classNames({\n            modified: swapTimes ? isEndModified : isStartModified,\n          })}\n        >\n          {swapTimes ? 'End Time' : 'Start Time'}\n        </label>\n        <TimeInput\n          ref={firstTimeRef}\n          allowValueWrapping={false}\n          value={firstTime}\n          onChange={onFirstTimeChange}\n          onSelect={onFirstTimeSelect}\n          data-testid={\n            dataTestId !== undefined ? `${dataTestId}-input-1` : undefined\n          }\n        />\n      </div>\n      <div className=\"flex-spacer\" />\n      <div className=\"handle-popper\">\n        <label\n          className={classNames({\n            modified: swapTimes ? isStartModified : isEndModified,\n          })}\n        >\n          {swapTimes ? 'Start Time' : 'End Time'}\n        </label>\n        <TimeInput\n          ref={secondTimeRef}\n          allowValueWrapping={false}\n          value={secondTime}\n          onChange={onSecondTimeChange}\n          onSelect={onSecondTimeSelect}\n          data-testid={\n            dataTestId !== undefined ? `${dataTestId}-input-2` : undefined\n          }\n        />\n      </div>\n      <div\n        className=\"flex\"\n        style={{\n          flexBasis: `calc(${\n            ((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY) * 100\n          }% - ${POPOVER_WIDTH / 2}px)`,\n        }}\n      />\n    </div>\n  );\n}\n\ntype TrackFillsProps = {\n  startTime: number;\n  endTime: number;\n  'data-testid'?: string;\n};\n\n/**\n * Shades the area between or outside of handles according to if start or endtime is greater.\n */\nfunction TrackFills(props: TrackFillsProps): JSX.Element {\n  const { startTime, endTime, 'data-testid': dataTestId } = props;\n  return (\n    <div className=\"track-fills\" data-testid={dataTestId}>\n      {startTime > endTime && (\n        <>\n          <div\n            className=\"track-fill track-fill-start\"\n            style={{ transform: `scaleX(${endTime / SECONDS_IN_DAY})` }}\n          />\n          <div\n            className=\"track-fill track-fill-end\"\n            style={{\n              transform: `scaleX(${\n                (SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY\n              })`,\n            }}\n          />\n        </>\n      )}\n      {startTime < endTime && (\n        <div\n          className=\"track-fill track-fill-middle\"\n          style={{\n            transform: `translateX(${\n              (startTime / SECONDS_IN_DAY) * 100\n            }%) scaleX(${(endTime - startTime) / SECONDS_IN_DAY})`,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\ntype HandleProps = {\n  track: React.RefObject<HTMLDivElement>;\n  time: number;\n  setTime(time: number): void;\n  'data-testid'?: string;\n};\n\n/**\n * Creates a draggable handle the sets the time\n */\nfunction Handle(props: HandleProps): JSX.Element {\n  const { track, time, setTime, 'data-testid': dataTestId } = props;\n\n  /**\n   * Takes the time and generate our translation string taking into account handle offset.\n   * The handle offset changes for the first and last tick range dynmaically. Normally,\n   * the center of the handle (size/2) is the selection origin, but at edges, it becomes either\n   * end of the handle, requireing a relative offset range of 0 - 0.5,  and 0.5 - 1 of handle size.\n   * @param t time in seconds\n   */\n  const transform = useMemo(() => {\n    const ONE_HOUR = 60 * 60;\n    let handleOffset = HANDLE_SIZE / 2;\n    if (time < ONE_HOUR) {\n      handleOffset = (time / ONE_HOUR) * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size\n    } else if (time > 23 * ONE_HOUR) {\n      handleOffset =\n        HANDLE_SIZE / 2 +\n        (1 / (SECONDS_IN_DAY - 23 * ONE_HOUR)) *\n          (time - 23 * ONE_HOUR) *\n          (HANDLE_SIZE / 2); // 0.5 - 1 Handle size\n    }\n    return `translateX(calc(${\n      (time / SECONDS_IN_DAY) * 100\n    }% - ${handleOffset}px))`;\n  }, [time]);\n\n  const calculatePositionAsTime = useCallback(\n    (clientX: number) => {\n      if (!track.current) {\n        return 0;\n      }\n      const trackRect = track.current.getBoundingClientRect();\n      const leftEdge = Math.max(clientX - trackRect.left, 0);\n      // get position as 0-1 on slider and mulitply by seconds in a day to convert to time\n      const preciseTime =\n        SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);\n      // snap to nearest N(5) minute interval\n      const roundedTime =\n        SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);\n      // prevent over-rounding to 24:00:00\n      const limitMax = Math.min(SECONDS_IN_DAY, roundedTime);\n      return limitMax;\n    },\n    [track]\n  );\n\n  const handleMouseMove = useCallback(\n    ({ clientX }: MouseEvent) => {\n      setTime(calculatePositionAsTime(clientX));\n    },\n    [setTime, calculatePositionAsTime]\n  );\n\n  const handleMouseUp = useCallback(\n    ({ clientX }: MouseEvent) => {\n      setTime(calculatePositionAsTime(clientX));\n\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n      document.documentElement.classList.remove('drag-pointer-events-none');\n    },\n    [setTime, calculatePositionAsTime, handleMouseMove]\n  );\n\n  const startDragListening = useCallback(() => {\n    window.addEventListener('mousemove', handleMouseMove);\n    window.addEventListener('mouseup', handleMouseUp);\n    document.documentElement.classList.add('drag-pointer-events-none');\n  }, [handleMouseMove, handleMouseUp]);\n\n  const stopDragListening = useCallback(() => {\n    window.removeEventListener('mousemove', handleMouseMove);\n    window.removeEventListener('mouseup', handleMouseUp);\n    document.documentElement.classList.remove('drag-pointer-events-none');\n  }, [handleMouseMove, handleMouseUp]);\n\n  const handleMouseDown = useCallback(() => {\n    startDragListening();\n  }, [startDragListening]);\n\n  useEffect(\n    function removeListenersOnUnmount() {\n      return () => {\n        stopDragListening();\n      };\n    },\n    [stopDragListening]\n  );\n\n  return (\n    <div className=\"handle-track\" style={{ transform }}>\n      <button\n        className=\"handle\"\n        type=\"button\"\n        aria-label=\"Change time\"\n        onMouseDown={handleMouseDown}\n        data-testid={dataTestId}\n      />\n    </div>\n  );\n}\n\nexport default TimeSlider;\n"],"mappings":"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"}
+{"version":3,"file":"TimeSlider.js","names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","startTime","propStartTime","endTime","propEndTime","onChange","isStartModified","isEndModified","dataTestId","setStartTime","setEndTime","track","setTimeOnPropTimeChange","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","swapTimes","firstTime","setFirstTime","secondTime","setSecondTime","firstTimeRef","secondTimeRef","firstTimeSelectionRef","secondTimeSelectionRef","setFocusOnSwapTimesChange","current","setSelection","onFirstTimeChange","onSecondTimeChange","onFirstTimeSelect","selection","onSecondTimeSelect","flexBasis","modified","undefined","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","trackRect","getBoundingClientRect","leftEdge","Math","max","left","preciseTime","min","width","roundedTime","round","limitMax","handleMouseMove","handleMouseUp","window","removeEventListener","document","documentElement","classList","remove","startDragListening","addEventListener","add","stopDragListening","handleMouseDown","removeListenersOnUnmount"],"sources":["../src/TimeSlider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n// array maps being used are static, this is fine.\n\nimport React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  useEffect,\n} from 'react';\nimport classNames from 'classnames';\nimport TimeInput, { SelectionSegment, TimeInputElement } from './TimeInput';\nimport StyleExports from './TimeSlider.module.scss';\nimport './TimeSlider.scss';\n\nconst HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);\nconst POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);\nconst SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59\nconst SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals\n\ntype TimeSliderProps = {\n  startTime: number;\n  endTime: number;\n  onChange(value: { startTime: number; endTime: number }): void;\n  isStartModified?: boolean;\n  isEndModified?: boolean;\n  'data-testid'?: string;\n};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param props takes times in seconds 0 - 86399 and a callback\n */\nfunction TimeSlider({\n  startTime: propStartTime,\n  endTime: propEndTime,\n  onChange,\n  isStartModified = false,\n  isEndModified = false,\n  'data-testid': dataTestId,\n}: TimeSliderProps): JSX.Element {\n  const [startTime, setStartTime] = useState(propStartTime);\n  const [endTime, setEndTime] = useState(propEndTime);\n\n  const track = useRef<HTMLDivElement>(null); // we need the track width while calulculating time from handle drag\n\n  // updates state if props change\n  useEffect(\n    function setTimeOnPropTimeChange() {\n      setStartTime(propStartTime);\n      setEndTime(propEndTime);\n    },\n    [propStartTime, propEndTime]\n  );\n\n  const updateTime = useCallback(\n    (newStartTime: number, newEndTime: number) => {\n      let start = newStartTime;\n      let end = newEndTime;\n      if (start === end) {\n        if (end < SECONDS_IN_DAY) {\n          end += 1;\n        } else {\n          start -= 1;\n        }\n      }\n\n      setStartTime(start);\n      setEndTime(end);\n      onChange({ startTime: start, endTime: end });\n    },\n    [setStartTime, setEndTime, onChange]\n  );\n\n  const handleStartTimeChange = useCallback(\n    (newStartTime: number) => {\n      updateTime(newStartTime, endTime);\n    },\n    [updateTime, endTime]\n  );\n\n  const handleEndTimeChange = useCallback(\n    (newEndTime: number) => {\n      updateTime(startTime, newEndTime);\n    },\n    [updateTime, startTime]\n  );\n\n  return (\n    <div className=\"time-slider\" data-testid={dataTestId}>\n      <PopOvers\n        startTime={startTime}\n        endTime={endTime}\n        onStartTimeChange={handleStartTimeChange}\n        onEndTimeChange={handleEndTimeChange}\n        isStartModified={isStartModified}\n        isEndModified={isEndModified}\n      />\n      <div className=\"track\" ref={track}>\n        <TrackFills startTime={startTime} endTime={endTime} />\n        <div className=\"ticks\">\n          {Array(24)\n            .fill(null)\n            .map((value, index) => (\n              <div className=\"tick\" key={index} />\n            ))}\n        </div>\n        <Handle\n          track={track}\n          time={startTime}\n          setTime={handleStartTimeChange}\n        />\n        <Handle track={track} time={endTime} setTime={handleEndTimeChange} />\n      </div>\n\n      <div className=\"tick-labels\">\n        <div className=\"tick-label\">0:00</div>\n        <div className=\"tick-label-wrapper\">\n          {Array(24)\n            .fill(null)\n            .map((value, index) => (\n              <div className=\"tick-label\" key={index}>{`${index + 1}:00`}</div>\n            ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype PopOversProps = {\n  startTime: number;\n  endTime: number;\n  onStartTimeChange(time: number): void;\n  onEndTimeChange(time: number): void;\n  isStartModified: boolean;\n  isEndModified: boolean;\n  'data-testid'?: string;\n};\n\nfunction PopOvers(props: PopOversProps): JSX.Element {\n  const {\n    startTime,\n    endTime,\n    onStartTimeChange,\n    onEndTimeChange,\n    isStartModified,\n    isEndModified,\n    'data-testid': dataTestId,\n  } = props;\n\n  const swapTimes = startTime > endTime;\n\n  const [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);\n  const [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);\n  const firstTimeRef = useRef<TimeInputElement>(null);\n  const secondTimeRef = useRef<TimeInputElement>(null);\n  // Keep track of selection in both time inputs\n  const firstTimeSelectionRef = useRef<SelectionSegment | null>(null);\n  const secondTimeSelectionRef = useRef<SelectionSegment | null>(null);\n\n  useEffect(\n    function setTimeOnPropTimeChange() {\n      setFirstTime(startTime > endTime ? endTime : startTime);\n      setSecondTime(startTime > endTime ? startTime : endTime);\n    },\n    [startTime, endTime]\n  );\n\n  useEffect(\n    function setFocusOnSwapTimesChange() {\n      if (firstTimeSelectionRef.current !== null) {\n        secondTimeRef.current?.setSelection(firstTimeSelectionRef.current);\n      }\n      if (secondTimeSelectionRef.current !== null) {\n        firstTimeRef.current?.setSelection(secondTimeSelectionRef.current);\n      }\n    },\n    [swapTimes]\n  );\n\n  function onFirstTimeChange(value: number) {\n    if (startTime <= endTime) {\n      onStartTimeChange(value);\n    } else {\n      onEndTimeChange(value);\n    }\n  }\n\n  function onSecondTimeChange(value: number) {\n    if (startTime <= endTime) {\n      onEndTimeChange(value);\n    } else {\n      onStartTimeChange(value);\n    }\n  }\n\n  const onFirstTimeSelect = useCallback(selection => {\n    firstTimeSelectionRef.current = selection;\n    secondTimeSelectionRef.current = null;\n  }, []);\n\n  const onSecondTimeSelect = useCallback(selection => {\n    firstTimeSelectionRef.current = null;\n    secondTimeSelectionRef.current = selection;\n  }, []);\n\n  return (\n    <div className=\"time-slider-popovers\">\n      <div\n        className=\"flex\"\n        style={{\n          flexBasis: `calc(${(firstTime / SECONDS_IN_DAY) * 100}% - ${\n            POPOVER_WIDTH / 2\n          }px)`,\n        }}\n      />\n      <div className=\"handle-popper\">\n        <label\n          className={classNames({\n            modified: swapTimes ? isEndModified : isStartModified,\n          })}\n        >\n          {swapTimes ? 'End Time' : 'Start Time'}\n        </label>\n        <TimeInput\n          ref={firstTimeRef}\n          allowValueWrapping={false}\n          value={firstTime}\n          onChange={onFirstTimeChange}\n          onSelect={onFirstTimeSelect}\n          data-testid={\n            dataTestId !== undefined ? `${dataTestId}-input-1` : undefined\n          }\n        />\n      </div>\n      <div className=\"flex-spacer\" />\n      <div className=\"handle-popper\">\n        <label\n          className={classNames({\n            modified: swapTimes ? isStartModified : isEndModified,\n          })}\n        >\n          {swapTimes ? 'Start Time' : 'End Time'}\n        </label>\n        <TimeInput\n          ref={secondTimeRef}\n          allowValueWrapping={false}\n          value={secondTime}\n          onChange={onSecondTimeChange}\n          onSelect={onSecondTimeSelect}\n          data-testid={\n            dataTestId !== undefined ? `${dataTestId}-input-2` : undefined\n          }\n        />\n      </div>\n      <div\n        className=\"flex\"\n        style={{\n          flexBasis: `calc(${\n            ((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY) * 100\n          }% - ${POPOVER_WIDTH / 2}px)`,\n        }}\n      />\n    </div>\n  );\n}\n\ntype TrackFillsProps = {\n  startTime: number;\n  endTime: number;\n  'data-testid'?: string;\n};\n\n/**\n * Shades the area between or outside of handles according to if start or endtime is greater.\n */\nfunction TrackFills(props: TrackFillsProps): JSX.Element {\n  const { startTime, endTime, 'data-testid': dataTestId } = props;\n  return (\n    <div className=\"track-fills\" data-testid={dataTestId}>\n      {startTime > endTime && (\n        <>\n          <div\n            className=\"track-fill track-fill-start\"\n            style={{ transform: `scaleX(${endTime / SECONDS_IN_DAY})` }}\n          />\n          <div\n            className=\"track-fill track-fill-end\"\n            style={{\n              transform: `scaleX(${\n                (SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY\n              })`,\n            }}\n          />\n        </>\n      )}\n      {startTime < endTime && (\n        <div\n          className=\"track-fill track-fill-middle\"\n          style={{\n            transform: `translateX(${\n              (startTime / SECONDS_IN_DAY) * 100\n            }%) scaleX(${(endTime - startTime) / SECONDS_IN_DAY})`,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\ntype HandleProps = {\n  track: React.RefObject<HTMLDivElement>;\n  time: number;\n  setTime(time: number): void;\n  'data-testid'?: string;\n};\n\n/**\n * Creates a draggable handle the sets the time\n */\nfunction Handle(props: HandleProps): JSX.Element {\n  const { track, time, setTime, 'data-testid': dataTestId } = props;\n\n  /**\n   * Takes the time and generate our translation string taking into account handle offset.\n   * The handle offset changes for the first and last tick range dynmaically. Normally,\n   * the center of the handle (size/2) is the selection origin, but at edges, it becomes either\n   * end of the handle, requireing a relative offset range of 0 - 0.5,  and 0.5 - 1 of handle size.\n   * @param t time in seconds\n   */\n  const transform = useMemo(() => {\n    const ONE_HOUR = 60 * 60;\n    let handleOffset = HANDLE_SIZE / 2;\n    if (time < ONE_HOUR) {\n      handleOffset = (time / ONE_HOUR) * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size\n    } else if (time > 23 * ONE_HOUR) {\n      handleOffset =\n        HANDLE_SIZE / 2 +\n        (1 / (SECONDS_IN_DAY - 23 * ONE_HOUR)) *\n          (time - 23 * ONE_HOUR) *\n          (HANDLE_SIZE / 2); // 0.5 - 1 Handle size\n    }\n    return `translateX(calc(${\n      (time / SECONDS_IN_DAY) * 100\n    }% - ${handleOffset}px))`;\n  }, [time]);\n\n  const calculatePositionAsTime = useCallback(\n    (clientX: number) => {\n      if (!track.current) {\n        return 0;\n      }\n      const trackRect = track.current.getBoundingClientRect();\n      const leftEdge = Math.max(clientX - trackRect.left, 0);\n      // get position as 0-1 on slider and mulitply by seconds in a day to convert to time\n      const preciseTime =\n        SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);\n      // snap to nearest N(5) minute interval\n      const roundedTime =\n        SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);\n      // prevent over-rounding to 24:00:00\n      const limitMax = Math.min(SECONDS_IN_DAY, roundedTime);\n      return limitMax;\n    },\n    [track]\n  );\n\n  const handleMouseMove = useCallback(\n    ({ clientX }: MouseEvent) => {\n      setTime(calculatePositionAsTime(clientX));\n    },\n    [setTime, calculatePositionAsTime]\n  );\n\n  const handleMouseUp = useCallback(\n    ({ clientX }: MouseEvent) => {\n      setTime(calculatePositionAsTime(clientX));\n\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n      document.documentElement.classList.remove('drag-pointer-events-none');\n    },\n    [setTime, calculatePositionAsTime, handleMouseMove]\n  );\n\n  const startDragListening = useCallback(() => {\n    window.addEventListener('mousemove', handleMouseMove);\n    window.addEventListener('mouseup', handleMouseUp);\n    document.documentElement.classList.add('drag-pointer-events-none');\n  }, [handleMouseMove, handleMouseUp]);\n\n  const stopDragListening = useCallback(() => {\n    window.removeEventListener('mousemove', handleMouseMove);\n    window.removeEventListener('mouseup', handleMouseUp);\n    document.documentElement.classList.remove('drag-pointer-events-none');\n  }, [handleMouseMove, handleMouseUp]);\n\n  const handleMouseDown = useCallback(() => {\n    startDragListening();\n  }, [startDragListening]);\n\n  useEffect(\n    function removeListenersOnUnmount() {\n      return () => {\n        stopDragListening();\n      };\n    },\n    [stopDragListening]\n  );\n\n  return (\n    <div className=\"handle-track\" style={{ transform }}>\n      <button\n        className=\"handle\"\n        type=\"button\"\n        aria-label=\"Change time\"\n        onMouseDown={handleMouseDown}\n        data-testid={dataTestId}\n      />\n    </div>\n  );\n}\n\nexport default TimeSlider;\n"],"mappings":"AAAA;AACA;;AAEA,OAAOA,KAAK,IACVC,WAAW,EACXC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,QACJ,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AAAC,OAC7BC,SAAS;AAAA,OACTC,YAAY;AAAA;AAAA;AAAA;AAAA;AAGnB,IAAMC,WAAW,GAAGC,QAAQ,CAACF,YAAY,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC;AAC7D,IAAMG,aAAa,GAAGD,QAAQ,CAACF,YAAY,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC;AACjE,IAAMI,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AACzC,IAAMC,oBAAoB,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;;AAWrC;AACA;AACA;AACA;AACA,SAASC,UAAU,OAOc;EAAA,IAPb;IAClBC,SAAS,EAAEC,aAAa;IACxBC,OAAO,EAAEC,WAAW;IACpBC,QAAQ;IACRC,eAAe,GAAG,KAAK;IACvBC,aAAa,GAAG,KAAK;IACrB,aAAa,EAAEC;EACA,CAAC;EAChB,IAAM,CAACP,SAAS,EAAEQ,YAAY,CAAC,GAAGnB,QAAQ,CAACY,aAAa,CAAC;EACzD,IAAM,CAACC,OAAO,EAAEO,UAAU,CAAC,GAAGpB,QAAQ,CAACc,WAAW,CAAC;EAEnD,IAAMO,KAAK,GAAGtB,MAAM,CAAiB,IAAI,CAAC,CAAC,CAAC;;EAE5C;EACAE,SAAS,CACP,SAASqB,uBAAuB,GAAG;IACjCH,YAAY,CAACP,aAAa,CAAC;IAC3BQ,UAAU,CAACN,WAAW,CAAC;EACzB,CAAC,EACD,CAACF,aAAa,EAAEE,WAAW,CAAC,CAC7B;EAED,IAAMS,UAAU,GAAG1B,WAAW,CAC5B,CAAC2B,YAAoB,EAAEC,UAAkB,KAAK;IAC5C,IAAIC,KAAK,GAAGF,YAAY;IACxB,IAAIG,GAAG,GAAGF,UAAU;IACpB,IAAIC,KAAK,KAAKC,GAAG,EAAE;MACjB,IAAIA,GAAG,GAAGnB,cAAc,EAAE;QACxBmB,GAAG,IAAI,CAAC;MACV,CAAC,MAAM;QACLD,KAAK,IAAI,CAAC;MACZ;IACF;IAEAP,YAAY,CAACO,KAAK,CAAC;IACnBN,UAAU,CAACO,GAAG,CAAC;IACfZ,QAAQ,CAAC;MAAEJ,SAAS,EAAEe,KAAK;MAAEb,OAAO,EAAEc;IAAI,CAAC,CAAC;EAC9C,CAAC,EACD,CAACR,YAAY,EAAEC,UAAU,EAAEL,QAAQ,CAAC,CACrC;EAED,IAAMa,qBAAqB,GAAG/B,WAAW,CACtC2B,YAAoB,IAAK;IACxBD,UAAU,CAACC,YAAY,EAAEX,OAAO,CAAC;EACnC,CAAC,EACD,CAACU,UAAU,EAAEV,OAAO,CAAC,CACtB;EAED,IAAMgB,mBAAmB,GAAGhC,WAAW,CACpC4B,UAAkB,IAAK;IACtBF,UAAU,CAACZ,SAAS,EAAEc,UAAU,CAAC;EACnC,CAAC,EACD,CAACF,UAAU,EAAEZ,SAAS,CAAC,CACxB;EAED,oBACE;IAAK,SAAS,EAAC,aAAa;IAAC,eAAaO,UAAW;IAAA,wBACnD,KAAC,QAAQ;MACP,SAAS,EAAEP,SAAU;MACrB,OAAO,EAAEE,OAAQ;MACjB,iBAAiB,EAAEe,qBAAsB;MACzC,eAAe,EAAEC,mBAAoB;MACrC,eAAe,EAAEb,eAAgB;MACjC,aAAa,EAAEC;IAAc,EAC7B,eACF;MAAK,SAAS,EAAC,OAAO;MAAC,GAAG,EAAEI,KAAM;MAAA,wBAChC,KAAC,UAAU;QAAC,SAAS,EAAEV,SAAU;QAAC,OAAO,EAAEE;MAAQ,EAAG,eACtD;QAAK,SAAS,EAAC,OAAO;QAAA,UACnBiB,KAAK,CAAC,EAAE,CAAC,CACPC,IAAI,CAAC,IAAI,CAAC,CACVC,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBAChB;UAAK,SAAS,EAAC;QAAM,GAAMA,KAAK,CACjC;MAAC,EACA,eACN,KAAC,MAAM;QACL,KAAK,EAAEb,KAAM;QACb,IAAI,EAAEV,SAAU;QAChB,OAAO,EAAEiB;MAAsB,EAC/B,eACF,KAAC,MAAM;QAAC,KAAK,EAAEP,KAAM;QAAC,IAAI,EAAER,OAAQ;QAAC,OAAO,EAAEgB;MAAoB,EAAG;IAAA,EACjE,eAEN;MAAK,SAAS,EAAC,aAAa;MAAA,wBAC1B;QAAK,SAAS,EAAC,YAAY;QAAA,UAAC;MAAI,EAAM,eACtC;QAAK,SAAS,EAAC,oBAAoB;QAAA,UAChCC,KAAK,CAAC,EAAE,CAAC,CACPC,IAAI,CAAC,IAAI,CAAC,CACVC,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBAChB;UAAK,SAAS,EAAC,YAAY;UAAA,oBAAiBA,KAAK,GAAG,CAAC;QAAA,GAApBA,KAAK,CACvC;MAAC,EACA;IAAA,EACF;EAAA,EACF;AAEV;AAYA,SAASC,QAAQ,CAACC,KAAoB,EAAe;EACnD,IAAM;IACJzB,SAAS;IACTE,OAAO;IACPwB,iBAAiB;IACjBC,eAAe;IACftB,eAAe;IACfC,aAAa;IACb,aAAa,EAAEC;EACjB,CAAC,GAAGkB,KAAK;EAET,IAAMG,SAAS,GAAG5B,SAAS,GAAGE,OAAO;EAErC,IAAM,CAAC2B,SAAS,EAAEC,YAAY,CAAC,GAAGzC,QAAQ,CAACuC,SAAS,GAAG1B,OAAO,GAAGF,SAAS,CAAC;EAC3E,IAAM,CAAC+B,UAAU,EAAEC,aAAa,CAAC,GAAG3C,QAAQ,CAACuC,SAAS,GAAG5B,SAAS,GAAGE,OAAO,CAAC;EAC7E,IAAM+B,YAAY,GAAG7C,MAAM,CAAmB,IAAI,CAAC;EACnD,IAAM8C,aAAa,GAAG9C,MAAM,CAAmB,IAAI,CAAC;EACpD;EACA,IAAM+C,qBAAqB,GAAG/C,MAAM,CAA0B,IAAI,CAAC;EACnE,IAAMgD,sBAAsB,GAAGhD,MAAM,CAA0B,IAAI,CAAC;EAEpEE,SAAS,CACP,SAASqB,uBAAuB,GAAG;IACjCmB,YAAY,CAAC9B,SAAS,GAAGE,OAAO,GAAGA,OAAO,GAAGF,SAAS,CAAC;IACvDgC,aAAa,CAAChC,SAAS,GAAGE,OAAO,GAAGF,SAAS,GAAGE,OAAO,CAAC;EAC1D,CAAC,EACD,CAACF,SAAS,EAAEE,OAAO,CAAC,CACrB;EAEDZ,SAAS,CACP,SAAS+C,yBAAyB,GAAG;IACnC,IAAIF,qBAAqB,CAACG,OAAO,KAAK,IAAI,EAAE;MAAA;MAC1C,yBAAAJ,aAAa,CAACI,OAAO,0DAArB,sBAAuBC,YAAY,CAACJ,qBAAqB,CAACG,OAAO,CAAC;IACpE;IACA,IAAIF,sBAAsB,CAACE,OAAO,KAAK,IAAI,EAAE;MAAA;MAC3C,yBAAAL,YAAY,CAACK,OAAO,0DAApB,sBAAsBC,YAAY,CAACH,sBAAsB,CAACE,OAAO,CAAC;IACpE;EACF,CAAC,EACD,CAACV,SAAS,CAAC,CACZ;EAED,SAASY,iBAAiB,CAAClB,KAAa,EAAE;IACxC,IAAItB,SAAS,IAAIE,OAAO,EAAE;MACxBwB,iBAAiB,CAACJ,KAAK,CAAC;IAC1B,CAAC,MAAM;MACLK,eAAe,CAACL,KAAK,CAAC;IACxB;EACF;EAEA,SAASmB,kBAAkB,CAACnB,KAAa,EAAE;IACzC,IAAItB,SAAS,IAAIE,OAAO,EAAE;MACxByB,eAAe,CAACL,KAAK,CAAC;IACxB,CAAC,MAAM;MACLI,iBAAiB,CAACJ,KAAK,CAAC;IAC1B;EACF;EAEA,IAAMoB,iBAAiB,GAAGxD,WAAW,CAACyD,SAAS,IAAI;IACjDR,qBAAqB,CAACG,OAAO,GAAGK,SAAS;IACzCP,sBAAsB,CAACE,OAAO,GAAG,IAAI;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMM,kBAAkB,GAAG1D,WAAW,CAACyD,SAAS,IAAI;IAClDR,qBAAqB,CAACG,OAAO,GAAG,IAAI;IACpCF,sBAAsB,CAACE,OAAO,GAAGK,SAAS;EAC5C,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE;IAAK,SAAS,EAAC,sBAAsB;IAAA,wBACnC;MACE,SAAS,EAAC,MAAM;MAChB,KAAK,EAAE;QACLE,SAAS,iBAAWhB,SAAS,GAAGhC,cAAc,GAAI,GAAG,iBACnDD,aAAa,GAAG,CAAC;MAErB;IAAE,EACF,eACF;MAAK,SAAS,EAAC,eAAe;MAAA,wBAC5B;QACE,SAAS,EAAEL,UAAU,CAAC;UACpBuD,QAAQ,EAAElB,SAAS,GAAGtB,aAAa,GAAGD;QACxC,CAAC,CAAE;QAAA,UAEFuB,SAAS,GAAG,UAAU,GAAG;MAAY,EAChC,eACR,KAAC,SAAS;QACR,GAAG,EAAEK,YAAa;QAClB,kBAAkB,EAAE,KAAM;QAC1B,KAAK,EAAEJ,SAAU;QACjB,QAAQ,EAAEW,iBAAkB;QAC5B,QAAQ,EAAEE,iBAAkB;QAC5B,eACEnC,UAAU,KAAKwC,SAAS,aAAMxC,UAAU,gBAAawC;MACtD,EACD;IAAA,EACE,eACN;MAAK,SAAS,EAAC;IAAa,EAAG,eAC/B;MAAK,SAAS,EAAC,eAAe;MAAA,wBAC5B;QACE,SAAS,EAAExD,UAAU,CAAC;UACpBuD,QAAQ,EAAElB,SAAS,GAAGvB,eAAe,GAAGC;QAC1C,CAAC,CAAE;QAAA,UAEFsB,SAAS,GAAG,YAAY,GAAG;MAAU,EAChC,eACR,KAAC,SAAS;QACR,GAAG,EAAEM,aAAc;QACnB,kBAAkB,EAAE,KAAM;QAC1B,KAAK,EAAEH,UAAW;QAClB,QAAQ,EAAEU,kBAAmB;QAC7B,QAAQ,EAAEG,kBAAmB;QAC7B,eACErC,UAAU,KAAKwC,SAAS,aAAMxC,UAAU,gBAAawC;MACtD,EACD;IAAA,EACE,eACN;MACE,SAAS,EAAC,MAAM;MAChB,KAAK,EAAE;QACLF,SAAS,iBACN,CAAChD,cAAc,GAAGkC,UAAU,IAAIlC,cAAc,GAAI,GAAG,iBACjDD,aAAa,GAAG,CAAC;MAC1B;IAAE,EACF;EAAA,EACE;AAEV;AAQA;AACA;AACA;AACA,SAASoD,UAAU,CAACvB,KAAsB,EAAe;EACvD,IAAM;IAAEzB,SAAS;IAAEE,OAAO;IAAE,aAAa,EAAEK;EAAW,CAAC,GAAGkB,KAAK;EAC/D,oBACE;IAAK,SAAS,EAAC,aAAa;IAAC,eAAalB,UAAW;IAAA,WAClDP,SAAS,GAAGE,OAAO,iBAClB;MAAA,wBACE;QACE,SAAS,EAAC,6BAA6B;QACvC,KAAK,EAAE;UAAE+C,SAAS,mBAAY/C,OAAO,GAAGL,cAAc;QAAI;MAAE,EAC5D,eACF;QACE,SAAS,EAAC,2BAA2B;QACrC,KAAK,EAAE;UACLoD,SAAS,mBACP,CAACpD,cAAc,GAAGG,SAAS,IAAIH,cAAc;QAEjD;MAAE,EACF;IAAA,EAEL,EACAG,SAAS,GAAGE,OAAO,iBAClB;MACE,SAAS,EAAC,8BAA8B;MACxC,KAAK,EAAE;QACL+C,SAAS,uBACNjD,SAAS,GAAGH,cAAc,GAAI,GAAG,uBACvB,CAACK,OAAO,GAAGF,SAAS,IAAIH,cAAc;MACrD;IAAE,EAEL;EAAA,EACG;AAEV;AASA;AACA;AACA;AACA,SAASqD,MAAM,CAACzB,KAAkB,EAAe;EAC/C,IAAM;IAAEf,KAAK;IAAEyC,IAAI;IAAEC,OAAO;IAAE,aAAa,EAAE7C;EAAW,CAAC,GAAGkB,KAAK;;EAEjE;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAMwB,SAAS,GAAG9D,OAAO,CAAC,MAAM;IAC9B,IAAMkE,QAAQ,GAAG,EAAE,GAAG,EAAE;IACxB,IAAIC,YAAY,GAAG5D,WAAW,GAAG,CAAC;IAClC,IAAIyD,IAAI,GAAGE,QAAQ,EAAE;MACnBC,YAAY,GAAIH,IAAI,GAAGE,QAAQ,IAAK3D,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,MAAM,IAAIyD,IAAI,GAAG,EAAE,GAAGE,QAAQ,EAAE;MAC/BC,YAAY,GACV5D,WAAW,GAAG,CAAC,GACd,CAAC,IAAIG,cAAc,GAAG,EAAE,GAAGwD,QAAQ,CAAC,IAClCF,IAAI,GAAG,EAAE,GAAGE,QAAQ,CAAC,IACrB3D,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;IACzB;;IACA,iCACGyD,IAAI,GAAGtD,cAAc,GAAI,GAAG,iBACxByD,YAAY;EACrB,CAAC,EAAE,CAACH,IAAI,CAAC,CAAC;EAEV,IAAMI,uBAAuB,GAAGrE,WAAW,CACxCsE,OAAe,IAAK;IACnB,IAAI,CAAC9C,KAAK,CAAC4B,OAAO,EAAE;MAClB,OAAO,CAAC;IACV;IACA,IAAMmB,SAAS,GAAG/C,KAAK,CAAC4B,OAAO,CAACoB,qBAAqB,EAAE;IACvD,IAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACL,OAAO,GAAGC,SAAS,CAACK,IAAI,EAAE,CAAC,CAAC;IACtD;IACA,IAAMC,WAAW,GACflE,cAAc,GAAG+D,IAAI,CAACI,GAAG,CAAC,CAAC,EAAEL,QAAQ,GAAGF,SAAS,CAACQ,KAAK,CAAC;IAC1D;IACA,IAAMC,WAAW,GACfpE,oBAAoB,GAAG8D,IAAI,CAACO,KAAK,CAACJ,WAAW,GAAGjE,oBAAoB,CAAC;IACvE;IACA,IAAMsE,QAAQ,GAAGR,IAAI,CAACI,GAAG,CAACnE,cAAc,EAAEqE,WAAW,CAAC;IACtD,OAAOE,QAAQ;EACjB,CAAC,EACD,CAAC1D,KAAK,CAAC,CACR;EAED,IAAM2D,eAAe,GAAGnF,WAAW,CACjC,SAA6B;IAAA,IAA5B;MAAEsE;IAAoB,CAAC;IACtBJ,OAAO,CAACG,uBAAuB,CAACC,OAAO,CAAC,CAAC;EAC3C,CAAC,EACD,CAACJ,OAAO,EAAEG,uBAAuB,CAAC,CACnC;EAED,IAAMe,aAAa,GAAGpF,WAAW,CAC/B,SAA6B;IAAA,IAA5B;MAAEsE;IAAoB,CAAC;IACtBJ,OAAO,CAACG,uBAAuB,CAACC,OAAO,CAAC,CAAC;IAEzCe,MAAM,CAACC,mBAAmB,CAAC,WAAW,EAAEH,eAAe,CAAC;IACxDE,MAAM,CAACC,mBAAmB,CAAC,SAAS,EAAEF,aAAa,CAAC;IACpDG,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,0BAA0B,CAAC;EACvE,CAAC,EACD,CAACxB,OAAO,EAAEG,uBAAuB,EAAEc,eAAe,CAAC,CACpD;EAED,IAAMQ,kBAAkB,GAAG3F,WAAW,CAAC,MAAM;IAC3CqF,MAAM,CAACO,gBAAgB,CAAC,WAAW,EAAET,eAAe,CAAC;IACrDE,MAAM,CAACO,gBAAgB,CAAC,SAAS,EAAER,aAAa,CAAC;IACjDG,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACI,GAAG,CAAC,0BAA0B,CAAC;EACpE,CAAC,EAAE,CAACV,eAAe,EAAEC,aAAa,CAAC,CAAC;EAEpC,IAAMU,iBAAiB,GAAG9F,WAAW,CAAC,MAAM;IAC1CqF,MAAM,CAACC,mBAAmB,CAAC,WAAW,EAAEH,eAAe,CAAC;IACxDE,MAAM,CAACC,mBAAmB,CAAC,SAAS,EAAEF,aAAa,CAAC;IACpDG,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,0BAA0B,CAAC;EACvE,CAAC,EAAE,CAACP,eAAe,EAAEC,aAAa,CAAC,CAAC;EAEpC,IAAMW,eAAe,GAAG/F,WAAW,CAAC,MAAM;IACxC2F,kBAAkB,EAAE;EACtB,CAAC,EAAE,CAACA,kBAAkB,CAAC,CAAC;EAExBvF,SAAS,CACP,SAAS4F,wBAAwB,GAAG;IAClC,OAAO,MAAM;MACXF,iBAAiB,EAAE;IACrB,CAAC;EACH,CAAC,EACD,CAACA,iBAAiB,CAAC,CACpB;EAED,oBACE;IAAK,SAAS,EAAC,cAAc;IAAC,KAAK,EAAE;MAAE/B;IAAU,CAAE;IAAA,uBACjD;MACE,SAAS,EAAC,QAAQ;MAClB,IAAI,EAAC,QAAQ;MACb,cAAW,aAAa;MACxB,WAAW,EAAEgC,eAAgB;MAC7B,eAAa1E;IAAW;EACxB,EACE;AAEV;AAEA,eAAeR,UAAU"}

package/dist/ToastNotification.js

@@ -5,6 +5,8 @@ import { vsClose } from '@deephaven/icons';
 import Button from "./Button.js";
 import ThemeExport from "./ThemeExport.js";
 import "./ToastNotification.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function ToastNotification(_ref) {
   var {
     buttons,
@@ -17,37 +19,43 @@ function ToastNotification(_ref) {
     'data-testid': dataTestId
   } = _ref;
   var hasButtons = buttons && buttons.length !== 0;
-  return /*#__PURE__*/React.createElement(CSSTransition, {
+  return /*#__PURE__*/_jsx(CSSTransition, {
     in: isShown,
     timeout: ThemeExport.transitionMs,
     classNames: "toast-notification-slide-up",
     mountOnEnter: true,
-    unmountOnExit: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('toast-notification', classNamesProp, type),
-    role: "presentation",
-    onClick: onClick,
-    onKeyPress: onClick,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "message-container"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "message"
-  }, message)), /*#__PURE__*/React.createElement(CSSTransition, {
-    in: hasButtons,
-    timeout: ThemeExport.transitionSlowMs,
-    classNames: "fade",
-    mountOnEnter: true,
-    unmountOnExit: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "buttons-container"
-  }, buttons)), onDismiss && /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    icon: vsClose,
-    tooltip: "Close notification",
-    className: "my-2",
-    onClick: onDismiss
-  })));
+    unmountOnExit: true,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames('toast-notification', classNamesProp, type),
+      role: "presentation",
+      onClick: onClick,
+      onKeyPress: onClick,
+      "data-testid": dataTestId,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "message-container",
+        children: /*#__PURE__*/_jsx("span", {
+          className: "message",
+          children: message
+        })
+      }), /*#__PURE__*/_jsx(CSSTransition, {
+        in: hasButtons,
+        timeout: ThemeExport.transitionSlowMs,
+        classNames: "fade",
+        mountOnEnter: true,
+        unmountOnExit: true,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "buttons-container",
+          children: buttons
+        })
+      }), onDismiss && /*#__PURE__*/_jsx(Button, {
+        kind: "ghost",
+        icon: vsClose,
+        tooltip: "Close notification",
+        className: "my-2",
+        onClick: onDismiss
+      })]
+    })
+  });
 }
 ToastNotification.TYPE = Object.freeze({
   ERROR: 'error'

package/dist/ToastNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastNotification.js","names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","dataTestId","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"sources":["../src/ToastNotification.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { vsClose } from '@deephaven/icons';\nimport Button from './Button';\nimport ThemeExport from './ThemeExport';\nimport './ToastNotification.scss';\n\ntype ToastNotificationProps = {\n  buttons?: (typeof Button)[];\n  classNames?: string;\n  isShown?: boolean;\n  message?: string;\n  type?: string;\n  'data-testid'?: string;\n\n  onClick?: React.EventHandler<\n    React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n  >;\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nfunction ToastNotification({\n  buttons,\n  isShown = false,\n  classNames: classNamesProp,\n  message,\n  type,\n  onClick,\n  onDismiss,\n  'data-testid': dataTestId,\n}: ToastNotificationProps): JSX.Element {\n  const hasButtons = buttons && buttons.length !== 0;\n\n  return (\n    <CSSTransition\n      in={isShown}\n      timeout={ThemeExport.transitionMs}\n      classNames=\"toast-notification-slide-up\"\n      mountOnEnter\n      unmountOnExit\n    >\n      <div\n        className={classNames('toast-notification', classNamesProp, type)}\n        role=\"presentation\"\n        onClick={onClick}\n        onKeyPress={onClick}\n        data-testid={dataTestId}\n      >\n        <div className=\"message-container\">\n          <span className=\"message\">{message}</span>\n        </div>\n        <CSSTransition\n          in={hasButtons}\n          timeout={ThemeExport.transitionSlowMs}\n          classNames=\"fade\"\n          mountOnEnter\n          unmountOnExit\n        >\n          <div className=\"buttons-container\">{buttons}</div>\n        </CSSTransition>\n        {onDismiss && (\n          <Button\n            kind=\"ghost\"\n            icon={vsClose}\n            tooltip=\"Close notification\"\n            className=\"my-2\"\n            onClick={onDismiss}\n          />\n        )}\n      </div>\n    </CSSTransition>\n  );\n}\n\nToastNotification.TYPE = Object.freeze({\n  ERROR: 'error',\n});\n\nexport default ToastNotification;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,OAAO,QAAQ,kBAAkB;AAAC,OACpCC,MAAM;AAAA,OACNC,WAAW;AAAA;AAiBlB,SAASC,iBAAiB,OASc;EAAA,IATb;IACzBC,OAAO;IACPC,OAAO,GAAG,KAAK;IACfP,UAAU,EAAEQ,cAAc;IAC1BC,OAAO;IACPC,IAAI;IACJC,OAAO;IACPC,SAAS;IACT,aAAa,EAAEC;EACO,CAAC;EACvB,IAAMC,UAAU,GAAGR,OAAO,IAAIA,OAAO,CAACS,MAAM,KAAK,CAAC;EAElD,oBACE,oBAAC,aAAa;IACZ,EAAE,EAAER,OAAQ;IACZ,OAAO,EAAEH,WAAW,CAACY,YAAa;IAClC,UAAU,EAAC,6BAA6B;IACxC,YAAY;IACZ,aAAa;EAAA,gBAEb;IACE,SAAS,EAAEhB,UAAU,CAAC,oBAAoB,EAAEQ,cAAc,EAAEE,IAAI,CAAE;IAClE,IAAI,EAAC,cAAc;IACnB,OAAO,EAAEC,OAAQ;IACjB,UAAU,EAAEA,OAAQ;IACpB,eAAaE;EAAW,gBAExB;IAAK,SAAS,EAAC;EAAmB,gBAChC;IAAM,SAAS,EAAC;EAAS,GAAEJ,OAAO,CAAQ,CACtC,eACN,oBAAC,aAAa;IACZ,EAAE,EAAEK,UAAW;IACf,OAAO,EAAEV,WAAW,CAACa,gBAAiB;IACtC,UAAU,EAAC,MAAM;IACjB,YAAY;IACZ,aAAa;EAAA,gBAEb;IAAK,SAAS,EAAC;EAAmB,GAAEX,OAAO,CAAO,CACpC,EACfM,SAAS,iBACR,oBAAC,MAAM;IACL,IAAI,EAAC,OAAO;IACZ,IAAI,EAAEV,OAAQ;IACd,OAAO,EAAC,oBAAoB;IAC5B,SAAS,EAAC,MAAM;IAChB,OAAO,EAAEU;EAAU,EAEtB,CACG,CACQ;AAEpB;AAEAP,iBAAiB,CAACa,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAC;EACrCC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,eAAehB,iBAAiB"}
+{"version":3,"file":"ToastNotification.js","names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","dataTestId","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"sources":["../src/ToastNotification.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { vsClose } from '@deephaven/icons';\nimport Button from './Button';\nimport ThemeExport from './ThemeExport';\nimport './ToastNotification.scss';\n\ntype ToastNotificationProps = {\n  buttons?: (typeof Button)[];\n  classNames?: string;\n  isShown?: boolean;\n  message?: string;\n  type?: string;\n  'data-testid'?: string;\n\n  onClick?: React.EventHandler<\n    React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n  >;\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nfunction ToastNotification({\n  buttons,\n  isShown = false,\n  classNames: classNamesProp,\n  message,\n  type,\n  onClick,\n  onDismiss,\n  'data-testid': dataTestId,\n}: ToastNotificationProps): JSX.Element {\n  const hasButtons = buttons && buttons.length !== 0;\n\n  return (\n    <CSSTransition\n      in={isShown}\n      timeout={ThemeExport.transitionMs}\n      classNames=\"toast-notification-slide-up\"\n      mountOnEnter\n      unmountOnExit\n    >\n      <div\n        className={classNames('toast-notification', classNamesProp, type)}\n        role=\"presentation\"\n        onClick={onClick}\n        onKeyPress={onClick}\n        data-testid={dataTestId}\n      >\n        <div className=\"message-container\">\n          <span className=\"message\">{message}</span>\n        </div>\n        <CSSTransition\n          in={hasButtons}\n          timeout={ThemeExport.transitionSlowMs}\n          classNames=\"fade\"\n          mountOnEnter\n          unmountOnExit\n        >\n          <div className=\"buttons-container\">{buttons}</div>\n        </CSSTransition>\n        {onDismiss && (\n          <Button\n            kind=\"ghost\"\n            icon={vsClose}\n            tooltip=\"Close notification\"\n            className=\"my-2\"\n            onClick={onDismiss}\n          />\n        )}\n      </div>\n    </CSSTransition>\n  );\n}\n\nToastNotification.TYPE = Object.freeze({\n  ERROR: 'error',\n});\n\nexport default ToastNotification;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,OAAO,QAAQ,kBAAkB;AAAC,OACpCC,MAAM;AAAA,OACNC,WAAW;AAAA;AAAA;AAAA;AAiBlB,SAASC,iBAAiB,OASc;EAAA,IATb;IACzBC,OAAO;IACPC,OAAO,GAAG,KAAK;IACfP,UAAU,EAAEQ,cAAc;IAC1BC,OAAO;IACPC,IAAI;IACJC,OAAO;IACPC,SAAS;IACT,aAAa,EAAEC;EACO,CAAC;EACvB,IAAMC,UAAU,GAAGR,OAAO,IAAIA,OAAO,CAACS,MAAM,KAAK,CAAC;EAElD,oBACE,KAAC,aAAa;IACZ,EAAE,EAAER,OAAQ;IACZ,OAAO,EAAEH,WAAW,CAACY,YAAa;IAClC,UAAU,EAAC,6BAA6B;IACxC,YAAY;IACZ,aAAa;IAAA,uBAEb;MACE,SAAS,EAAEhB,UAAU,CAAC,oBAAoB,EAAEQ,cAAc,EAAEE,IAAI,CAAE;MAClE,IAAI,EAAC,cAAc;MACnB,OAAO,EAAEC,OAAQ;MACjB,UAAU,EAAEA,OAAQ;MACpB,eAAaE,UAAW;MAAA,wBAExB;QAAK,SAAS,EAAC,mBAAmB;QAAA,uBAChC;UAAM,SAAS,EAAC,SAAS;UAAA,UAAEJ;QAAO;MAAQ,EACtC,eACN,KAAC,aAAa;QACZ,EAAE,EAAEK,UAAW;QACf,OAAO,EAAEV,WAAW,CAACa,gBAAiB;QACtC,UAAU,EAAC,MAAM;QACjB,YAAY;QACZ,aAAa;QAAA,uBAEb;UAAK,SAAS,EAAC,mBAAmB;UAAA,UAAEX;QAAO;MAAO,EACpC,EACfM,SAAS,iBACR,KAAC,MAAM;QACL,IAAI,EAAC,OAAO;QACZ,IAAI,EAAEV,OAAQ;QACd,OAAO,EAAC,oBAAoB;QAC5B,SAAS,EAAC,MAAM;QAChB,OAAO,EAAEU;MAAU,EAEtB;IAAA;EACG,EACQ;AAEpB;AAEAP,iBAAiB,CAACa,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAC;EACrCC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,eAAehB,iBAAiB"}

package/dist/UISwitch.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import "./UISwitch.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 function UISwitch(_ref) {
   var {
     on,
@@ -11,7 +12,7 @@ function UISwitch(_ref) {
     onClick,
     'data-testid': dataTestId
   } = _ref;
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/_jsx("button", {
     type: "button",
     className: classNames('btn', 'btn-switch', className, {
       active: on
@@ -21,10 +22,11 @@ function UISwitch(_ref) {
     id: id,
     onClick: onClick,
     disabled: disabled,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "handle"
-  }));
+    "data-testid": dataTestId,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "handle"
+    })
+  });
 }
 export default UISwitch;
 //# sourceMappingURL=UISwitch.js.map

package/dist/UISwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"UISwitch.js","names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","dataTestId","active"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n  on: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  id?: string;\n  className?: string;\n  isInvalid?: boolean;\n  disabled?: boolean;\n  'data-testid'?: string;\n};\n\nfunction UISwitch({\n  on,\n  id,\n  className,\n  isInvalid,\n  disabled = false,\n  onClick,\n  'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      className={classNames(\n        'btn',\n        'btn-switch',\n        className,\n        { active: on },\n        { 'is-invalid': isInvalid }\n      )}\n      id={id}\n      onClick={onClick}\n      disabled={disabled}\n      data-testid={dataTestId}\n    >\n      <div className=\"handle\" />\n    </button>\n  );\n}\n\nexport default UISwitch;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAAC;AAapC,SAASC,QAAQ,OAQc;EAAA,IARb;IAChBC,EAAE;IACFC,EAAE;IACFC,SAAS;IACTC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO;IACP,aAAa,EAAEC;EACF,CAAC;EACd,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,SAAS,EAAER,UAAU,CACnB,KAAK,EACL,YAAY,EACZI,SAAS,EACT;MAAEK,MAAM,EAAEP;IAAG,CAAC,EACd;MAAE,YAAY,EAAEG;IAAU,CAAC,CAC3B;IACF,EAAE,EAAEF,EAAG;IACP,OAAO,EAAEI,OAAQ;IACjB,QAAQ,EAAED,QAAS;IACnB,eAAaE;EAAW,gBAExB;IAAK,SAAS,EAAC;EAAQ,EAAG,CACnB;AAEb;AAEA,eAAeP,QAAQ"}
+{"version":3,"file":"UISwitch.js","names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","dataTestId","active"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n  on: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  id?: string;\n  className?: string;\n  isInvalid?: boolean;\n  disabled?: boolean;\n  'data-testid'?: string;\n};\n\nfunction UISwitch({\n  on,\n  id,\n  className,\n  isInvalid,\n  disabled = false,\n  onClick,\n  'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      className={classNames(\n        'btn',\n        'btn-switch',\n        className,\n        { active: on },\n        { 'is-invalid': isInvalid }\n      )}\n      id={id}\n      onClick={onClick}\n      disabled={disabled}\n      data-testid={dataTestId}\n    >\n      <div className=\"handle\" />\n    </button>\n  );\n}\n\nexport default UISwitch;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAAC;AAAA;AAapC,SAASC,QAAQ,OAQc;EAAA,IARb;IAChBC,EAAE;IACFC,EAAE;IACFC,SAAS;IACTC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO;IACP,aAAa,EAAEC;EACF,CAAC;EACd,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,SAAS,EAAER,UAAU,CACnB,KAAK,EACL,YAAY,EACZI,SAAS,EACT;MAAEK,MAAM,EAAEP;IAAG,CAAC,EACd;MAAE,YAAY,EAAEG;IAAU,CAAC,CAC3B;IACF,EAAE,EAAEF,EAAG;IACP,OAAO,EAAEI,OAAQ;IACjB,QAAQ,EAAED,QAAS;IACnB,eAAaE,UAAW;IAAA,uBAExB;MAAK,SAAS,EAAC;IAAQ;EAAG,EACnB;AAEb;AAEA,eAAeP,QAAQ"}

package/dist/ValidateLabelInput.js

@@ -2,6 +2,9 @@ import React, { useRef } from 'react';
 import classNames from 'classnames';
 import shortid from 'shortid';
 import "./ValidateLabelInput.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Takes a child and add a label and validaton error
  */
@@ -20,31 +23,37 @@ export function ValidateLabelInput(props) {
   var {
     current: id
   } = useRef(idProp !== null && idProp !== void 0 ? idProp : shortid());
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
-    className: classNames('validate-label', className, {
-      modified: isModified
-    }),
-    htmlFor: id,
-    "data-testid": dataTestId
-  }, labelText), React.Children.toArray(children).map(child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      // eslint-disable-next-line react/jsx-key
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(className)
-      }, child);
-    }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("label", {
+      className: classNames('validate-label', className, {
+        modified: isModified
+      }),
+      htmlFor: id,
+      "data-testid": dataTestId,
+      children: labelText
+    }), React.Children.toArray(children).map(child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        // eslint-disable-next-line react/jsx-key
+        return /*#__PURE__*/_jsx("div", {
+          className: classNames(className),
+          children: child
+        });
+      }
 
-    // toArray strips null children
-    return /*#__PURE__*/React.cloneElement(child, {
-      className: classNames(child.props.className, {
-        'is-invalid': validationError
-      })
-    });
-  }), hintText !== undefined && /*#__PURE__*/React.createElement("small", {
-    className: "form-text text-muted"
-  }, hintText), validationError !== undefined && showValidationError && /*#__PURE__*/React.createElement("p", {
-    className: "validate-label-error text-danger"
-  }, validationError));
+      // toArray strips null children
+      return /*#__PURE__*/React.cloneElement(child, {
+        className: classNames(child.props.className, {
+          'is-invalid': validationError
+        })
+      });
+    }), hintText !== undefined && /*#__PURE__*/_jsx("small", {
+      className: "form-text text-muted",
+      children: hintText
+    }), validationError !== undefined && showValidationError && /*#__PURE__*/_jsx("p", {
+      className: "validate-label-error text-danger",
+      children: validationError
+    })]
+  });
 }
 export default ValidateLabelInput;
 //# sourceMappingURL=ValidateLabelInput.js.map