@vuu-ui/vuu-ui-controls 4.0.0-alpha.21 → 4.0.0-alpha.22
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.
- package/package.json +11 -10
- package/src/hover-overlay/HoverOverlay.css.js +8 -0
- package/src/hover-overlay/HoverOverlay.js +87 -38
- package/src/item-picker/useItemPicker.js +5 -1
- package/types/hover-overlay/HoverOverlay.d.ts +7 -1
- package/types/index.d.ts +1 -1
- package/types/modal-provider/ModalProvider.d.ts +0 -13
- package/types/src/calendar/Calendar.d.ts +0 -13
- package/types/src/calendar/index.d.ts +0 -4
- package/types/src/calendar/internal/CalendarCarousel.d.ts +0 -3
- package/types/src/calendar/internal/CalendarContext.d.ts +0 -8
- package/types/src/calendar/internal/CalendarDay.d.ts +0 -14
- package/types/src/calendar/internal/CalendarMonth.d.ts +0 -10
- package/types/src/calendar/internal/CalendarNavigation.d.ts +0 -16
- package/types/src/calendar/internal/CalendarWeekHeader.d.ts +0 -3
- package/types/src/calendar/internal/useFocusManagement.d.ts +0 -9
- package/types/src/calendar/internal/utils.d.ts +0 -15
- package/types/src/calendar/useCalendar.d.ts +0 -54
- package/types/src/calendar/useCalendarDay.d.ts +0 -22
- package/types/src/calendar/useSelection.d.ts +0 -78
- package/types/src/column-picker/ColumnPicker.d.ts +0 -7
- package/types/src/column-picker/ColumnSearch.d.ts +0 -12
- package/types/src/column-picker/index.d.ts +0 -2
- package/types/src/column-picker/moving-window.d.ts +0 -14
- package/types/src/common-hooks/index.d.ts +0 -3
- package/types/src/common-hooks/selectionTypes.d.ts +0 -70
- package/types/src/common-hooks/use-resize-observer.d.ts +0 -16
- package/types/src/common-hooks/useControlled.d.ts +0 -24
- package/types/src/context-panel-provider/ContextPanelProvider.d.ts +0 -17
- package/types/src/cycle-state-button/CycleStateButton.d.ts +0 -11
- package/types/src/cycle-state-button/index.d.ts +0 -1
- package/types/src/date-input/DateInput.d.ts +0 -60
- package/types/src/date-input/index.d.ts +0 -1
- package/types/src/date-picker/DatePicker.d.ts +0 -66
- package/types/src/date-picker/DatePickerContext.d.ts +0 -19
- package/types/src/date-picker/DatePickerPanel.d.ts +0 -10
- package/types/src/date-picker/index.d.ts +0 -1
- package/types/src/drag-drop/DragDropProvider.d.ts +0 -38
- package/types/src/drag-drop/DragDropState.d.ts +0 -15
- package/types/src/drag-drop/Draggable.d.ts +0 -13
- package/types/src/drag-drop/DropIndicator.d.ts +0 -5
- package/types/src/drag-drop/dragDropTypes.d.ts +0 -100
- package/types/src/drag-drop/drop-target-utils.d.ts +0 -82
- package/types/src/drag-drop/index.d.ts +0 -6
- package/types/src/drag-drop/useAutoScroll.d.ts +0 -11
- package/types/src/drag-drop/useDragDisplacers.d.ts +0 -17
- package/types/src/drag-drop/useDragDrop.d.ts +0 -2
- package/types/src/drag-drop/useDragDropCopy.d.ts +0 -6
- package/types/src/drag-drop/useDragDropIndicator.d.ts +0 -2
- package/types/src/drag-drop/useDragDropNaturalMovement.d.ts +0 -2
- package/types/src/drag-drop/useDropIndicator.d.ts +0 -8
- package/types/src/drag-drop/useGlobalDragDrop.d.ts +0 -11
- package/types/src/drag-drop/useTransition.d.ts +0 -3
- package/types/src/editable/index.d.ts +0 -1
- package/types/src/editable/useEditableText.d.ts +0 -21
- package/types/src/editable-label/EditableLabel.d.ts +0 -19
- package/types/src/editable-label/index.d.ts +0 -1
- package/types/src/expando-input/ExpandoInput.d.ts +0 -6
- package/types/src/expando-input/index.d.ts +0 -1
- package/types/src/highlighter/Highlighter.d.ts +0 -6
- package/types/src/highlighter/index.d.ts +0 -1
- package/types/src/hover-overlay/HoverOverlay.d.ts +0 -8
- package/types/src/icon-button/Icon.d.ts +0 -6
- package/types/src/icon-button/IconButton.d.ts +0 -6
- package/types/src/icon-button/ToggleIconButton.d.ts +0 -5
- package/types/src/icon-button/index.d.ts +0 -3
- package/types/src/index.d.ts +0 -33
- package/types/src/instrument-picker/SearchCell.d.ts +0 -2
- package/types/src/instrument-picker/TablePicker.d.ts +0 -11
- package/types/src/instrument-picker/index.d.ts +0 -1
- package/types/src/instrument-picker/moving-window.d.ts +0 -14
- package/types/src/instrument-picker/useDataSource.d.ts +0 -6
- package/types/src/instrument-picker/useTablePicker.d.ts +0 -47
- package/types/src/item-picker/ItemPicker.d.ts +0 -14
- package/types/src/item-picker/useItemPicker.d.ts +0 -35
- package/types/src/measured-container/MeasuredContainer.d.ts +0 -16
- package/types/src/measured-container/index.d.ts +0 -2
- package/types/src/measured-container/useMeasuredContainer.d.ts +0 -23
- package/types/src/modal-provider/ModalProvider.d.ts +0 -13
- package/types/src/overflow-container/OverflowContainer.d.ts +0 -15
- package/types/src/overflow-container/index.d.ts +0 -2
- package/types/src/overflow-container/overflow-utils.d.ts +0 -48
- package/types/src/overflow-container/useOverflowContainer.d.ts +0 -19
- package/types/src/price-ticker/PriceTicker.d.ts +0 -7
- package/types/src/price-ticker/index.d.ts +0 -1
- package/types/src/prompt/Prompt.d.ts +0 -53
- package/types/src/sortable-list/SortableList.d.ts +0 -8
- package/types/src/split-button/SplitButton.d.ts +0 -11
- package/types/src/split-button/SplitStateButton.d.ts +0 -5
- package/types/src/split-button/index.d.ts +0 -2
- package/types/src/split-button/useSplitButton.d.ts +0 -311
- package/types/src/table-search/SearchCell.d.ts +0 -2
- package/types/src/table-search/TableSearch.d.ts +0 -9
- package/types/src/table-search/index.d.ts +0 -1
- package/types/src/table-search/moving-window.d.ts +0 -14
- package/types/src/table-search/useTableSearch.d.ts +0 -15
- package/types/src/tabs-next/TabBar.d.ts +0 -12
- package/types/src/tabs-next/TabListNext.d.ts +0 -12
- package/types/src/tabs-next/TabNext.d.ts +0 -12
- package/types/src/tabs-next/TabNextAction.d.ts +0 -5
- package/types/src/tabs-next/TabNextContext.d.ts +0 -12
- package/types/src/tabs-next/TabNextPanel.d.ts +0 -8
- package/types/src/tabs-next/TabNextTrigger.d.ts +0 -5
- package/types/src/tabs-next/TabOverflowList.d.ts +0 -11
- package/types/src/tabs-next/TabsNext.d.ts +0 -17
- package/types/src/tabs-next/TabsNextContext.d.ts +0 -21
- package/types/src/tabs-next/hooks/useCollection.d.ts +0 -18
- package/types/src/tabs-next/hooks/useFocusOutside.d.ts +0 -2
- package/types/src/tabs-next/hooks/useOverflow.d.ts +0 -11
- package/types/src/tabs-next/index.d.ts +0 -7
- package/types/src/tabstrip/Tab.d.ts +0 -27
- package/types/src/tabstrip/TabMenu.d.ts +0 -23
- package/types/src/tabstrip/TabMenuOptions.d.ts +0 -10
- package/types/src/tabstrip/TabsTypes.d.ts +0 -127
- package/types/src/tabstrip/Tabstrip.d.ts +0 -3
- package/types/src/tabstrip/index.d.ts +0 -5
- package/types/src/tabstrip/tabstrip-dom-utils.d.ts +0 -2
- package/types/src/tabstrip/useAnimatedSelectionThumb.d.ts +0 -7
- package/types/src/tabstrip/useKeyboardNavigation.d.ts +0 -29
- package/types/src/tabstrip/useSelection.d.ts +0 -13
- package/types/src/tabstrip/useTabstrip.d.ts +0 -55
- package/types/src/time-input/MaskedInput.d.ts +0 -49
- package/types/src/time-input/TimeInput.d.ts +0 -5
- package/types/src/time-input/useTimeInput.d.ts +0 -21
- package/types/src/toolbar/Toolbar.d.ts +0 -20
- package/types/src/toolbar/index.d.ts +0 -1
- package/types/src/toolbar/toolbar-dom-utils.d.ts +0 -3
- package/types/src/toolbar/useKeyboardNavigation.d.ts +0 -32
- package/types/src/toolbar/useSelection.d.ts +0 -22
- package/types/src/toolbar/useToolbar.d.ts +0 -28
- package/types/src/utils/deprecated-types.d.ts +0 -2
- package/types/src/utils/escapeRegExp.d.ts +0 -1
- package/types/src/utils/forwardCallbackProps.d.ts +0 -3
- package/types/src/utils/index.d.ts +0 -5
- package/types/src/utils/isOverflowElement.d.ts +0 -1
- package/types/src/utils/isPlainObject.d.ts +0 -1
- package/types/src/vuu-date-picker/VuuDatePicker.d.ts +0 -7
- package/types/src/vuu-date-picker/index.d.ts +0 -1
- package/types/src/vuu-input/VuuInput.d.ts +0 -18
- package/types/src/vuu-input/index.d.ts +0 -1
- package/types/src/vuu-time-picker/TimeRangePicker.d.ts +0 -0
- package/types/src/vuu-time-picker/VuuTimePicker.d.ts +0 -7
- package/types/src/vuu-typeahead-input/VuuTypeaheadInput.d.ts +0 -6
- package/types/src/vuu-typeahead-input/index.d.ts +0 -1
- package/types/src/vuu-typeahead-input/useVuuTypeaheadInput.d.ts +0 -49
package/package.json
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "4.0.0-alpha.
|
|
2
|
+
"version": "4.0.0-alpha.22",
|
|
3
3
|
"description": "VUU UI Controls",
|
|
4
4
|
"main": "./src/index.js",
|
|
5
5
|
"author": "heswell",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
|
-
"type": "module",
|
|
8
7
|
"scripts": {
|
|
9
8
|
"build:dev": "node ../../scripts/run-build.mjs",
|
|
10
9
|
"build": "node ../../scripts/run-build-rslib.ts",
|
|
11
10
|
"type-defs": "node ../../scripts/build-type-defs.mjs"
|
|
12
11
|
},
|
|
13
12
|
"devDependencies": {
|
|
14
|
-
"@vuu-ui/vuu-data-types": "4.0.0-alpha.
|
|
15
|
-
"@vuu-ui/vuu-protocol-types": "4.0.0-alpha.
|
|
16
|
-
"@vuu-ui/vuu-table-types": "4.0.0-alpha.
|
|
13
|
+
"@vuu-ui/vuu-data-types": "4.0.0-alpha.22",
|
|
14
|
+
"@vuu-ui/vuu-protocol-types": "4.0.0-alpha.22",
|
|
15
|
+
"@vuu-ui/vuu-table-types": "4.0.0-alpha.22"
|
|
17
16
|
},
|
|
18
17
|
"dependencies": {
|
|
19
|
-
"@vuu-ui/vuu-context-menu": "4.0.0-alpha.
|
|
20
|
-
"@vuu-ui/vuu-data-react": "4.0.0-alpha.
|
|
21
|
-
"@vuu-ui/vuu-
|
|
22
|
-
"@vuu-ui/vuu-
|
|
23
|
-
"@vuu-ui/vuu-
|
|
18
|
+
"@vuu-ui/vuu-context-menu": "4.0.0-alpha.22",
|
|
19
|
+
"@vuu-ui/vuu-data-react": "4.0.0-alpha.22",
|
|
20
|
+
"@vuu-ui/vuu-layout": "4.0.0-alpha.22",
|
|
21
|
+
"@vuu-ui/vuu-popups": "4.0.0-alpha.22",
|
|
22
|
+
"@vuu-ui/vuu-table": "4.0.0-alpha.22",
|
|
23
|
+
"@vuu-ui/vuu-utils": "4.0.0-alpha.22",
|
|
24
24
|
"@salt-ds/core": "1.72.0",
|
|
25
25
|
"@salt-ds/icons": "1.18.3",
|
|
26
26
|
"@salt-ds/styles": "0.4.1",
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"react-dom": "^19.2.3"
|
|
36
36
|
},
|
|
37
37
|
"sideEffects": false,
|
|
38
|
+
"type": "module",
|
|
38
39
|
"files": [
|
|
39
40
|
"README.md",
|
|
40
41
|
"src",
|
|
@@ -1,11 +1,38 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Overlay, OverlayPanel, OverlayPanelContent, OverlayTrigger } from "@salt-ds/core";
|
|
3
|
+
import { useComponentCssInjection } from "@salt-ds/styles";
|
|
4
|
+
import { useWindow } from "@salt-ds/window";
|
|
5
|
+
import { containsPoint } from "@vuu-ui/vuu-utils";
|
|
3
6
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
4
|
-
|
|
7
|
+
import HoverOverlay from "./HoverOverlay.css";
|
|
8
|
+
const classBase = "vuuHoverOverlay";
|
|
9
|
+
const OPEN_DELAY = 400;
|
|
10
|
+
const CLOSE_DELAY = 300;
|
|
11
|
+
const HoverOverlay_HoverOverlay = ({ children, open: openProp = false, onOpenChange, openOn = "hover", placement = "right", trigger })=>{
|
|
12
|
+
const targetWindow = useWindow();
|
|
13
|
+
useComponentCssInjection({
|
|
14
|
+
testId: "vuu-hover-overlay",
|
|
15
|
+
css: HoverOverlay,
|
|
16
|
+
window: targetWindow
|
|
17
|
+
});
|
|
5
18
|
const [open, _setOpen] = useState(openProp);
|
|
6
19
|
const isOpen = useRef(false);
|
|
7
20
|
const showHandle = useRef(void 0);
|
|
8
21
|
const hideHandle = useRef(void 0);
|
|
22
|
+
const triggerRef = useRef(null);
|
|
23
|
+
const panelRef = useRef(null);
|
|
24
|
+
const clearShowTimer = useCallback(()=>{
|
|
25
|
+
if (showHandle.current) {
|
|
26
|
+
clearTimeout(showHandle.current);
|
|
27
|
+
showHandle.current = void 0;
|
|
28
|
+
}
|
|
29
|
+
}, []);
|
|
30
|
+
const clearHideTimer = useCallback(()=>{
|
|
31
|
+
if (hideHandle.current) {
|
|
32
|
+
clearTimeout(hideHandle.current);
|
|
33
|
+
hideHandle.current = void 0;
|
|
34
|
+
}
|
|
35
|
+
}, []);
|
|
9
36
|
const setOpen = useCallback((open)=>{
|
|
10
37
|
if (open !== isOpen.current) {
|
|
11
38
|
isOpen.current = open;
|
|
@@ -15,78 +42,100 @@ const HoverOverlay = ({ children, open: openProp = false, onOpenChange, placemen
|
|
|
15
42
|
}, [
|
|
16
43
|
onOpenChange
|
|
17
44
|
]);
|
|
45
|
+
const startHideTimer = useCallback(()=>{
|
|
46
|
+
if (void 0 === hideHandle.current) hideHandle.current = setTimeout(()=>{
|
|
47
|
+
hideHandle.current = void 0;
|
|
48
|
+
setOpen(false);
|
|
49
|
+
}, CLOSE_DELAY);
|
|
50
|
+
}, [
|
|
51
|
+
setOpen
|
|
52
|
+
]);
|
|
18
53
|
useEffect(()=>{
|
|
19
54
|
if (openProp !== isOpen.current) setOpen(openProp);
|
|
20
55
|
}, [
|
|
21
56
|
openProp,
|
|
22
57
|
setOpen
|
|
23
58
|
]);
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
59
|
+
useEffect(()=>()=>{
|
|
60
|
+
clearShowTimer();
|
|
61
|
+
clearHideTimer();
|
|
62
|
+
}, [
|
|
63
|
+
clearHideTimer,
|
|
64
|
+
clearShowTimer
|
|
65
|
+
]);
|
|
66
|
+
useEffect(()=>{
|
|
67
|
+
if (open && "hover" === openOn) {
|
|
68
|
+
const doc = triggerRef.current?.ownerDocument ?? document;
|
|
69
|
+
const handlePointerMove = ({ clientX, clientY })=>{
|
|
70
|
+
if (containsPoint(triggerRef.current, clientX, clientY) || containsPoint(panelRef.current, clientX, clientY)) clearHideTimer();
|
|
71
|
+
else startHideTimer();
|
|
72
|
+
};
|
|
73
|
+
doc.addEventListener("pointermove", handlePointerMove);
|
|
74
|
+
doc.documentElement.addEventListener("mouseleave", startHideTimer);
|
|
75
|
+
return ()=>{
|
|
76
|
+
doc.removeEventListener("pointermove", handlePointerMove);
|
|
77
|
+
doc.documentElement.removeEventListener("mouseleave", startHideTimer);
|
|
78
|
+
clearHideTimer();
|
|
79
|
+
};
|
|
28
80
|
}
|
|
29
|
-
}, []);
|
|
30
|
-
const handleOverlayMouseLeave = useCallback(()=>{
|
|
31
|
-
hideHandle.current = setTimeout(()=>{
|
|
32
|
-
setOpen(false);
|
|
33
|
-
hideHandle.current = void 0;
|
|
34
|
-
}, 300);
|
|
35
81
|
}, [
|
|
36
|
-
|
|
82
|
+
clearHideTimer,
|
|
83
|
+
open,
|
|
84
|
+
openOn,
|
|
85
|
+
startHideTimer
|
|
37
86
|
]);
|
|
38
87
|
const handleMouseEnter = useCallback(()=>{
|
|
39
|
-
showHandle.current = setTimeout(()=>{
|
|
40
|
-
setOpen(true);
|
|
88
|
+
if (!isOpen.current && void 0 === showHandle.current) showHandle.current = setTimeout(()=>{
|
|
41
89
|
showHandle.current = void 0;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
clearTimeout(hideHandle.current);
|
|
45
|
-
hideHandle.current = void 0;
|
|
46
|
-
}
|
|
90
|
+
setOpen(true);
|
|
91
|
+
}, OPEN_DELAY);
|
|
47
92
|
}, [
|
|
48
93
|
setOpen
|
|
49
94
|
]);
|
|
50
95
|
const handleMouseLeave = useCallback(()=>{
|
|
51
|
-
|
|
52
|
-
clearTimeout(showHandle.current);
|
|
53
|
-
showHandle.current = void 0;
|
|
54
|
-
} else if (isOpen.current) hideHandle.current = setTimeout(()=>{
|
|
55
|
-
setOpen(false);
|
|
56
|
-
hideHandle.current = void 0;
|
|
57
|
-
}, 300);
|
|
96
|
+
clearShowTimer();
|
|
58
97
|
}, [
|
|
59
|
-
|
|
98
|
+
clearShowTimer
|
|
60
99
|
]);
|
|
61
100
|
const handleClick = useCallback(()=>{
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
101
|
+
clearShowTimer();
|
|
102
|
+
}, [
|
|
103
|
+
clearShowTimer
|
|
104
|
+
]);
|
|
105
|
+
const handleOpenChange = useCallback((open)=>{
|
|
106
|
+
clearShowTimer();
|
|
107
|
+
clearHideTimer();
|
|
108
|
+
setOpen(open);
|
|
66
109
|
}, [
|
|
110
|
+
clearHideTimer,
|
|
111
|
+
clearShowTimer,
|
|
67
112
|
setOpen
|
|
68
113
|
]);
|
|
114
|
+
const triggerProps = "hover" === openOn ? {
|
|
115
|
+
onClick: handleClick,
|
|
116
|
+
onMouseEnter: handleMouseEnter,
|
|
117
|
+
onMouseLeave: handleMouseLeave
|
|
118
|
+
} : void 0;
|
|
69
119
|
return /*#__PURE__*/ jsxs(Overlay, {
|
|
70
120
|
placement: placement,
|
|
71
|
-
onOpenChange:
|
|
121
|
+
onOpenChange: handleOpenChange,
|
|
72
122
|
open: open,
|
|
73
123
|
children: [
|
|
74
124
|
/*#__PURE__*/ jsx(OverlayTrigger, {
|
|
75
125
|
children: /*#__PURE__*/ jsx("div", {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
onMouseLeave: handleMouseLeave,
|
|
126
|
+
...triggerProps,
|
|
127
|
+
ref: triggerRef,
|
|
79
128
|
children: trigger
|
|
80
129
|
})
|
|
81
130
|
}),
|
|
82
131
|
/*#__PURE__*/ jsx(OverlayPanel, {
|
|
132
|
+
className: `${classBase}-panel`,
|
|
133
|
+
ref: panelRef,
|
|
83
134
|
children: /*#__PURE__*/ jsx(OverlayPanelContent, {
|
|
84
|
-
onMouseEnter: handleOverlayMouseEnter,
|
|
85
|
-
onMouseLeave: handleOverlayMouseLeave,
|
|
86
135
|
children: children
|
|
87
136
|
})
|
|
88
137
|
})
|
|
89
138
|
]
|
|
90
139
|
});
|
|
91
140
|
};
|
|
92
|
-
export { HoverOverlay };
|
|
141
|
+
export { HoverOverlay_HoverOverlay as HoverOverlay };
|
|
@@ -17,7 +17,11 @@ const itemName = (target)=>{
|
|
|
17
17
|
if (name) return name;
|
|
18
18
|
throw Error("[useItemPicker] item name could not be identified, data-name attribute not found");
|
|
19
19
|
};
|
|
20
|
-
const byItemName = (
|
|
20
|
+
const byItemName = (item1, item2)=>{
|
|
21
|
+
const n1 = item1.label ? item1.label : item1.name;
|
|
22
|
+
const n2 = item2.label ? item2.label : item2.name;
|
|
23
|
+
return n1 > n2 ? 1 : n2 > n1 ? -1 : 0;
|
|
24
|
+
};
|
|
21
25
|
const useItemPicker = ({ allItems, selectedItems, maxSelections, onSelectedItemsChange })=>{
|
|
22
26
|
if (maxSelections && selectedItems.length > maxSelections) throw Error(`[useItemPicker] max selections ${maxSelections} exceeded by selected items (that has count ${selectedItems.length})`);
|
|
23
27
|
const [searchPattern, setSearchPattern] = useState("");
|
|
@@ -3,6 +3,12 @@ import { ReactNode } from "react";
|
|
|
3
3
|
export interface HoverOverlayProps extends Pick<OverlayProps, "placement" | "onOpenChange"> {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
open?: boolean;
|
|
6
|
+
/**
|
|
7
|
+
* hover (default) opens the overlay after a short delay when pointer
|
|
8
|
+
* enters trigger and closes it when pointer leaves both trigger and
|
|
9
|
+
* overlay. click leaves open/close entirely to Salt Overlay.
|
|
10
|
+
*/
|
|
11
|
+
openOn?: "hover" | "click";
|
|
6
12
|
trigger: ReactNode;
|
|
7
13
|
}
|
|
8
|
-
export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, placement, trigger, }: HoverOverlayProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, openOn, placement, trigger, }: HoverOverlayProps) => import("react/jsx-runtime").JSX.Element;
|
package/types/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export * from "./drag-drop";
|
|
|
9
9
|
export * from "./editable";
|
|
10
10
|
export * from "./editable-label";
|
|
11
11
|
export * from "./expando-input";
|
|
12
|
-
export { HoverOverlay } from "./hover-overlay/HoverOverlay";
|
|
12
|
+
export { HoverOverlay, type HoverOverlayProps, } from "./hover-overlay/HoverOverlay";
|
|
13
13
|
export * from "./icon-button";
|
|
14
14
|
export * from "./instrument-picker";
|
|
15
15
|
export { ItemPicker, type ItemPickerProps } from "./item-picker/ItemPicker";
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ReactElement, ReactNode } from "react";
|
|
2
|
-
import { PromptProps } from "../prompt/Prompt";
|
|
3
|
-
export type ShowDialog = (dialogContent: ReactElement, title: string, dialogActionButtons?: ReactElement[], hideCloseButton?: boolean) => void;
|
|
4
|
-
export type ShowPrompt = (promptContent: ReactElement, promptProps: PromptProps) => void;
|
|
5
|
-
export declare const ModalProvider: ({ children }: {
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export declare const useModal: () => {
|
|
9
|
-
showDialog: ShowDialog;
|
|
10
|
-
closeDialog: () => void;
|
|
11
|
-
showPrompt: ShowPrompt;
|
|
12
|
-
closePrompt: () => void;
|
|
13
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type CalendarCarouselProps } from "./internal/CalendarCarousel";
|
|
2
|
-
import { type CalendarNavigationProps } from "./internal/CalendarNavigation";
|
|
3
|
-
import { type useCalendarProps } from "./useCalendar";
|
|
4
|
-
export type CalendarProps = useCalendarProps & {
|
|
5
|
-
className?: string;
|
|
6
|
-
id?: string;
|
|
7
|
-
renderDayContents?: CalendarCarouselProps["renderDayContents"];
|
|
8
|
-
hideYearDropdown?: CalendarNavigationProps["hideYearDropdown"];
|
|
9
|
-
borderedDropdown?: CalendarNavigationProps["borderedDropdown"];
|
|
10
|
-
TooltipProps?: CalendarCarouselProps["TooltipProps"];
|
|
11
|
-
hideOutOfRangeDates?: CalendarCarouselProps["hideOutOfRangeDates"];
|
|
12
|
-
};
|
|
13
|
-
export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { type CalendarMonthProps } from "./CalendarMonth";
|
|
2
|
-
export type CalendarCarouselProps = Omit<CalendarMonthProps, "date">;
|
|
3
|
-
export declare const CalendarCarousel: import("react").ForwardRefExoticComponent<Omit<CalendarCarouselProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { useCalendar } from "../useCalendar";
|
|
2
|
-
interface CalendarState {
|
|
3
|
-
state: ReturnType<typeof useCalendar>["state"];
|
|
4
|
-
helpers: ReturnType<typeof useCalendar>["helpers"];
|
|
5
|
-
}
|
|
6
|
-
declare const CalendarContext: import("react").Context<CalendarState | null>;
|
|
7
|
-
declare function useCalendarContext(): CalendarState;
|
|
8
|
-
export { CalendarContext, useCalendarContext };
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { DateValue } from "@internationalized/date";
|
|
2
|
-
import { type TooltipProps } from "@salt-ds/core";
|
|
3
|
-
import { type ComponentPropsWithRef, type ReactElement } from "react";
|
|
4
|
-
import { type DayStatus } from "../useCalendarDay";
|
|
5
|
-
export type DateFormatter = (day: Date) => string | undefined;
|
|
6
|
-
export interface CalendarDayProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
|
|
7
|
-
day: DateValue;
|
|
8
|
-
formatDate?: DateFormatter;
|
|
9
|
-
renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;
|
|
10
|
-
status?: DayStatus;
|
|
11
|
-
month: DateValue;
|
|
12
|
-
TooltipProps?: Partial<TooltipProps>;
|
|
13
|
-
}
|
|
14
|
-
export declare const CalendarDay: import("react").ForwardRefExoticComponent<Omit<CalendarDayProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { DateValue } from "@internationalized/date";
|
|
2
|
-
import { type ComponentPropsWithRef } from "react";
|
|
3
|
-
import { type CalendarDayProps } from "./CalendarDay";
|
|
4
|
-
export interface CalendarMonthProps extends ComponentPropsWithRef<"div"> {
|
|
5
|
-
date: DateValue;
|
|
6
|
-
hideOutOfRangeDates?: boolean;
|
|
7
|
-
renderDayContents?: CalendarDayProps["renderDayContents"];
|
|
8
|
-
TooltipProps?: CalendarDayProps["TooltipProps"];
|
|
9
|
-
}
|
|
10
|
-
export declare const CalendarMonth: import("react").ForwardRefExoticComponent<Omit<CalendarMonthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { type ButtonProps, type DropdownProps } from "@salt-ds/core";
|
|
2
|
-
import { type ComponentPropsWithRef } from "react";
|
|
3
|
-
import { type DateValue } from "@internationalized/date";
|
|
4
|
-
type dateDropdownProps = DropdownProps<DateValue>;
|
|
5
|
-
export interface CalendarNavigationProps extends ComponentPropsWithRef<"div"> {
|
|
6
|
-
MonthDropdownProps?: dateDropdownProps;
|
|
7
|
-
YearDropdownProps?: dateDropdownProps;
|
|
8
|
-
onMonthSelect?: dateDropdownProps["onChange"];
|
|
9
|
-
onYearSelect?: dateDropdownProps["onChange"];
|
|
10
|
-
borderedDropdown?: dateDropdownProps["bordered"];
|
|
11
|
-
onNavigateNext?: ButtonProps["onClick"];
|
|
12
|
-
onNavigatePrevious?: ButtonProps["onClick"];
|
|
13
|
-
hideYearDropdown?: boolean;
|
|
14
|
-
}
|
|
15
|
-
export declare const CalendarNavigation: import("react").ForwardRefExoticComponent<Omit<CalendarNavigationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
|
-
export {};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { type ComponentPropsWithRef } from "react";
|
|
2
|
-
export type CalendarWeekHeaderProps = ComponentPropsWithRef<"div">;
|
|
3
|
-
export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { type DateValue } from "@internationalized/date";
|
|
2
|
-
import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "react";
|
|
3
|
-
export declare function useFocusManagement({ date }: {
|
|
4
|
-
date: DateValue;
|
|
5
|
-
}): {
|
|
6
|
-
handleClick: MouseEventHandler<HTMLButtonElement>;
|
|
7
|
-
handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
|
|
8
|
-
handleFocus: FocusEventHandler<HTMLButtonElement>;
|
|
9
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { DateFormatter, type DateValue } from "@internationalized/date";
|
|
2
|
-
export declare function getCurrentLocale(): string;
|
|
3
|
-
export declare function getDateFormatter(options?: Intl.DateTimeFormatOptions): DateFormatter;
|
|
4
|
-
export declare function formatDate(date: DateValue, options?: Intl.DateTimeFormatOptions): string;
|
|
5
|
-
export declare function getCalender(): import("@internationalized/date").Calendar;
|
|
6
|
-
type WeekdayFormat = Intl.DateTimeFormatOptions["weekday"];
|
|
7
|
-
export declare function daysForLocale(weekday?: WeekdayFormat): string[];
|
|
8
|
-
export declare function monthsForLocale(currentYear: DateValue): (import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime)[];
|
|
9
|
-
export declare function generateVisibleDays(currentMonth: DateValue): {
|
|
10
|
-
date: DateValue;
|
|
11
|
-
dateOfMonth: number;
|
|
12
|
-
isCurrentMonth: boolean;
|
|
13
|
-
}[];
|
|
14
|
-
export declare function monthDiff(a: DateValue, b: DateValue): number;
|
|
15
|
-
export {};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { type DateValue } from "@internationalized/date";
|
|
2
|
-
import { type SyntheticEvent } from "react";
|
|
3
|
-
import { type UseMultiSelectionCalendarProps, type UseOffsetSelectionCalendarProps, type UseRangeSelectionCalendarProps, type UseSingleSelectionCalendarProps } from "./useSelection";
|
|
4
|
-
interface BaseUseCalendarProps {
|
|
5
|
-
defaultVisibleMonth?: DateValue;
|
|
6
|
-
onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: DateValue) => void;
|
|
7
|
-
isDayUnselectable?: (date: DateValue) => string | false | undefined;
|
|
8
|
-
isDayHighlighted?: (date: DateValue) => string | false | undefined;
|
|
9
|
-
isDayDisabled?: (date: DateValue) => boolean;
|
|
10
|
-
visibleMonth?: DateValue;
|
|
11
|
-
hideOutOfRangeDates?: boolean;
|
|
12
|
-
hideYearDropdown?: boolean;
|
|
13
|
-
minDate?: DateValue;
|
|
14
|
-
maxDate?: DateValue;
|
|
15
|
-
}
|
|
16
|
-
export type useCalendarProps = (Omit<UseSingleSelectionCalendarProps, "isDaySelectable"> | Omit<UseMultiSelectionCalendarProps, "isDaySelectable"> | Omit<UseRangeSelectionCalendarProps, "isDaySelectable"> | Omit<UseOffsetSelectionCalendarProps, "isDaySelectable">) & BaseUseCalendarProps;
|
|
17
|
-
export declare function useCalendar(props: useCalendarProps): {
|
|
18
|
-
state: {
|
|
19
|
-
selectedDate: DateValue[] | {
|
|
20
|
-
startDate?: DateValue;
|
|
21
|
-
endDate?: DateValue;
|
|
22
|
-
} | import("./useSelection").RangeSelectionValueType | DateValue | null | undefined;
|
|
23
|
-
hoveredDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
|
|
24
|
-
visibleMonth: DateValue;
|
|
25
|
-
focusedDate: DateValue;
|
|
26
|
-
minDate: DateValue | undefined;
|
|
27
|
-
maxDate: DateValue | undefined;
|
|
28
|
-
selectionVariant: "default" | "multiselect" | "offset" | "range";
|
|
29
|
-
hideOutOfRangeDates: boolean | undefined;
|
|
30
|
-
calendarFocused: boolean;
|
|
31
|
-
};
|
|
32
|
-
helpers: {
|
|
33
|
-
setSelectedDate: (event: SyntheticEvent<HTMLButtonElement>, newSelectedDate: DateValue) => void;
|
|
34
|
-
isSelected: (date: DateValue) => boolean;
|
|
35
|
-
setHoveredDate: (event: SyntheticEvent, date: DateValue | null) => void;
|
|
36
|
-
isHovered: (date: DateValue) => boolean;
|
|
37
|
-
isSelectedSpan: (date: DateValue) => boolean;
|
|
38
|
-
isHoveredSpan: (date: DateValue) => boolean;
|
|
39
|
-
isSelectedStart: (date: DateValue) => boolean;
|
|
40
|
-
isSelectedEnd: (date: DateValue) => boolean;
|
|
41
|
-
isHoveredOffset: (date: DateValue) => boolean;
|
|
42
|
-
setVisibleMonth: (event: SyntheticEvent, newVisibleMonth: DateValue) => void;
|
|
43
|
-
setFocusedDate: (event: SyntheticEvent, date: DateValue) => void;
|
|
44
|
-
setCalendarFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
45
|
-
isDayUnselectable: (date: DateValue) => string | false | undefined;
|
|
46
|
-
isDayHighlighted: (date: DateValue) => string | false | undefined;
|
|
47
|
-
isDayDisabled: (date: DateValue) => boolean;
|
|
48
|
-
isDayVisible: (date: DateValue) => boolean;
|
|
49
|
-
isOutsideAllowedDates: (date: DateValue) => boolean;
|
|
50
|
-
isOutsideAllowedMonths: (date: DateValue) => boolean;
|
|
51
|
-
isOutsideAllowedYears: (date: DateValue) => boolean;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
export {};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { type DateValue } from "@internationalized/date";
|
|
2
|
-
import { type ComponentPropsWithoutRef, type RefObject } from "react";
|
|
3
|
-
export interface DayStatus {
|
|
4
|
-
outOfRange?: boolean;
|
|
5
|
-
selected?: boolean;
|
|
6
|
-
today?: boolean;
|
|
7
|
-
unselectable?: string | false;
|
|
8
|
-
highlighted?: string | false;
|
|
9
|
-
focused?: boolean;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
hidden?: boolean;
|
|
12
|
-
}
|
|
13
|
-
export interface useCalendarDayProps {
|
|
14
|
-
date: DateValue;
|
|
15
|
-
month: DateValue;
|
|
16
|
-
}
|
|
17
|
-
export declare function useCalendarDay({ date, month }: useCalendarDayProps, ref: RefObject<HTMLElement | null>): {
|
|
18
|
-
status: DayStatus;
|
|
19
|
-
dayProps: ComponentPropsWithoutRef<"button">;
|
|
20
|
-
unselectableReason: string | false | undefined;
|
|
21
|
-
highlightedReason: string | false | undefined;
|
|
22
|
-
};
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { CalendarDate, type DateValue } from "@internationalized/date";
|
|
2
|
-
import type { KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from "react";
|
|
3
|
-
interface BaseUseSelectionCalendarProps<SelectionVariantType> {
|
|
4
|
-
hoveredDate?: DateValue | null;
|
|
5
|
-
selectedDate?: SelectionVariantType | null;
|
|
6
|
-
defaultSelectedDate?: SelectionVariantType;
|
|
7
|
-
onSelectedDateChange?: (event: SyntheticEvent, selectedDate: SelectionVariantType) => void;
|
|
8
|
-
isDaySelectable: (date?: DateValue) => boolean;
|
|
9
|
-
onHoveredDateChange?: (event: SyntheticEvent, hoveredDate: DateValue | null) => void;
|
|
10
|
-
}
|
|
11
|
-
export type SingleSelectionValueType = DateValue;
|
|
12
|
-
type MultiSelectionValueType = DateValue[];
|
|
13
|
-
export type RangeSelectionValueType = {
|
|
14
|
-
startDate?: DateValue;
|
|
15
|
-
endDate?: DateValue;
|
|
16
|
-
};
|
|
17
|
-
type OffsetSelectionValueType = {
|
|
18
|
-
startDate?: DateValue;
|
|
19
|
-
endDate?: DateValue;
|
|
20
|
-
};
|
|
21
|
-
type AllSelectionValueType = SingleSelectionValueType | MultiSelectionValueType | RangeSelectionValueType | OffsetSelectionValueType | null;
|
|
22
|
-
export interface UseOffsetSelectionCalendarProps extends Omit<BaseUseSelectionCalendarProps<OffsetSelectionValueType>, "startDateOffset" | "endDateOffset"> {
|
|
23
|
-
selectionVariant: "offset";
|
|
24
|
-
startDateOffset?: (date: DateValue) => DateValue;
|
|
25
|
-
endDateOffset?: (date: DateValue) => DateValue;
|
|
26
|
-
}
|
|
27
|
-
export interface UseRangeSelectionCalendarProps extends BaseUseSelectionCalendarProps<RangeSelectionValueType> {
|
|
28
|
-
selectionVariant: "range";
|
|
29
|
-
}
|
|
30
|
-
export interface UseMultiSelectionCalendarProps extends BaseUseSelectionCalendarProps<MultiSelectionValueType> {
|
|
31
|
-
selectionVariant: "multiselect";
|
|
32
|
-
}
|
|
33
|
-
export interface UseSingleSelectionCalendarProps extends BaseUseSelectionCalendarProps<SingleSelectionValueType> {
|
|
34
|
-
selectionVariant: "default";
|
|
35
|
-
}
|
|
36
|
-
export type useSelectionCalendarProps = UseSingleSelectionCalendarProps | UseMultiSelectionCalendarProps | UseRangeSelectionCalendarProps | UseOffsetSelectionCalendarProps;
|
|
37
|
-
export declare function isRangeOrOffsetSelectionValue(selectionValue?: AllSelectionValueType): selectionValue is RangeSelectionValueType | OffsetSelectionValueType;
|
|
38
|
-
export declare function isRangeOrOffsetSelectionWithStartDate(selectionValue?: AllSelectionValueType): selectionValue is RangeSelectionValueType | OffsetSelectionValueType;
|
|
39
|
-
export declare function useSelectionCalendar(props: useSelectionCalendarProps): {
|
|
40
|
-
state: {
|
|
41
|
-
selectedDate: MultiSelectionValueType | OffsetSelectionValueType | RangeSelectionValueType | DateValue | null | undefined;
|
|
42
|
-
hoveredDate: CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
|
|
43
|
-
};
|
|
44
|
-
helpers: {
|
|
45
|
-
setSelectedDate: (event: SyntheticEvent<HTMLButtonElement>, newSelectedDate: DateValue) => void;
|
|
46
|
-
isSelected: (date: DateValue) => boolean;
|
|
47
|
-
setHoveredDate: (event: SyntheticEvent, date: DateValue | null) => void;
|
|
48
|
-
isHovered: (date: DateValue) => boolean;
|
|
49
|
-
isSelectedSpan: (date: DateValue) => boolean;
|
|
50
|
-
isHoveredSpan: (date: DateValue) => boolean;
|
|
51
|
-
isSelectedStart: (date: DateValue) => boolean;
|
|
52
|
-
isSelectedEnd: (date: DateValue) => boolean;
|
|
53
|
-
isHoveredOffset: (date: DateValue) => boolean;
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
export declare function useSelectionDay({ date }: {
|
|
57
|
-
date: DateValue;
|
|
58
|
-
}): {
|
|
59
|
-
handleClick: MouseEventHandler<HTMLButtonElement>;
|
|
60
|
-
handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
|
|
61
|
-
handleMouseOver: MouseEventHandler<HTMLButtonElement>;
|
|
62
|
-
handleMouseLeave: MouseEventHandler<HTMLButtonElement>;
|
|
63
|
-
status: {
|
|
64
|
-
selected: boolean;
|
|
65
|
-
selectedSpan: boolean;
|
|
66
|
-
hoveredSpan: boolean;
|
|
67
|
-
selectedStart: boolean;
|
|
68
|
-
selectedEnd: boolean;
|
|
69
|
-
hovered: boolean;
|
|
70
|
-
hoveredOffset: boolean;
|
|
71
|
-
};
|
|
72
|
-
dayProps: {
|
|
73
|
-
className: string;
|
|
74
|
-
"aria-pressed": string | undefined;
|
|
75
|
-
"aria-disabled": string | undefined;
|
|
76
|
-
};
|
|
77
|
-
};
|
|
78
|
-
export {};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { IconButtonProps } from "../icon-button";
|
|
2
|
-
import { ColumnSearchProps } from "./ColumnSearch";
|
|
3
|
-
export interface ColumnPickerProps extends Omit<IconButtonProps, "icon">, Pick<ColumnSearchProps, "columns" | "onSelectionChange" | "selected"> {
|
|
4
|
-
icon?: string;
|
|
5
|
-
iconSize?: number;
|
|
6
|
-
}
|
|
7
|
-
export declare const ColumnPicker: import("react").ForwardRefExoticComponent<ColumnPickerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ListBoxProps } from "@salt-ds/core";
|
|
2
|
-
import { HTMLAttributes } from "react";
|
|
3
|
-
export interface ColumnSearchProps extends HTMLAttributes<HTMLDivElement>, Pick<ListBoxProps, "onSelectionChange" | "selected"> {
|
|
4
|
-
columns: string[];
|
|
5
|
-
onReorderColumns: (columns: string[]) => void;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* @deprecated
|
|
9
|
-
*
|
|
10
|
-
* use ColumnList instead
|
|
11
|
-
*/
|
|
12
|
-
export declare const ColumnSearch: import("react").ForwardRefExoticComponent<ColumnSearchProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { DataSourceRow } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import type { VuuRange } from "@vuu-ui/vuu-protocol-types";
|
|
3
|
-
export declare class MovingWindow {
|
|
4
|
-
data: DataSourceRow[];
|
|
5
|
-
rowCount: number;
|
|
6
|
-
private range;
|
|
7
|
-
constructor({ from, to }: VuuRange);
|
|
8
|
-
setRowCount: (rowCount: number) => void;
|
|
9
|
-
add(data: DataSourceRow): void;
|
|
10
|
-
getAtIndex(index: number): DataSourceRow | undefined;
|
|
11
|
-
isWithinRange(index: number): boolean;
|
|
12
|
-
setRange({ from, to }: VuuRange): void;
|
|
13
|
-
getSelectedRows(): DataSourceRow[];
|
|
14
|
-
}
|