@deephaven/components 0.22.3-beta.18 → 0.22.3-beta.21

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 (178) hide show
  1. package/dist/AutoCompleteInput.js +12 -85
  2. package/dist/AutoCompleteInput.js.map +1 -1
  3. package/dist/AutoResizeTextarea.d.ts +5 -5
  4. package/dist/AutoResizeTextarea.d.ts.map +1 -1
  5. package/dist/AutoResizeTextarea.js +8 -23
  6. package/dist/AutoResizeTextarea.js.map +1 -1
  7. package/dist/BasicModal.d.ts +28 -1
  8. package/dist/BasicModal.d.ts.map +1 -1
  9. package/dist/BasicModal.js +2 -8
  10. package/dist/BasicModal.js.map +1 -1
  11. package/dist/Button.js +8 -34
  12. package/dist/Button.js.map +1 -1
  13. package/dist/ButtonGroup.d.ts +6 -6
  14. package/dist/ButtonGroup.d.ts.map +1 -1
  15. package/dist/ButtonGroup.js +2 -4
  16. package/dist/ButtonGroup.js.map +1 -1
  17. package/dist/ButtonOld.js.map +1 -1
  18. package/dist/CardFlip.d.ts +1 -1
  19. package/dist/CardFlip.d.ts.map +1 -1
  20. package/dist/CardFlip.js +2 -7
  21. package/dist/CardFlip.js.map +1 -1
  22. package/dist/Checkbox.js +3 -14
  23. package/dist/Checkbox.js.map +1 -1
  24. package/dist/Collapse.js +0 -15
  25. package/dist/Collapse.js.map +1 -1
  26. package/dist/ComboBox.js +4 -83
  27. package/dist/ComboBox.js.map +1 -1
  28. package/dist/CopyButton.d.ts +1 -1
  29. package/dist/CopyButton.d.ts.map +1 -1
  30. package/dist/CopyButton.js +2 -4
  31. package/dist/CopyButton.js.map +1 -1
  32. package/dist/CustomTimeSelect.js +2 -86
  33. package/dist/CustomTimeSelect.js.map +1 -1
  34. package/dist/DateInput.js.map +1 -1
  35. package/dist/DateInputUtils.js +0 -7
  36. package/dist/DateInputUtils.js.map +1 -1
  37. package/dist/DateTimeInput.js +7 -10
  38. package/dist/DateTimeInput.js.map +1 -1
  39. package/dist/DebouncedSearchInput.js +0 -14
  40. package/dist/DebouncedSearchInput.js.map +1 -1
  41. package/dist/DragUtils.js +4 -16
  42. package/dist/DragUtils.js.map +1 -1
  43. package/dist/DraggableItemList.d.ts.map +1 -1
  44. package/dist/DraggableItemList.js +22 -44
  45. package/dist/DraggableItemList.js.map +1 -1
  46. package/dist/EditableItemList.d.ts +1 -1
  47. package/dist/EditableItemList.d.ts.map +1 -1
  48. package/dist/EditableItemList.js +2 -6
  49. package/dist/EditableItemList.js.map +1 -1
  50. package/dist/HierarchicalCheckboxMenu.js +6 -28
  51. package/dist/HierarchicalCheckboxMenu.js.map +1 -1
  52. package/dist/ItemList.d.ts.map +1 -1
  53. package/dist/ItemList.js +22 -115
  54. package/dist/ItemList.js.map +1 -1
  55. package/dist/ItemListItem.d.ts +0 -1
  56. package/dist/ItemListItem.d.ts.map +1 -1
  57. package/dist/ItemListItem.js +26 -50
  58. package/dist/ItemListItem.js.map +1 -1
  59. package/dist/LoadingOverlay.d.ts +1 -1
  60. package/dist/LoadingOverlay.d.ts.map +1 -1
  61. package/dist/LoadingOverlay.js +3 -5
  62. package/dist/LoadingOverlay.js.map +1 -1
  63. package/dist/LoadingSpinner.d.ts +1 -1
  64. package/dist/LoadingSpinner.d.ts.map +1 -1
  65. package/dist/LoadingSpinner.js +2 -4
  66. package/dist/LoadingSpinner.js.map +1 -1
  67. package/dist/MaskedInput.js +26 -85
  68. package/dist/MaskedInput.js.map +1 -1
  69. package/dist/Option.d.ts +1 -1
  70. package/dist/Option.d.ts.map +1 -1
  71. package/dist/Option.js +2 -4
  72. package/dist/Option.js.map +1 -1
  73. package/dist/RadioGroup.d.ts +1 -1
  74. package/dist/RadioGroup.d.ts.map +1 -1
  75. package/dist/RadioGroup.js +4 -6
  76. package/dist/RadioGroup.js.map +1 -1
  77. package/dist/RadioItem.js +0 -1
  78. package/dist/RadioItem.js.map +1 -1
  79. package/dist/SearchInput.js +2 -13
  80. package/dist/SearchInput.js.map +1 -1
  81. package/dist/Select.d.ts +1 -1
  82. package/dist/Select.d.ts.map +1 -1
  83. package/dist/Select.js +2 -4
  84. package/dist/Select.js.map +1 -1
  85. package/dist/SelectValueList.js +0 -28
  86. package/dist/SelectValueList.js.map +1 -1
  87. package/dist/SocketedButton.js.map +1 -1
  88. package/dist/ThemeExport.js +0 -4
  89. package/dist/ThemeExport.js.map +1 -1
  90. package/dist/TimeInput.js +2 -12
  91. package/dist/TimeInput.js.map +1 -1
  92. package/dist/TimeSlider.d.ts +1 -1
  93. package/dist/TimeSlider.d.ts.map +1 -1
  94. package/dist/TimeSlider.js +19 -33
  95. package/dist/TimeSlider.js.map +1 -1
  96. package/dist/ToastNotification.d.ts +4 -4
  97. package/dist/ToastNotification.d.ts.map +1 -1
  98. package/dist/ToastNotification.js +2 -4
  99. package/dist/ToastNotification.js.map +1 -1
  100. package/dist/UISwitch.d.ts +1 -1
  101. package/dist/UISwitch.d.ts.map +1 -1
  102. package/dist/UISwitch.js +2 -4
  103. package/dist/UISwitch.js.map +1 -1
  104. package/dist/ValidateLabelInput.d.ts.map +1 -1
  105. package/dist/ValidateLabelInput.js +3 -3
  106. package/dist/ValidateLabelInput.js.map +1 -1
  107. package/dist/context-actions/ContextActionUtils.js +9 -40
  108. package/dist/context-actions/ContextActionUtils.js.map +1 -1
  109. package/dist/context-actions/ContextActions.js +1 -34
  110. package/dist/context-actions/ContextActions.js.map +1 -1
  111. package/dist/context-actions/ContextMenu.js +29 -110
  112. package/dist/context-actions/ContextMenu.js.map +1 -1
  113. package/dist/context-actions/ContextMenuItem.d.ts.map +1 -1
  114. package/dist/context-actions/ContextMenuItem.js +3 -19
  115. package/dist/context-actions/ContextMenuItem.js.map +1 -1
  116. package/dist/context-actions/ContextMenuRoot.js +7 -26
  117. package/dist/context-actions/ContextMenuRoot.js.map +1 -1
  118. package/dist/context-actions/GlobalContextAction.js +0 -15
  119. package/dist/context-actions/GlobalContextAction.js.map +1 -1
  120. package/dist/context-actions/GlobalContextActions.js +0 -6
  121. package/dist/context-actions/GlobalContextActions.js.map +1 -1
  122. package/dist/context-actions/index.js.map +1 -1
  123. package/dist/index.js.map +1 -1
  124. package/dist/menu-actions/DropdownMenu.js +4 -32
  125. package/dist/menu-actions/DropdownMenu.js.map +1 -1
  126. package/dist/menu-actions/Menu.js +7 -52
  127. package/dist/menu-actions/Menu.js.map +1 -1
  128. package/dist/menu-actions/index.d.ts +2 -1
  129. package/dist/menu-actions/index.d.ts.map +1 -1
  130. package/dist/menu-actions/index.js +2 -2
  131. package/dist/menu-actions/index.js.map +1 -1
  132. package/dist/modal/Modal.d.ts +2 -2
  133. package/dist/modal/Modal.d.ts.map +1 -1
  134. package/dist/modal/Modal.js +3 -9
  135. package/dist/modal/Modal.js.map +1 -1
  136. package/dist/modal/ModalBody.d.ts +1 -1
  137. package/dist/modal/ModalBody.d.ts.map +1 -1
  138. package/dist/modal/ModalBody.js +2 -4
  139. package/dist/modal/ModalBody.js.map +1 -1
  140. package/dist/modal/ModalFooter.d.ts +1 -1
  141. package/dist/modal/ModalFooter.d.ts.map +1 -1
  142. package/dist/modal/ModalFooter.js +2 -4
  143. package/dist/modal/ModalFooter.js.map +1 -1
  144. package/dist/modal/ModalHeader.d.ts +1 -1
  145. package/dist/modal/ModalHeader.d.ts.map +1 -1
  146. package/dist/modal/ModalHeader.js +2 -4
  147. package/dist/modal/ModalHeader.js.map +1 -1
  148. package/dist/modal/index.js.map +1 -1
  149. package/dist/navigation/Menu.d.ts +1 -1
  150. package/dist/navigation/Menu.d.ts.map +1 -1
  151. package/dist/navigation/Menu.js +2 -2
  152. package/dist/navigation/Menu.js.map +1 -1
  153. package/dist/navigation/MenuItem.d.ts +1 -1
  154. package/dist/navigation/MenuItem.d.ts.map +1 -1
  155. package/dist/navigation/MenuItem.js +4 -7
  156. package/dist/navigation/MenuItem.js.map +1 -1
  157. package/dist/navigation/Page.d.ts +1 -1
  158. package/dist/navigation/Page.d.ts.map +1 -1
  159. package/dist/navigation/Page.js +2 -3
  160. package/dist/navigation/Page.js.map +1 -1
  161. package/dist/navigation/Stack.d.ts +1 -1
  162. package/dist/navigation/Stack.d.ts.map +1 -1
  163. package/dist/navigation/Stack.js +3 -6
  164. package/dist/navigation/Stack.js.map +1 -1
  165. package/dist/navigation/index.js.map +1 -1
  166. package/dist/popper/Popper.d.ts.map +1 -1
  167. package/dist/popper/Popper.js +13 -46
  168. package/dist/popper/Popper.js.map +1 -1
  169. package/dist/popper/Tooltip.js +0 -56
  170. package/dist/popper/Tooltip.js.map +1 -1
  171. package/dist/popper/index.js.map +1 -1
  172. package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
  173. package/dist/shortcuts/Shortcut.js +19 -76
  174. package/dist/shortcuts/Shortcut.js.map +1 -1
  175. package/dist/shortcuts/ShortcutRegistry.js +3 -18
  176. package/dist/shortcuts/ShortcutRegistry.js.map +1 -1
  177. package/dist/shortcuts/index.js.map +1 -1
  178. package/package.json +8 -8
@@ -1 +1 @@
1
- {"version":3,"file":"TimeSlider.d.ts","sourceRoot":"","sources":["../src/TimeSlider.tsx"],"names":[],"mappings":";AAaA,OAAO,mBAAmB,CAAC;AAO3B,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,UAAU,6HAOb,eAAe,KAAG,WAuFpB,CAAC;AAwSF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"TimeSlider.d.ts","sourceRoot":"","sources":["../src/TimeSlider.tsx"],"names":[],"mappings":";AAaA,OAAO,mBAAmB,CAAC;AAO3B,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,eAAuB,EACvB,aAAqB,EACrB,aAAa,EAAE,UAAU,GAC1B,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAuF/B;AAwSD,eAAe,UAAU,CAAC"}
@@ -1,5 +1,6 @@
1
1
  /* eslint-disable react/no-array-index-key */
2
2
  // array maps being used are static, this is fine.
3
+
3
4
  import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
4
5
  import classNames from 'classnames';
5
6
  import TimeInput from "./TimeInput.js";
@@ -8,14 +9,13 @@ import "./TimeSlider.css";
8
9
  var HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);
9
10
  var POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);
10
11
  var SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59
11
-
12
12
  var SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals
13
13
 
14
14
  /**
15
15
  * Creates a time slider for setting a start and end time, that can also run overnight
16
16
  * @param props takes times in seconds 0 - 86399 and a callback
17
17
  */
18
- var TimeSlider = _ref => {
18
+ function TimeSlider(_ref) {
19
19
  var {
20
20
  startTime: propStartTime,
21
21
  endTime: propEndTime,
@@ -27,8 +27,8 @@ var TimeSlider = _ref => {
27
27
  var [startTime, setStartTime] = useState(propStartTime);
28
28
  var [endTime, setEndTime] = useState(propEndTime);
29
29
  var track = useRef(null); // we need the track width while calulculating time from handle drag
30
- // updates state if props change
31
30
 
31
+ // updates state if props change
32
32
  useEffect(function setTimeOnPropTimeChange() {
33
33
  setStartTime(propStartTime);
34
34
  setEndTime(propEndTime);
@@ -36,7 +36,6 @@ var TimeSlider = _ref => {
36
36
  var updateTime = useCallback((newStartTime, newEndTime) => {
37
37
  var start = newStartTime;
38
38
  var end = newEndTime;
39
-
40
39
  if (start === end) {
41
40
  if (end < SECONDS_IN_DAY) {
42
41
  end += 1;
@@ -44,7 +43,6 @@ var TimeSlider = _ref => {
44
43
  start -= 1;
45
44
  }
46
45
  }
47
-
48
46
  setStartTime(start);
49
47
  setEndTime(end);
50
48
  onChange({
@@ -97,9 +95,8 @@ var TimeSlider = _ref => {
97
95
  className: "tick-label",
98
96
  key: index
99
97
  }, "".concat(index + 1, ":00"))))));
100
- };
101
-
102
- var PopOvers = props => {
98
+ }
99
+ function PopOvers(props) {
103
100
  var {
104
101
  startTime,
105
102
  endTime,
@@ -113,8 +110,8 @@ var PopOvers = props => {
113
110
  var [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);
114
111
  var [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);
115
112
  var firstTimeRef = useRef(null);
116
- var secondTimeRef = useRef(null); // Keep track of selection in both time inputs
117
-
113
+ var secondTimeRef = useRef(null);
114
+ // Keep track of selection in both time inputs
118
115
  var firstTimeSelectionRef = useRef(null);
119
116
  var secondTimeSelectionRef = useRef(null);
120
117
  useEffect(function setTimeOnPropTimeChange() {
@@ -124,17 +121,13 @@ var PopOvers = props => {
124
121
  useEffect(function setFocusOnSwapTimesChange() {
125
122
  if (firstTimeSelectionRef.current !== null) {
126
123
  var _secondTimeRef$curren;
127
-
128
124
  (_secondTimeRef$curren = secondTimeRef.current) === null || _secondTimeRef$curren === void 0 ? void 0 : _secondTimeRef$curren.setSelection(firstTimeSelectionRef.current);
129
125
  }
130
-
131
126
  if (secondTimeSelectionRef.current !== null) {
132
127
  var _firstTimeRef$current;
133
-
134
128
  (_firstTimeRef$current = firstTimeRef.current) === null || _firstTimeRef$current === void 0 ? void 0 : _firstTimeRef$current.setSelection(secondTimeSelectionRef.current);
135
129
  }
136
130
  }, [swapTimes]);
137
-
138
131
  function onFirstTimeChange(value) {
139
132
  if (startTime <= endTime) {
140
133
  onStartTimeChange(value);
@@ -142,7 +135,6 @@ var PopOvers = props => {
142
135
  onEndTimeChange(value);
143
136
  }
144
137
  }
145
-
146
138
  function onSecondTimeChange(value) {
147
139
  if (startTime <= endTime) {
148
140
  onEndTimeChange(value);
@@ -150,7 +142,6 @@ var PopOvers = props => {
150
142
  onStartTimeChange(value);
151
143
  }
152
144
  }
153
-
154
145
  var onFirstTimeSelect = useCallback(selection => {
155
146
  firstTimeSelectionRef.current = selection;
156
147
  secondTimeSelectionRef.current = null;
@@ -200,12 +191,11 @@ var PopOvers = props => {
200
191
  flexBasis: "calc(".concat((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY * 100, "% - ").concat(POPOVER_WIDTH / 2, "px)")
201
192
  }
202
193
  }));
203
- };
204
-
194
+ }
205
195
  /**
206
196
  * Shades the area between or outside of handles according to if start or endtime is greater.
207
197
  */
208
- var TrackFills = props => {
198
+ function TrackFills(props) {
209
199
  var {
210
200
  startTime,
211
201
  endTime,
@@ -230,18 +220,18 @@ var TrackFills = props => {
230
220
  transform: "translateX(".concat(startTime / SECONDS_IN_DAY * 100, "%) scaleX(").concat((endTime - startTime) / SECONDS_IN_DAY, ")")
231
221
  }
232
222
  }));
233
- };
234
-
223
+ }
235
224
  /**
236
225
  * Creates a draggable handle the sets the time
237
226
  */
238
- var Handle = props => {
227
+ function Handle(props) {
239
228
  var {
240
229
  track,
241
230
  time,
242
231
  setTime,
243
232
  'data-testid': dataTestId
244
233
  } = props;
234
+
245
235
  /**
246
236
  * Takes the time and generate our translation string taking into account handle offset.
247
237
  * The handle offset changes for the first and last tick range dynmaically. Normally,
@@ -249,11 +239,9 @@ var Handle = props => {
249
239
  * end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.
250
240
  * @param t time in seconds
251
241
  */
252
-
253
242
  var transform = useMemo(() => {
254
243
  var ONE_HOUR = 60 * 60;
255
244
  var handleOffset = HANDLE_SIZE / 2;
256
-
257
245
  if (time < ONE_HOUR) {
258
246
  handleOffset = time / ONE_HOUR * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size
259
247
  } else if (time > 23 * ONE_HOUR) {
@@ -266,14 +254,13 @@ var Handle = props => {
266
254
  if (!track.current) {
267
255
  return 0;
268
256
  }
269
-
270
257
  var trackRect = track.current.getBoundingClientRect();
271
- var leftEdge = Math.max(clientX - trackRect.left, 0); // get position as 0-1 on slider and mulitply by seconds in a day to convert to time
272
-
273
- var preciseTime = SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width); // snap to nearest N(5) minute interval
274
-
275
- var roundedTime = SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES); // prevent over-rounding to 24:00:00
276
-
258
+ var leftEdge = Math.max(clientX - trackRect.left, 0);
259
+ // get position as 0-1 on slider and mulitply by seconds in a day to convert to time
260
+ var preciseTime = SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);
261
+ // snap to nearest N(5) minute interval
262
+ var roundedTime = SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);
263
+ // prevent over-rounding to 24:00:00
277
264
  var limitMax = Math.min(SECONDS_IN_DAY, roundedTime);
278
265
  return limitMax;
279
266
  }, [track]);
@@ -322,7 +309,6 @@ var Handle = props => {
322
309
  onMouseDown: handleMouseDown,
323
310
  "data-testid": dataTestId
324
311
  }));
325
- };
326
-
312
+ }
327
313
  export default TimeSlider;
328
314
  //# sourceMappingURL=TimeSlider.js.map
@@ -1 +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 */\nconst 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\nconst 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 */\nconst 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 */\nconst 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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"}
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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"}
@@ -11,11 +11,11 @@ declare type ToastNotificationProps = {
11
11
  onClick?: React.EventHandler<React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>>;
12
12
  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
13
13
  };
14
- declare const ToastNotification: {
15
- ({ buttons, isShown, classNames: classNamesProp, message, type, onClick, onDismiss, "data-testid": dataTestId, }: ToastNotificationProps): JSX.Element;
16
- TYPE: Readonly<{
14
+ declare function ToastNotification({ buttons, isShown, classNames: classNamesProp, message, type, onClick, onDismiss, 'data-testid': dataTestId, }: ToastNotificationProps): JSX.Element;
15
+ declare namespace ToastNotification {
16
+ var TYPE: Readonly<{
17
17
  ERROR: string;
18
18
  }>;
19
- };
19
+ }
20
20
  export default ToastNotification;
21
21
  //# sourceMappingURL=ToastNotification.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ToastNotification.d.ts","sourceRoot":"","sources":["../src/ToastNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,0BAA0B,CAAC;AAElC,aAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAC1B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACvE,CAAC;IACF,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,iBAAiB;sHASpB,sBAAsB,GAAG,WAAW;;;;CA0CtC,CAAC;AAMF,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"ToastNotification.d.ts","sourceRoot":"","sources":["../src/ToastNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,0BAA0B,CAAC;AAElC,aAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAC1B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACvE,CAAC;IACF,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,OAAe,EACf,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GAC1B,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CA0CtC;kBAnDQ,iBAAiB;;;;;AAyD1B,eAAe,iBAAiB,CAAC"}
@@ -5,8 +5,7 @@ import { vsClose } from '@deephaven/icons';
5
5
  import Button from "./Button.js";
6
6
  import ThemeExport from "./ThemeExport.js";
7
7
  import "./ToastNotification.css";
8
-
9
- var ToastNotification = _ref => {
8
+ function ToastNotification(_ref) {
10
9
  var {
11
10
  buttons,
12
11
  isShown = false,
@@ -49,8 +48,7 @@ var ToastNotification = _ref => {
49
48
  className: "my-2",
50
49
  onClick: onDismiss
51
50
  })));
52
- };
53
-
51
+ }
54
52
  ToastNotification.TYPE = Object.freeze({
55
53
  ERROR: 'error'
56
54
  });
@@ -1 +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\nconst 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,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,SAASC,OAAT,QAAwB,kBAAxB;OACOC,M;OACAC,W;;;AAiBP,IAAMC,iBAAiB,GAAG,QASiB;EAAA,IAThB;IACzBC,OADyB;IAEzBC,OAAO,GAAG,KAFe;IAGzBP,UAAU,EAAEQ,cAHa;IAIzBC,OAJyB;IAKzBC,IALyB;IAMzBC,OANyB;IAOzBC,SAPyB;IAQzB,eAAeC;EARU,CASgB;EACzC,IAAMC,UAAU,GAAGR,OAAO,IAAIA,OAAO,CAACS,MAAR,KAAmB,CAAjD;EAEA,oBACE,oBAAC,aAAD;IACE,EAAE,EAAER,OADN;IAEE,OAAO,EAAEH,WAAW,CAACY,YAFvB;IAGE,UAAU,EAAC,6BAHb;IAIE,YAAY,MAJd;IAKE,aAAa;EALf,gBAOE;IACE,SAAS,EAAEhB,UAAU,CAAC,oBAAD,EAAuBQ,cAAvB,EAAuCE,IAAvC,CADvB;IAEE,IAAI,EAAC,cAFP;IAGE,OAAO,EAAEC,OAHX;IAIE,UAAU,EAAEA,OAJd;IAKE,eAAaE;EALf,gBAOE;IAAK,SAAS,EAAC;EAAf,gBACE;IAAM,SAAS,EAAC;EAAhB,GAA2BJ,OAA3B,CADF,CAPF,eAUE,oBAAC,aAAD;IACE,EAAE,EAAEK,UADN;IAEE,OAAO,EAAEV,WAAW,CAACa,gBAFvB;IAGE,UAAU,EAAC,MAHb;IAIE,YAAY,MAJd;IAKE,aAAa;EALf,gBAOE;IAAK,SAAS,EAAC;EAAf,GAAoCX,OAApC,CAPF,CAVF,EAmBGM,SAAS,iBACR,oBAAC,MAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAEV,OAFR;IAGE,OAAO,EAAC,oBAHV;IAIE,SAAS,EAAC,MAJZ;IAKE,OAAO,EAAEU;EALX,EApBJ,CAPF,CADF;AAuCD,CAnDD;;AAqDAP,iBAAiB,CAACa,IAAlB,GAAyBC,MAAM,CAACC,MAAP,CAAc;EACrCC,KAAK,EAAE;AAD8B,CAAd,CAAzB;AAIA,eAAehB,iBAAf"}
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"}
@@ -9,6 +9,6 @@ export declare type UISwitchProps = {
9
9
  disabled?: boolean;
10
10
  'data-testid'?: string;
11
11
  };
12
- declare const UISwitch: ({ on, id, className, isInvalid, disabled, onClick, "data-testid": dataTestId, }: UISwitchProps) => JSX.Element;
12
+ declare function UISwitch({ on, id, className, isInvalid, disabled, onClick, 'data-testid': dataTestId, }: UISwitchProps): JSX.Element;
13
13
  export default UISwitch;
14
14
  //# sourceMappingURL=UISwitch.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"UISwitch.d.ts","sourceRoot":"","sources":["../src/UISwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,oBAAY,aAAa,GAAG;IAC1B,EAAE,EAAE,OAAO,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,QAAQ,oFAQX,aAAa,KAAG,WAiBlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"UISwitch.d.ts","sourceRoot":"","sources":["../src/UISwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,oBAAY,aAAa,GAAG;IAC1B,EAAE,EAAE,OAAO,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,EAAE,EACF,SAAS,EACT,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAa,EAAE,UAAU,GAC1B,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAmB7B;AAED,eAAe,QAAQ,CAAC"}
package/dist/UISwitch.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import React from 'react';
2
2
  import classNames from 'classnames';
3
3
  import "./UISwitch.css";
4
-
5
- var UISwitch = _ref => {
4
+ function UISwitch(_ref) {
6
5
  var {
7
6
  on,
8
7
  id,
@@ -26,7 +25,6 @@ var UISwitch = _ref => {
26
25
  }, /*#__PURE__*/React.createElement("div", {
27
26
  className: "handle"
28
27
  }));
29
- };
30
-
28
+ }
31
29
  export default UISwitch;
32
30
  //# sourceMappingURL=UISwitch.js.map
@@ -1 +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\nconst UISwitch = ({\n on,\n id,\n className,\n isInvalid,\n disabled = false,\n onClick,\n 'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element => (\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\nexport default UISwitch;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAaA,IAAMC,QAAQ,GAAG;EAAA,IAAC;IAChBC,EADgB;IAEhBC,EAFgB;IAGhBC,SAHgB;IAIhBC,SAJgB;IAKhBC,QAAQ,GAAG,KALK;IAMhBC,OANgB;IAOhB,eAAeC;EAPC,CAAD;EAAA,oBASf;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAER,UAAU,CACnB,KADmB,EAEnB,YAFmB,EAGnBI,SAHmB,EAInB;MAAEK,MAAM,EAAEP;IAAV,CAJmB,EAKnB;MAAE,cAAcG;IAAhB,CALmB,CAFvB;IASE,EAAE,EAAEF,EATN;IAUE,OAAO,EAAEI,OAVX;IAWE,QAAQ,EAAED,QAXZ;IAYE,eAAaE;EAZf,gBAcE;IAAK,SAAS,EAAC;EAAf,EAdF,CATe;AAAA,CAAjB;;AA2BA,eAAeP,QAAf"}
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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ValidateLabelInput.d.ts","sourceRoot":"","sources":["../src/ValidateLabelInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,uBAAuB,GAAG;IACpC,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,KAAK,CAAC,YAAY,CA8CpB;AAED,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"ValidateLabelInput.d.ts","sourceRoot":"","sources":["../src/ValidateLabelInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,uBAAuB,GAAG;IACpC,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,KAAK,CAAC,YAAY,CA+CpB;AAED,eAAe,kBAAkB,CAAC"}
@@ -2,7 +2,6 @@ import React, { useRef } from 'react';
2
2
  import classNames from 'classnames';
3
3
  import shortid from 'shortid';
4
4
  import "./ValidateLabelInput.css";
5
-
6
5
  /**
7
6
  * Takes a child and add a label and validaton error
8
7
  */
@@ -29,12 +28,13 @@ export function ValidateLabelInput(props) {
29
28
  "data-testid": dataTestId
30
29
  }, labelText), React.Children.toArray(children).map(child => {
31
30
  if (! /*#__PURE__*/React.isValidElement(child)) {
31
+ // eslint-disable-next-line react/jsx-key
32
32
  return /*#__PURE__*/React.createElement("div", {
33
33
  className: classNames(className)
34
34
  }, child);
35
- } // toArray strips null children
36
-
35
+ }
37
36
 
37
+ // toArray strips null children
38
38
  return /*#__PURE__*/React.cloneElement(child, {
39
39
  className: classNames(child.props.className, {
40
40
  'is-invalid': validationError
@@ -1 +1 @@
1
- {"version":3,"file":"ValidateLabelInput.js","names":["React","useRef","classNames","shortid","ValidateLabelInput","props","children","className","labelText","hintText","isModified","validationError","showValidationError","dataTestId","id","idProp","current","modified","Children","toArray","map","child","isValidElement","cloneElement","undefined"],"sources":["../src/ValidateLabelInput.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport shortid from 'shortid';\nimport './ValidateLabelInput.scss';\n\nexport type ValidateLabelInputProps = {\n /** Element to add label to */\n children: React.ReactNode;\n\n /** Any classnames to add */\n className?: string | string[];\n\n /** Text for this validation label */\n labelText?: string;\n\n /** Small hint text next to the main label */\n hintText?: string;\n\n /** Show a modified state. Defaults to false. */\n isModified?: boolean;\n\n /** Validation error that has occurred */\n validationError?: string;\n\n /** Show the validation error if it exists. Default to true. */\n showValidationError?: boolean;\n\n /** ID to use. Auto-generates if not provided */\n id?: string;\n\n /** data-testid to apply to the label */\n 'data-testid'?: string;\n};\n\n/**\n * Takes a child and add a label and validaton error\n */\nexport function ValidateLabelInput(\n props: ValidateLabelInputProps\n): React.ReactElement {\n const {\n children,\n className,\n labelText,\n hintText,\n isModified,\n validationError,\n showValidationError = true,\n 'data-testid': dataTestId,\n id: idProp,\n } = props;\n\n const { current: id } = useRef(idProp ?? shortid());\n\n return (\n <>\n <label\n className={classNames('validate-label', className, {\n modified: isModified,\n })}\n htmlFor={id}\n data-testid={dataTestId}\n >\n {labelText}\n </label>\n {React.Children.toArray(children).map(child => {\n if (!React.isValidElement(child)) {\n return <div className={classNames(className)}>{child}</div>;\n }\n\n // toArray strips null children\n return React.cloneElement(child, {\n className: classNames(child.props.className, {\n 'is-invalid': validationError,\n }),\n });\n })}\n {hintText !== undefined && (\n <small className=\"form-text text-muted\">{hintText}</small>\n )}\n {validationError !== undefined && showValidationError && (\n <p className=\"validate-label-error text-danger\">{validationError}</p>\n )}\n </>\n );\n}\n\nexport default ValidateLabelInput;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,OAAP,MAAoB,SAApB;;;AAgCA;AACA;AACA;AACA,OAAO,SAASC,kBAAT,CACLC,KADK,EAEe;EACpB,IAAM;IACJC,QADI;IAEJC,SAFI;IAGJC,SAHI;IAIJC,QAJI;IAKJC,UALI;IAMJC,eANI;IAOJC,mBAAmB,GAAG,IAPlB;IAQJ,eAAeC,UARX;IASJC,EAAE,EAAEC;EATA,IAUFV,KAVJ;EAYA,IAAM;IAAEW,OAAO,EAAEF;EAAX,IAAkBb,MAAM,CAACc,MAAD,aAACA,MAAD,cAACA,MAAD,GAAWZ,OAAO,EAAlB,CAA9B;EAEA,oBACE,uDACE;IACE,SAAS,EAAED,UAAU,CAAC,gBAAD,EAAmBK,SAAnB,EAA8B;MACjDU,QAAQ,EAAEP;IADuC,CAA9B,CADvB;IAIE,OAAO,EAAEI,EAJX;IAKE,eAAaD;EALf,GAOGL,SAPH,CADF,EAUGR,KAAK,CAACkB,QAAN,CAAeC,OAAf,CAAuBb,QAAvB,EAAiCc,GAAjC,CAAqCC,KAAK,IAAI;IAC7C,IAAI,eAACrB,KAAK,CAACsB,cAAN,CAAqBD,KAArB,CAAL,EAAkC;MAChC,oBAAO;QAAK,SAAS,EAAEnB,UAAU,CAACK,SAAD;MAA1B,GAAwCc,KAAxC,CAAP;IACD,CAH4C,CAK7C;;;IACA,oBAAOrB,KAAK,CAACuB,YAAN,CAAmBF,KAAnB,EAA0B;MAC/Bd,SAAS,EAAEL,UAAU,CAACmB,KAAK,CAAChB,KAAN,CAAYE,SAAb,EAAwB;QAC3C,cAAcI;MAD6B,CAAxB;IADU,CAA1B,CAAP;EAKD,CAXA,CAVH,EAsBGF,QAAQ,KAAKe,SAAb,iBACC;IAAO,SAAS,EAAC;EAAjB,GAAyCf,QAAzC,CAvBJ,EAyBGE,eAAe,KAAKa,SAApB,IAAiCZ,mBAAjC,iBACC;IAAG,SAAS,EAAC;EAAb,GAAiDD,eAAjD,CA1BJ,CADF;AA+BD;AAED,eAAeP,kBAAf"}
1
+ {"version":3,"file":"ValidateLabelInput.js","names":["React","useRef","classNames","shortid","ValidateLabelInput","props","children","className","labelText","hintText","isModified","validationError","showValidationError","dataTestId","id","idProp","current","modified","Children","toArray","map","child","isValidElement","cloneElement","undefined"],"sources":["../src/ValidateLabelInput.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport shortid from 'shortid';\nimport './ValidateLabelInput.scss';\n\nexport type ValidateLabelInputProps = {\n /** Element to add label to */\n children: React.ReactNode;\n\n /** Any classnames to add */\n className?: string | string[];\n\n /** Text for this validation label */\n labelText?: string;\n\n /** Small hint text next to the main label */\n hintText?: string;\n\n /** Show a modified state. Defaults to false. */\n isModified?: boolean;\n\n /** Validation error that has occurred */\n validationError?: string;\n\n /** Show the validation error if it exists. Default to true. */\n showValidationError?: boolean;\n\n /** ID to use. Auto-generates if not provided */\n id?: string;\n\n /** data-testid to apply to the label */\n 'data-testid'?: string;\n};\n\n/**\n * Takes a child and add a label and validaton error\n */\nexport function ValidateLabelInput(\n props: ValidateLabelInputProps\n): React.ReactElement {\n const {\n children,\n className,\n labelText,\n hintText,\n isModified,\n validationError,\n showValidationError = true,\n 'data-testid': dataTestId,\n id: idProp,\n } = props;\n\n const { current: id } = useRef(idProp ?? shortid());\n\n return (\n <>\n <label\n className={classNames('validate-label', className, {\n modified: isModified,\n })}\n htmlFor={id}\n data-testid={dataTestId}\n >\n {labelText}\n </label>\n {React.Children.toArray(children).map(child => {\n if (!React.isValidElement(child)) {\n // eslint-disable-next-line react/jsx-key\n return <div className={classNames(className)}>{child}</div>;\n }\n\n // toArray strips null children\n return React.cloneElement(child, {\n className: classNames(child.props.className, {\n 'is-invalid': validationError,\n }),\n });\n })}\n {hintText !== undefined && (\n <small className=\"form-text text-muted\">{hintText}</small>\n )}\n {validationError !== undefined && showValidationError && (\n <p className=\"validate-label-error text-danger\">{validationError}</p>\n )}\n </>\n );\n}\n\nexport default ValidateLabelInput;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,SAAS;AAAC;AAgC9B;AACA;AACA;AACA,OAAO,SAASC,kBAAkB,CAChCC,KAA8B,EACV;EACpB,IAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACVC,eAAe;IACfC,mBAAmB,GAAG,IAAI;IAC1B,aAAa,EAAEC,UAAU;IACzBC,EAAE,EAAEC;EACN,CAAC,GAAGV,KAAK;EAET,IAAM;IAAEW,OAAO,EAAEF;EAAG,CAAC,GAAGb,MAAM,CAACc,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,OAAO,EAAE,CAAC;EAEnD,oBACE,uDACE;IACE,SAAS,EAAED,UAAU,CAAC,gBAAgB,EAAEK,SAAS,EAAE;MACjDU,QAAQ,EAAEP;IACZ,CAAC,CAAE;IACH,OAAO,EAAEI,EAAG;IACZ,eAAaD;EAAW,GAEvBL,SAAS,CACJ,EACPR,KAAK,CAACkB,QAAQ,CAACC,OAAO,CAACb,QAAQ,CAAC,CAACc,GAAG,CAACC,KAAK,IAAI;IAC7C,IAAI,eAACrB,KAAK,CAACsB,cAAc,CAACD,KAAK,CAAC,EAAE;MAChC;MACA,oBAAO;QAAK,SAAS,EAAEnB,UAAU,CAACK,SAAS;MAAE,GAAEc,KAAK,CAAO;IAC7D;;IAEA;IACA,oBAAOrB,KAAK,CAACuB,YAAY,CAACF,KAAK,EAAE;MAC/Bd,SAAS,EAAEL,UAAU,CAACmB,KAAK,CAAChB,KAAK,CAACE,SAAS,EAAE;QAC3C,YAAY,EAAEI;MAChB,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,CAAC,EACDF,QAAQ,KAAKe,SAAS,iBACrB;IAAO,SAAS,EAAC;EAAsB,GAAEf,QAAQ,CAClD,EACAE,eAAe,KAAKa,SAAS,IAAIZ,mBAAmB,iBACnD;IAAG,SAAS,EAAC;EAAkC,GAAED,eAAe,CACjE,CACA;AAEP;AAEA,eAAeP,kBAAkB"}