@rufous/ui 0.2.92 → 0.2.94
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/dist/main.cjs +432 -411
- package/dist/main.js +445 -424
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1742,21 +1742,253 @@ var TextField = forwardRef3(({
|
|
|
1742
1742
|
TextField.displayName = "TextField";
|
|
1743
1743
|
|
|
1744
1744
|
// lib/TextFields/AddressLookup.tsx
|
|
1745
|
-
import
|
|
1745
|
+
import React71, { useState as useState6, useRef as useRef5, useEffect as useEffect6 } from "react";
|
|
1746
1746
|
import Axios from "axios";
|
|
1747
1747
|
import { Country, State, City } from "country-state-city";
|
|
1748
1748
|
|
|
1749
1749
|
// lib/TextFields/Autocomplete.tsx
|
|
1750
|
+
import React70, {
|
|
1751
|
+
useState as useState5,
|
|
1752
|
+
useRef as useRef4,
|
|
1753
|
+
useEffect as useEffect5,
|
|
1754
|
+
useCallback as useCallback2
|
|
1755
|
+
} from "react";
|
|
1756
|
+
import ReactDOM3 from "react-dom";
|
|
1757
|
+
|
|
1758
|
+
// lib/Tooltip/Tooltip.tsx
|
|
1750
1759
|
import React69, {
|
|
1751
|
-
|
|
1752
|
-
useRef as useRef3,
|
|
1760
|
+
useCallback,
|
|
1753
1761
|
useEffect as useEffect4,
|
|
1754
|
-
|
|
1762
|
+
useRef as useRef3,
|
|
1763
|
+
useState as useState4
|
|
1755
1764
|
} from "react";
|
|
1756
1765
|
import ReactDOM2 from "react-dom";
|
|
1757
|
-
var
|
|
1758
|
-
|
|
1759
|
-
|
|
1766
|
+
var GAP = 8;
|
|
1767
|
+
function computePosition(anchor, tooltip, placement) {
|
|
1768
|
+
const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
|
|
1769
|
+
const { width: tW, height: tH } = tooltip;
|
|
1770
|
+
let top = 0;
|
|
1771
|
+
let left = 0;
|
|
1772
|
+
let arrowLeft;
|
|
1773
|
+
let arrowTop;
|
|
1774
|
+
switch (placement) {
|
|
1775
|
+
case "top":
|
|
1776
|
+
top = aTop - tH - GAP;
|
|
1777
|
+
left = aLeft + aW / 2 - tW / 2;
|
|
1778
|
+
arrowLeft = tW / 2 - 4;
|
|
1779
|
+
break;
|
|
1780
|
+
case "top-start":
|
|
1781
|
+
top = aTop - tH - GAP;
|
|
1782
|
+
left = aLeft;
|
|
1783
|
+
arrowLeft = Math.min(aW / 2, tW - 16);
|
|
1784
|
+
break;
|
|
1785
|
+
case "top-end":
|
|
1786
|
+
top = aTop - tH - GAP;
|
|
1787
|
+
left = aLeft + aW - tW;
|
|
1788
|
+
arrowLeft = Math.max(tW - aW / 2 - 4, 8);
|
|
1789
|
+
break;
|
|
1790
|
+
case "bottom":
|
|
1791
|
+
top = aTop + aH + GAP;
|
|
1792
|
+
left = aLeft + aW / 2 - tW / 2;
|
|
1793
|
+
arrowLeft = tW / 2 - 4;
|
|
1794
|
+
break;
|
|
1795
|
+
case "bottom-start":
|
|
1796
|
+
top = aTop + aH + GAP;
|
|
1797
|
+
left = aLeft;
|
|
1798
|
+
arrowLeft = Math.min(aW / 2, tW - 16);
|
|
1799
|
+
break;
|
|
1800
|
+
case "bottom-end":
|
|
1801
|
+
top = aTop + aH + GAP;
|
|
1802
|
+
left = aLeft + aW - tW;
|
|
1803
|
+
arrowLeft = Math.max(tW - aW / 2 - 4, 8);
|
|
1804
|
+
break;
|
|
1805
|
+
case "left":
|
|
1806
|
+
top = aTop + aH / 2 - tH / 2;
|
|
1807
|
+
left = aLeft - tW - GAP;
|
|
1808
|
+
arrowTop = tH / 2 - 4;
|
|
1809
|
+
break;
|
|
1810
|
+
case "left-start":
|
|
1811
|
+
top = aTop;
|
|
1812
|
+
left = aLeft - tW - GAP;
|
|
1813
|
+
arrowTop = Math.min(aH / 2, tH - 16);
|
|
1814
|
+
break;
|
|
1815
|
+
case "left-end":
|
|
1816
|
+
top = aTop + aH - tH;
|
|
1817
|
+
left = aLeft - tW - GAP;
|
|
1818
|
+
arrowTop = Math.max(tH - aH / 2 - 4, 8);
|
|
1819
|
+
break;
|
|
1820
|
+
case "right":
|
|
1821
|
+
top = aTop + aH / 2 - tH / 2;
|
|
1822
|
+
left = aLeft + aW + GAP;
|
|
1823
|
+
arrowTop = tH / 2 - 4;
|
|
1824
|
+
break;
|
|
1825
|
+
case "right-start":
|
|
1826
|
+
top = aTop;
|
|
1827
|
+
left = aLeft + aW + GAP;
|
|
1828
|
+
arrowTop = Math.min(aH / 2, tH - 16);
|
|
1829
|
+
break;
|
|
1830
|
+
case "right-end":
|
|
1831
|
+
top = aTop + aH - tH;
|
|
1832
|
+
left = aLeft + aW + GAP;
|
|
1833
|
+
arrowTop = Math.max(tH - aH / 2 - 4, 8);
|
|
1834
|
+
break;
|
|
1835
|
+
default:
|
|
1836
|
+
top = aTop - tH - GAP;
|
|
1837
|
+
left = aLeft + aW / 2 - tW / 2;
|
|
1838
|
+
}
|
|
1839
|
+
const vw = window.innerWidth;
|
|
1840
|
+
const vh = window.innerHeight;
|
|
1841
|
+
left = Math.max(8, Math.min(left, vw - tW - 8));
|
|
1842
|
+
top = Math.max(8, Math.min(top, vh - tH - 8));
|
|
1843
|
+
return { top, left, arrowLeft, arrowTop };
|
|
1844
|
+
}
|
|
1845
|
+
var Tooltip = ({
|
|
1846
|
+
title,
|
|
1847
|
+
placement = "top",
|
|
1848
|
+
arrow = false,
|
|
1849
|
+
open: controlledOpen,
|
|
1850
|
+
disableHoverListener = false,
|
|
1851
|
+
disableFocusListener = false,
|
|
1852
|
+
enterDelay = 100,
|
|
1853
|
+
leaveDelay = 0,
|
|
1854
|
+
children,
|
|
1855
|
+
followCursor = false,
|
|
1856
|
+
className = "",
|
|
1857
|
+
style,
|
|
1858
|
+
sx
|
|
1859
|
+
}) => {
|
|
1860
|
+
const sxClass = useSx(sx);
|
|
1861
|
+
const [internalOpen, setInternalOpen] = useState4(false);
|
|
1862
|
+
const [position, setPosition] = useState4({ top: 0, left: 0 });
|
|
1863
|
+
const anchorRef = useRef3(null);
|
|
1864
|
+
const tooltipRef = useRef3(null);
|
|
1865
|
+
const enterTimer = useRef3(null);
|
|
1866
|
+
const leaveTimer = useRef3(null);
|
|
1867
|
+
const cursorPos = useRef3({ x: 0, y: 0 });
|
|
1868
|
+
const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
|
|
1869
|
+
const clearTimers = useCallback(() => {
|
|
1870
|
+
if (enterTimer.current) clearTimeout(enterTimer.current);
|
|
1871
|
+
if (leaveTimer.current) clearTimeout(leaveTimer.current);
|
|
1872
|
+
}, []);
|
|
1873
|
+
const updatePosition = useCallback(() => {
|
|
1874
|
+
if (!anchorRef.current || !tooltipRef.current) return;
|
|
1875
|
+
const anchorRect = anchorRef.current.getBoundingClientRect();
|
|
1876
|
+
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
1877
|
+
if (followCursor) {
|
|
1878
|
+
const fakeRect = {
|
|
1879
|
+
top: cursorPos.current.y,
|
|
1880
|
+
left: cursorPos.current.x,
|
|
1881
|
+
right: cursorPos.current.x,
|
|
1882
|
+
bottom: cursorPos.current.y,
|
|
1883
|
+
width: 0,
|
|
1884
|
+
height: 0,
|
|
1885
|
+
x: cursorPos.current.x,
|
|
1886
|
+
y: cursorPos.current.y,
|
|
1887
|
+
toJSON: () => ({})
|
|
1888
|
+
};
|
|
1889
|
+
setPosition(computePosition(fakeRect, tooltipRect, placement));
|
|
1890
|
+
} else {
|
|
1891
|
+
setPosition(computePosition(anchorRect, tooltipRect, placement));
|
|
1892
|
+
}
|
|
1893
|
+
}, [placement, followCursor]);
|
|
1894
|
+
useEffect4(() => {
|
|
1895
|
+
if (isOpen) {
|
|
1896
|
+
requestAnimationFrame(() => {
|
|
1897
|
+
updatePosition();
|
|
1898
|
+
});
|
|
1899
|
+
}
|
|
1900
|
+
}, [isOpen, updatePosition]);
|
|
1901
|
+
const handleOpen = useCallback(() => {
|
|
1902
|
+
clearTimers();
|
|
1903
|
+
if (enterDelay > 0) {
|
|
1904
|
+
enterTimer.current = setTimeout(() => {
|
|
1905
|
+
setInternalOpen(true);
|
|
1906
|
+
}, enterDelay);
|
|
1907
|
+
} else {
|
|
1908
|
+
setInternalOpen(true);
|
|
1909
|
+
}
|
|
1910
|
+
}, [enterDelay, clearTimers]);
|
|
1911
|
+
const handleClose = useCallback(() => {
|
|
1912
|
+
clearTimers();
|
|
1913
|
+
if (leaveDelay > 0) {
|
|
1914
|
+
leaveTimer.current = setTimeout(() => {
|
|
1915
|
+
setInternalOpen(false);
|
|
1916
|
+
}, leaveDelay);
|
|
1917
|
+
} else {
|
|
1918
|
+
setInternalOpen(false);
|
|
1919
|
+
}
|
|
1920
|
+
}, [leaveDelay, clearTimers]);
|
|
1921
|
+
const handleMouseMove = useCallback(
|
|
1922
|
+
(e) => {
|
|
1923
|
+
cursorPos.current = { x: e.clientX, y: e.clientY };
|
|
1924
|
+
if (isOpen && followCursor) {
|
|
1925
|
+
updatePosition();
|
|
1926
|
+
}
|
|
1927
|
+
},
|
|
1928
|
+
[isOpen, followCursor, updatePosition]
|
|
1929
|
+
);
|
|
1930
|
+
useEffect4(() => {
|
|
1931
|
+
return () => clearTimers();
|
|
1932
|
+
}, [clearTimers]);
|
|
1933
|
+
const childProps = {};
|
|
1934
|
+
if (!disableHoverListener) {
|
|
1935
|
+
childProps.onMouseEnter = handleOpen;
|
|
1936
|
+
childProps.onMouseLeave = handleClose;
|
|
1937
|
+
childProps.onMouseMove = followCursor ? handleMouseMove : void 0;
|
|
1938
|
+
}
|
|
1939
|
+
if (!disableFocusListener) {
|
|
1940
|
+
childProps.onFocus = handleOpen;
|
|
1941
|
+
childProps.onBlur = handleClose;
|
|
1942
|
+
}
|
|
1943
|
+
const tooltipClasses = [
|
|
1944
|
+
"rf-tooltip",
|
|
1945
|
+
`rf-tooltip--placement-${placement}`,
|
|
1946
|
+
isOpen ? "rf-tooltip--visible" : "",
|
|
1947
|
+
sxClass,
|
|
1948
|
+
className
|
|
1949
|
+
].filter(Boolean).join(" ");
|
|
1950
|
+
const tooltipElement = /* @__PURE__ */ React69.createElement(
|
|
1951
|
+
"div",
|
|
1952
|
+
{
|
|
1953
|
+
ref: tooltipRef,
|
|
1954
|
+
className: tooltipClasses,
|
|
1955
|
+
style: {
|
|
1956
|
+
top: position.top,
|
|
1957
|
+
left: position.left,
|
|
1958
|
+
...style
|
|
1959
|
+
},
|
|
1960
|
+
role: "tooltip",
|
|
1961
|
+
"aria-hidden": !isOpen
|
|
1962
|
+
},
|
|
1963
|
+
title,
|
|
1964
|
+
arrow && /* @__PURE__ */ React69.createElement(
|
|
1965
|
+
"span",
|
|
1966
|
+
{
|
|
1967
|
+
className: "rf-tooltip__arrow",
|
|
1968
|
+
style: {
|
|
1969
|
+
...position.arrowLeft !== void 0 ? { left: position.arrowLeft } : {},
|
|
1970
|
+
...position.arrowTop !== void 0 ? { top: position.arrowTop } : {}
|
|
1971
|
+
}
|
|
1972
|
+
}
|
|
1973
|
+
)
|
|
1974
|
+
);
|
|
1975
|
+
return /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(
|
|
1976
|
+
"span",
|
|
1977
|
+
{
|
|
1978
|
+
ref: anchorRef,
|
|
1979
|
+
style: { display: "inline-flex", position: "relative" },
|
|
1980
|
+
"aria-describedby": isOpen ? "rf-tooltip" : void 0,
|
|
1981
|
+
...childProps
|
|
1982
|
+
},
|
|
1983
|
+
React69.cloneElement(children)
|
|
1984
|
+
), ReactDOM2.createPortal(tooltipElement, document.body));
|
|
1985
|
+
};
|
|
1986
|
+
Tooltip.displayName = "Tooltip";
|
|
1987
|
+
|
|
1988
|
+
// lib/TextFields/Autocomplete.tsx
|
|
1989
|
+
var ChevronDownIcon = () => /* @__PURE__ */ React70.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React70.createElement("polyline", { points: "6 9 12 15 18 9" }));
|
|
1990
|
+
var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ React70.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ React70.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React70.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
|
|
1991
|
+
var CheckIcon = () => /* @__PURE__ */ React70.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React70.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
1760
1992
|
function defaultGetLabel(option) {
|
|
1761
1993
|
if (option === null || option === void 0) return "";
|
|
1762
1994
|
if (typeof option === "string") return option;
|
|
@@ -1766,11 +1998,19 @@ function defaultGetLabel(option) {
|
|
|
1766
1998
|
}
|
|
1767
1999
|
function defaultIsEqual(a, b) {
|
|
1768
2000
|
if (a === b) return true;
|
|
1769
|
-
if (a
|
|
2001
|
+
if (a == null || b == null) return false;
|
|
2002
|
+
const aIsObj = typeof a === "object";
|
|
2003
|
+
const bIsObj = typeof b === "object";
|
|
2004
|
+
if (aIsObj && bIsObj) {
|
|
1770
2005
|
const aVal = a.value;
|
|
1771
2006
|
const bVal = b.value;
|
|
1772
2007
|
if (aVal !== void 0 && bVal !== void 0) return aVal === bVal;
|
|
2008
|
+
const aId = a.id;
|
|
2009
|
+
const bId = b.id;
|
|
2010
|
+
if (aId !== void 0 && bId !== void 0) return aId === bId;
|
|
1773
2011
|
}
|
|
2012
|
+
if (aIsObj && !bIsObj) return a.value === b;
|
|
2013
|
+
if (!aIsObj && bIsObj) return a === b.value;
|
|
1774
2014
|
return false;
|
|
1775
2015
|
}
|
|
1776
2016
|
function defaultFilter(options, inputValue, getLabel) {
|
|
@@ -1813,17 +2053,18 @@ function AutocompleteInner(props, _ref) {
|
|
|
1813
2053
|
onOpen,
|
|
1814
2054
|
onClose
|
|
1815
2055
|
} = props;
|
|
1816
|
-
const [open, setOpen] =
|
|
1817
|
-
const [inputStr, setInputStr] =
|
|
1818
|
-
const [
|
|
1819
|
-
const [
|
|
1820
|
-
const
|
|
1821
|
-
const
|
|
1822
|
-
const
|
|
1823
|
-
const
|
|
1824
|
-
const
|
|
2056
|
+
const [open, setOpen] = useState5(false);
|
|
2057
|
+
const [inputStr, setInputStr] = useState5("");
|
|
2058
|
+
const [filterQuery, setFilterQuery] = useState5("");
|
|
2059
|
+
const [focusedIdx, setFocusedIdx] = useState5(-1);
|
|
2060
|
+
const [popupStyle, setPopupStyle] = useState5({});
|
|
2061
|
+
const containerRef = useRef4(null);
|
|
2062
|
+
const popupRef = useRef4(null);
|
|
2063
|
+
const inputRef = useRef4(null);
|
|
2064
|
+
const listRef = useRef4(null);
|
|
2065
|
+
const inputId = useRef4(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
|
|
1825
2066
|
const sxClass = useSx(sx);
|
|
1826
|
-
const calcPopupStyle =
|
|
2067
|
+
const calcPopupStyle = useCallback2(() => {
|
|
1827
2068
|
if (!containerRef.current) return;
|
|
1828
2069
|
const rect = containerRef.current.getBoundingClientRect();
|
|
1829
2070
|
const POPUP_MAX_HEIGHT = 280;
|
|
@@ -1854,15 +2095,15 @@ function AutocompleteInner(props, _ref) {
|
|
|
1854
2095
|
}, []);
|
|
1855
2096
|
const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
|
|
1856
2097
|
const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
|
|
1857
|
-
const isEqual =
|
|
2098
|
+
const isEqual = useCallback2(
|
|
1858
2099
|
(a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : defaultIsEqual(a, b),
|
|
1859
2100
|
[isOptionEqualToValue]
|
|
1860
2101
|
);
|
|
1861
|
-
const isSelected =
|
|
2102
|
+
const isSelected = useCallback2(
|
|
1862
2103
|
(opt) => selectedValues.some((v) => isEqual(opt, v)),
|
|
1863
2104
|
[selectedValues, isEqual]
|
|
1864
2105
|
);
|
|
1865
|
-
const filtered = filterOptions ? filterOptions(options, activeInput) : defaultFilter(options,
|
|
2106
|
+
const filtered = filterOptions ? filterOptions(options, activeInput) : defaultFilter(options, filterQuery, getOptionLabel);
|
|
1866
2107
|
const flatEntries = [];
|
|
1867
2108
|
if (groupBy) {
|
|
1868
2109
|
const groups = {};
|
|
@@ -1885,14 +2126,15 @@ function AutocompleteInner(props, _ref) {
|
|
|
1885
2126
|
filtered.forEach((opt, i) => flatEntries.push({ kind: "option", option: opt, flatIdx: i }));
|
|
1886
2127
|
}
|
|
1887
2128
|
const selectableOptions = flatEntries.filter((e) => e.kind === "option");
|
|
1888
|
-
const openPopup =
|
|
2129
|
+
const openPopup = useCallback2(() => {
|
|
1889
2130
|
if (disabled) return;
|
|
1890
2131
|
calcPopupStyle();
|
|
1891
2132
|
setOpen(true);
|
|
1892
2133
|
setFocusedIdx(-1);
|
|
2134
|
+
setFilterQuery("");
|
|
1893
2135
|
onOpen?.();
|
|
1894
2136
|
}, [disabled, calcPopupStyle, onOpen]);
|
|
1895
|
-
const closePopup =
|
|
2137
|
+
const closePopup = useCallback2((justSelected = false) => {
|
|
1896
2138
|
setOpen(false);
|
|
1897
2139
|
setFocusedIdx(-1);
|
|
1898
2140
|
onClose?.();
|
|
@@ -1901,7 +2143,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
1901
2143
|
onInputChange?.("");
|
|
1902
2144
|
}
|
|
1903
2145
|
}, [freeSolo, multiple, value, onInputChange, onClose]);
|
|
1904
|
-
|
|
2146
|
+
useEffect5(() => {
|
|
1905
2147
|
if (!open) return;
|
|
1906
2148
|
const handleOutside = (e) => {
|
|
1907
2149
|
const target = e.target;
|
|
@@ -1920,7 +2162,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
1920
2162
|
window.removeEventListener("resize", calcPopupStyle);
|
|
1921
2163
|
};
|
|
1922
2164
|
}, [open, closePopup, calcPopupStyle]);
|
|
1923
|
-
|
|
2165
|
+
useEffect5(() => {
|
|
1924
2166
|
if (controlledInput !== void 0) return;
|
|
1925
2167
|
if (!multiple) {
|
|
1926
2168
|
const v = value;
|
|
@@ -1934,11 +2176,13 @@ function AutocompleteInner(props, _ref) {
|
|
|
1934
2176
|
const next = already ? selectedValues.filter((v) => !isEqual(v, opt)) : [...selectedValues, opt];
|
|
1935
2177
|
onChange?.(event, next, already ? "removeOption" : "selectOption");
|
|
1936
2178
|
setInputStr("");
|
|
2179
|
+
setFilterQuery("");
|
|
1937
2180
|
onInputChange?.("");
|
|
1938
2181
|
inputRef.current?.focus();
|
|
1939
2182
|
} else {
|
|
1940
2183
|
onChange?.(event, opt, "selectOption");
|
|
1941
2184
|
setInputStr(getOptionLabel(opt));
|
|
2185
|
+
setFilterQuery("");
|
|
1942
2186
|
onInputChange?.(getOptionLabel(opt));
|
|
1943
2187
|
closePopup(true);
|
|
1944
2188
|
}
|
|
@@ -1948,6 +2192,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
1948
2192
|
e.stopPropagation();
|
|
1949
2193
|
onChange?.(e, multiple ? [] : null, "clear");
|
|
1950
2194
|
setInputStr("");
|
|
2195
|
+
setFilterQuery("");
|
|
1951
2196
|
onInputChange?.("");
|
|
1952
2197
|
inputRef.current?.focus();
|
|
1953
2198
|
};
|
|
@@ -1959,6 +2204,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
1959
2204
|
const handleInputChange = (e) => {
|
|
1960
2205
|
const v = e.target.value;
|
|
1961
2206
|
setInputStr(v);
|
|
2207
|
+
setFilterQuery(v);
|
|
1962
2208
|
onInputChange?.(v);
|
|
1963
2209
|
if (!open) openPopup();
|
|
1964
2210
|
};
|
|
@@ -2032,7 +2278,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2032
2278
|
className
|
|
2033
2279
|
].filter(Boolean).join(" ");
|
|
2034
2280
|
const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
|
|
2035
|
-
return /* @__PURE__ */
|
|
2281
|
+
return /* @__PURE__ */ React70.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React70.createElement(
|
|
2036
2282
|
"div",
|
|
2037
2283
|
{
|
|
2038
2284
|
className: "rf-text-field__wrapper",
|
|
@@ -2043,7 +2289,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2043
2289
|
}
|
|
2044
2290
|
}
|
|
2045
2291
|
},
|
|
2046
|
-
multiple && visibleTags.map((opt, i) => /* @__PURE__ */
|
|
2292
|
+
multiple && visibleTags.map((opt, i) => /* @__PURE__ */ React70.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React70.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ React70.createElement(
|
|
2047
2293
|
"button",
|
|
2048
2294
|
{
|
|
2049
2295
|
type: "button",
|
|
@@ -2052,10 +2298,17 @@ function AutocompleteInner(props, _ref) {
|
|
|
2052
2298
|
onClick: (e) => removeTag(opt, e),
|
|
2053
2299
|
tabIndex: -1
|
|
2054
2300
|
},
|
|
2055
|
-
/* @__PURE__ */
|
|
2301
|
+
/* @__PURE__ */ React70.createElement(CloseSmIcon, { size: 12 })
|
|
2056
2302
|
))),
|
|
2057
|
-
hiddenCount > 0 && /* @__PURE__ */
|
|
2058
|
-
|
|
2303
|
+
hiddenCount > 0 && /* @__PURE__ */ React70.createElement(
|
|
2304
|
+
Tooltip,
|
|
2305
|
+
{
|
|
2306
|
+
title: selectedValues.slice(limitTags).map((o) => getOptionLabel(o)).join(", "),
|
|
2307
|
+
placement: "top"
|
|
2308
|
+
},
|
|
2309
|
+
/* @__PURE__ */ React70.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more")
|
|
2310
|
+
),
|
|
2311
|
+
/* @__PURE__ */ React70.createElement(
|
|
2059
2312
|
"input",
|
|
2060
2313
|
{
|
|
2061
2314
|
ref: inputRef,
|
|
@@ -2077,9 +2330,9 @@ function AutocompleteInner(props, _ref) {
|
|
|
2077
2330
|
"aria-autocomplete": "list"
|
|
2078
2331
|
}
|
|
2079
2332
|
),
|
|
2080
|
-
label && /* @__PURE__ */
|
|
2081
|
-
variant === "outlined" && /* @__PURE__ */
|
|
2082
|
-
/* @__PURE__ */
|
|
2333
|
+
label && /* @__PURE__ */ React70.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React70.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
|
|
2334
|
+
variant === "outlined" && /* @__PURE__ */ React70.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React70.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React70.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React70.createElement("legend", { className: "rf-text-field__legend--empty" })),
|
|
2335
|
+
/* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ React70.createElement(
|
|
2083
2336
|
"button",
|
|
2084
2337
|
{
|
|
2085
2338
|
type: "button",
|
|
@@ -2089,8 +2342,8 @@ function AutocompleteInner(props, _ref) {
|
|
|
2089
2342
|
tabIndex: -1,
|
|
2090
2343
|
"aria-label": "Clear"
|
|
2091
2344
|
},
|
|
2092
|
-
/* @__PURE__ */
|
|
2093
|
-
), !freeSolo && /* @__PURE__ */
|
|
2345
|
+
/* @__PURE__ */ React70.createElement(CloseSmIcon, { size: 16 })
|
|
2346
|
+
), !freeSolo && /* @__PURE__ */ React70.createElement(
|
|
2094
2347
|
"button",
|
|
2095
2348
|
{
|
|
2096
2349
|
type: "button",
|
|
@@ -2102,10 +2355,10 @@ function AutocompleteInner(props, _ref) {
|
|
|
2102
2355
|
tabIndex: -1,
|
|
2103
2356
|
"aria-label": open ? "Close" : "Open"
|
|
2104
2357
|
},
|
|
2105
|
-
/* @__PURE__ */
|
|
2358
|
+
/* @__PURE__ */ React70.createElement(ChevronDownIcon, null)
|
|
2106
2359
|
))
|
|
2107
|
-
), helperText && /* @__PURE__ */
|
|
2108
|
-
/* @__PURE__ */
|
|
2360
|
+
), helperText && /* @__PURE__ */ React70.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && ReactDOM3.createPortal(
|
|
2361
|
+
/* @__PURE__ */ React70.createElement("div", { ref: popupRef, className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ React70.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ React70.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
|
|
2109
2362
|
// Grouped render
|
|
2110
2363
|
(() => {
|
|
2111
2364
|
const rendered = [];
|
|
@@ -2115,7 +2368,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2115
2368
|
if (entry.kind === "group") {
|
|
2116
2369
|
if (groupItems.length > 0) {
|
|
2117
2370
|
rendered.push(
|
|
2118
|
-
/* @__PURE__ */
|
|
2371
|
+
/* @__PURE__ */ React70.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React70.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
|
|
2119
2372
|
);
|
|
2120
2373
|
groupItems = [];
|
|
2121
2374
|
}
|
|
@@ -2126,7 +2379,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2126
2379
|
}
|
|
2127
2380
|
if (ei === flatEntries.length - 1 && groupItems.length > 0) {
|
|
2128
2381
|
rendered.push(
|
|
2129
|
-
/* @__PURE__ */
|
|
2382
|
+
/* @__PURE__ */ React70.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React70.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
|
|
2130
2383
|
);
|
|
2131
2384
|
}
|
|
2132
2385
|
});
|
|
@@ -2140,7 +2393,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2140
2393
|
const focused = focusedIdx === flatIdx;
|
|
2141
2394
|
const optDisabled = getOptionDisabled?.(option) ?? false;
|
|
2142
2395
|
const label2 = getOptionLabel(option);
|
|
2143
|
-
return /* @__PURE__ */
|
|
2396
|
+
return /* @__PURE__ */ React70.createElement(
|
|
2144
2397
|
"li",
|
|
2145
2398
|
{
|
|
2146
2399
|
key: label2 + flatIdx,
|
|
@@ -2159,12 +2412,12 @@ function AutocompleteInner(props, _ref) {
|
|
|
2159
2412
|
onMouseDown: (e) => e.preventDefault(),
|
|
2160
2413
|
onClick: (e) => selectOption(option, e)
|
|
2161
2414
|
},
|
|
2162
|
-
renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */
|
|
2163
|
-
!renderOption && /* @__PURE__ */
|
|
2415
|
+
renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ React70.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
|
|
2416
|
+
!renderOption && /* @__PURE__ */ React70.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ React70.createElement(CheckIcon, null))
|
|
2164
2417
|
);
|
|
2165
2418
|
}
|
|
2166
2419
|
}
|
|
2167
|
-
var Autocomplete =
|
|
2420
|
+
var Autocomplete = React70.forwardRef(AutocompleteInner);
|
|
2168
2421
|
Autocomplete.displayName = "Autocomplete";
|
|
2169
2422
|
|
|
2170
2423
|
// lib/TextFields/AddressLookup.tsx
|
|
@@ -2181,16 +2434,16 @@ var AddressLookup = ({
|
|
|
2181
2434
|
token = ""
|
|
2182
2435
|
}) => {
|
|
2183
2436
|
const { theme } = useRufousTheme();
|
|
2184
|
-
const [suggestions, setSuggestions] =
|
|
2185
|
-
const [loading, setLoading] =
|
|
2186
|
-
const [showSuggestions, setShowSuggestions] =
|
|
2187
|
-
const debounceTimeout =
|
|
2188
|
-
const containerRef =
|
|
2437
|
+
const [suggestions, setSuggestions] = useState6([]);
|
|
2438
|
+
const [loading, setLoading] = useState6(false);
|
|
2439
|
+
const [showSuggestions, setShowSuggestions] = useState6(false);
|
|
2440
|
+
const debounceTimeout = useRef5(null);
|
|
2441
|
+
const containerRef = useRef5(null);
|
|
2189
2442
|
const apiKey = token || "";
|
|
2190
2443
|
const countries = Country.getAllCountries();
|
|
2191
|
-
const [states, setStates] =
|
|
2192
|
-
const [cities, setCities] =
|
|
2193
|
-
|
|
2444
|
+
const [states, setStates] = useState6([]);
|
|
2445
|
+
const [cities, setCities] = useState6([]);
|
|
2446
|
+
useEffect6(() => {
|
|
2194
2447
|
const handleClickOutside = (event) => {
|
|
2195
2448
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
2196
2449
|
setShowSuggestions(false);
|
|
@@ -2199,7 +2452,7 @@ var AddressLookup = ({
|
|
|
2199
2452
|
document.addEventListener("mousedown", handleClickOutside);
|
|
2200
2453
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2201
2454
|
}, []);
|
|
2202
|
-
|
|
2455
|
+
useEffect6(() => {
|
|
2203
2456
|
if (value.country) {
|
|
2204
2457
|
const country = countries.find((c) => c.name === value.country);
|
|
2205
2458
|
if (country) {
|
|
@@ -2212,7 +2465,7 @@ var AddressLookup = ({
|
|
|
2212
2465
|
setStates([]);
|
|
2213
2466
|
}
|
|
2214
2467
|
}, [value.country]);
|
|
2215
|
-
|
|
2468
|
+
useEffect6(() => {
|
|
2216
2469
|
if (value.state && value.country) {
|
|
2217
2470
|
const country = countries.find((c) => c.name === value.country);
|
|
2218
2471
|
if (country) {
|
|
@@ -2317,7 +2570,7 @@ var AddressLookup = ({
|
|
|
2317
2570
|
city: ""
|
|
2318
2571
|
});
|
|
2319
2572
|
};
|
|
2320
|
-
return /* @__PURE__ */
|
|
2573
|
+
return /* @__PURE__ */ React71.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ React71.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ React71.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ React71.createElement(
|
|
2321
2574
|
TextField,
|
|
2322
2575
|
{
|
|
2323
2576
|
label,
|
|
@@ -2349,7 +2602,7 @@ var AddressLookup = ({
|
|
|
2349
2602
|
},
|
|
2350
2603
|
onFocus: () => suggestions.length > 0 && setShowSuggestions(true)
|
|
2351
2604
|
}
|
|
2352
|
-
), loading && /* @__PURE__ */
|
|
2605
|
+
), loading && /* @__PURE__ */ React71.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ React71.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ React71.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ React71.createElement(
|
|
2353
2606
|
"div",
|
|
2354
2607
|
{
|
|
2355
2608
|
key: idx,
|
|
@@ -2360,9 +2613,9 @@ var AddressLookup = ({
|
|
|
2360
2613
|
fetchPlaceDetails(option.placePrediction.placeId, mainText);
|
|
2361
2614
|
}
|
|
2362
2615
|
},
|
|
2363
|
-
/* @__PURE__ */
|
|
2364
|
-
/* @__PURE__ */
|
|
2365
|
-
))), error.addressLine1 && /* @__PURE__ */
|
|
2616
|
+
/* @__PURE__ */ React71.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
|
|
2617
|
+
/* @__PURE__ */ React71.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
|
|
2618
|
+
))), error.addressLine1 && /* @__PURE__ */ React71.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ React71.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React71.createElement(
|
|
2366
2619
|
TextField,
|
|
2367
2620
|
{
|
|
2368
2621
|
label: "Address Line 2",
|
|
@@ -2371,7 +2624,7 @@ var AddressLookup = ({
|
|
|
2371
2624
|
value: value.addressLine2 || "",
|
|
2372
2625
|
onChange: (e) => handleChange("addressLine2", e.target.value)
|
|
2373
2626
|
}
|
|
2374
|
-
)), layout !== "compact" && /* @__PURE__ */
|
|
2627
|
+
)), layout !== "compact" && /* @__PURE__ */ React71.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React71.createElement(
|
|
2375
2628
|
TextField,
|
|
2376
2629
|
{
|
|
2377
2630
|
label: "Address Line 2",
|
|
@@ -2380,7 +2633,7 @@ var AddressLookup = ({
|
|
|
2380
2633
|
value: value.addressLine2 || "",
|
|
2381
2634
|
onChange: (e) => handleChange("addressLine2", e.target.value)
|
|
2382
2635
|
}
|
|
2383
|
-
)), /* @__PURE__ */
|
|
2636
|
+
)), /* @__PURE__ */ React71.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ React71.createElement(
|
|
2384
2637
|
Autocomplete,
|
|
2385
2638
|
{
|
|
2386
2639
|
options: countries.map((c) => c.name),
|
|
@@ -2391,7 +2644,7 @@ var AddressLookup = ({
|
|
|
2391
2644
|
required,
|
|
2392
2645
|
error: !!error.country
|
|
2393
2646
|
}
|
|
2394
|
-
), error.country && /* @__PURE__ */
|
|
2647
|
+
), error.country && /* @__PURE__ */ React71.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ React71.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ React71.createElement(
|
|
2395
2648
|
Autocomplete,
|
|
2396
2649
|
{
|
|
2397
2650
|
options: states.map((s2) => s2.name),
|
|
@@ -2402,7 +2655,7 @@ var AddressLookup = ({
|
|
|
2402
2655
|
required,
|
|
2403
2656
|
error: !!error.state
|
|
2404
2657
|
}
|
|
2405
|
-
), error.state && /* @__PURE__ */
|
|
2658
|
+
), error.state && /* @__PURE__ */ React71.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ React71.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ React71.createElement(
|
|
2406
2659
|
Autocomplete,
|
|
2407
2660
|
{
|
|
2408
2661
|
options: cities.map((c) => c.name),
|
|
@@ -2413,7 +2666,7 @@ var AddressLookup = ({
|
|
|
2413
2666
|
required,
|
|
2414
2667
|
error: !!error.city
|
|
2415
2668
|
}
|
|
2416
|
-
), error.city && /* @__PURE__ */
|
|
2669
|
+
), error.city && /* @__PURE__ */ React71.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ React71.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ React71.createElement(
|
|
2417
2670
|
TextField,
|
|
2418
2671
|
{
|
|
2419
2672
|
label: "Pincode",
|
|
@@ -2423,16 +2676,16 @@ var AddressLookup = ({
|
|
|
2423
2676
|
required,
|
|
2424
2677
|
onChange: (e) => handleChange("pincode", e.target.value)
|
|
2425
2678
|
}
|
|
2426
|
-
), error.pincode && /* @__PURE__ */
|
|
2679
|
+
), error.pincode && /* @__PURE__ */ React71.createElement("div", { className: "field-error-text" }, error.pincode))));
|
|
2427
2680
|
};
|
|
2428
2681
|
var AddressLookup_default = AddressLookup;
|
|
2429
2682
|
|
|
2430
2683
|
// lib/TextFields/DateField.tsx
|
|
2431
|
-
import
|
|
2432
|
-
useState as
|
|
2433
|
-
useRef as
|
|
2434
|
-
useEffect as
|
|
2435
|
-
useCallback as
|
|
2684
|
+
import React72, {
|
|
2685
|
+
useState as useState7,
|
|
2686
|
+
useRef as useRef6,
|
|
2687
|
+
useEffect as useEffect7,
|
|
2688
|
+
useCallback as useCallback3
|
|
2436
2689
|
} from "react";
|
|
2437
2690
|
import { createPortal } from "react-dom";
|
|
2438
2691
|
var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
|
|
@@ -2594,25 +2847,25 @@ var parseTimeFromISO = (iso) => {
|
|
|
2594
2847
|
if (h === 0) h = 12;
|
|
2595
2848
|
return { h, m, ampm };
|
|
2596
2849
|
};
|
|
2597
|
-
var CalendarIcon = () => /* @__PURE__ */
|
|
2598
|
-
var ChevUp = () => /* @__PURE__ */
|
|
2599
|
-
var ChevDown = () => /* @__PURE__ */
|
|
2850
|
+
var CalendarIcon = () => /* @__PURE__ */ React72.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React72.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React72.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React72.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React72.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
|
|
2851
|
+
var ChevUp = () => /* @__PURE__ */ React72.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React72.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
|
|
2852
|
+
var ChevDown = () => /* @__PURE__ */ React72.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React72.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
|
|
2600
2853
|
var ITEM_H = 36;
|
|
2601
2854
|
var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
|
|
2602
|
-
const listRef =
|
|
2603
|
-
const isInternalScroll =
|
|
2604
|
-
const scrollTimeout =
|
|
2855
|
+
const listRef = useRef6(null);
|
|
2856
|
+
const isInternalScroll = useRef6(false);
|
|
2857
|
+
const scrollTimeout = useRef6(null);
|
|
2605
2858
|
const MULTIPLIER = infinite ? 100 : 1;
|
|
2606
2859
|
const virtualItems = infinite ? Array(MULTIPLIER).fill(items).flat() : items;
|
|
2607
2860
|
const centerOffset = infinite ? Math.floor(MULTIPLIER / 2) * items.length : 0;
|
|
2608
2861
|
const VISUAL_OFFSET = 54;
|
|
2609
|
-
|
|
2862
|
+
useEffect7(() => {
|
|
2610
2863
|
if (listRef.current) {
|
|
2611
2864
|
const targetIndex = centerOffset + selected;
|
|
2612
2865
|
listRef.current.scrollTop = targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0);
|
|
2613
2866
|
}
|
|
2614
2867
|
}, [centerOffset, infinite, selected]);
|
|
2615
|
-
|
|
2868
|
+
useEffect7(() => {
|
|
2616
2869
|
if (listRef.current && !isInternalScroll.current) {
|
|
2617
2870
|
const targetIndex = centerOffset + selected;
|
|
2618
2871
|
listRef.current.scrollTo({
|
|
@@ -2644,15 +2897,15 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
|
|
|
2644
2897
|
}
|
|
2645
2898
|
}, 100);
|
|
2646
2899
|
};
|
|
2647
|
-
return /* @__PURE__ */
|
|
2900
|
+
return /* @__PURE__ */ React72.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ React72.createElement(
|
|
2648
2901
|
"div",
|
|
2649
2902
|
{
|
|
2650
2903
|
className: "rf-timescroll__col",
|
|
2651
2904
|
ref: listRef,
|
|
2652
2905
|
onScroll: handleScroll
|
|
2653
2906
|
},
|
|
2654
|
-
!infinite && /* @__PURE__ */
|
|
2655
|
-
virtualItems.map((label, idx) => /* @__PURE__ */
|
|
2907
|
+
!infinite && /* @__PURE__ */ React72.createElement("div", { className: "rf-timescroll__spacer" }),
|
|
2908
|
+
virtualItems.map((label, idx) => /* @__PURE__ */ React72.createElement(
|
|
2656
2909
|
"div",
|
|
2657
2910
|
{
|
|
2658
2911
|
key: `${label}-${idx}`,
|
|
@@ -2660,8 +2913,8 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
|
|
|
2660
2913
|
},
|
|
2661
2914
|
label
|
|
2662
2915
|
)),
|
|
2663
|
-
!infinite && /* @__PURE__ */
|
|
2664
|
-
), /* @__PURE__ */
|
|
2916
|
+
!infinite && /* @__PURE__ */ React72.createElement("div", { className: "rf-timescroll__spacer" })
|
|
2917
|
+
), /* @__PURE__ */ React72.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ React72.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
|
|
2665
2918
|
};
|
|
2666
2919
|
var SpinnerPanel = ({
|
|
2667
2920
|
hour,
|
|
@@ -2672,7 +2925,7 @@ var SpinnerPanel = ({
|
|
|
2672
2925
|
onHourInput,
|
|
2673
2926
|
onMinuteInput,
|
|
2674
2927
|
onAmpmToggle
|
|
2675
|
-
}) => /* @__PURE__ */
|
|
2928
|
+
}) => /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ React72.createElement(ChevUp, null)), /* @__PURE__ */ React72.createElement(
|
|
2676
2929
|
"input",
|
|
2677
2930
|
{
|
|
2678
2931
|
type: "number",
|
|
@@ -2683,7 +2936,7 @@ var SpinnerPanel = ({
|
|
|
2683
2936
|
onChange: onHourInput,
|
|
2684
2937
|
onMouseDown: (e) => e.stopPropagation()
|
|
2685
2938
|
}
|
|
2686
|
-
), /* @__PURE__ */
|
|
2939
|
+
), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ React72.createElement(ChevDown, null))), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ React72.createElement(ChevUp, null)), /* @__PURE__ */ React72.createElement(
|
|
2687
2940
|
"input",
|
|
2688
2941
|
{
|
|
2689
2942
|
type: "number",
|
|
@@ -2694,7 +2947,7 @@ var SpinnerPanel = ({
|
|
|
2694
2947
|
onChange: onMinuteInput,
|
|
2695
2948
|
onMouseDown: (e) => e.stopPropagation()
|
|
2696
2949
|
}
|
|
2697
|
-
), /* @__PURE__ */
|
|
2950
|
+
), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ React72.createElement(ChevDown, null))), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ React72.createElement(
|
|
2698
2951
|
"button",
|
|
2699
2952
|
{
|
|
2700
2953
|
type: "button",
|
|
@@ -2703,7 +2956,7 @@ var SpinnerPanel = ({
|
|
|
2703
2956
|
onClick: () => onAmpmToggle("AM")
|
|
2704
2957
|
},
|
|
2705
2958
|
"AM"
|
|
2706
|
-
), /* @__PURE__ */
|
|
2959
|
+
), /* @__PURE__ */ React72.createElement(
|
|
2707
2960
|
"button",
|
|
2708
2961
|
{
|
|
2709
2962
|
type: "button",
|
|
@@ -2725,7 +2978,7 @@ var CalendarBody = ({
|
|
|
2725
2978
|
onMonthSelect,
|
|
2726
2979
|
onYearSelect
|
|
2727
2980
|
}) => {
|
|
2728
|
-
const [pickerView, setPickerView] =
|
|
2981
|
+
const [pickerView, setPickerView] = useState7("calendar");
|
|
2729
2982
|
const handleMonthClick = () => {
|
|
2730
2983
|
setPickerView(pickerView === "month" ? "calendar" : "month");
|
|
2731
2984
|
};
|
|
@@ -2743,21 +2996,21 @@ var CalendarBody = ({
|
|
|
2743
2996
|
const currentYear = todayDate.getFullYear();
|
|
2744
2997
|
const yearStart = viewYear - 6;
|
|
2745
2998
|
const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
|
|
2746
|
-
return /* @__PURE__ */
|
|
2999
|
+
return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ React72.createElement(
|
|
2747
3000
|
"span",
|
|
2748
3001
|
{
|
|
2749
3002
|
className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
|
|
2750
3003
|
onClick: handleMonthClick
|
|
2751
3004
|
},
|
|
2752
3005
|
MONTHS[viewMonth]
|
|
2753
|
-
), /* @__PURE__ */
|
|
3006
|
+
), /* @__PURE__ */ React72.createElement(
|
|
2754
3007
|
"span",
|
|
2755
3008
|
{
|
|
2756
3009
|
className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
|
|
2757
3010
|
onClick: handleYearClick
|
|
2758
3011
|
},
|
|
2759
3012
|
viewYear
|
|
2760
|
-
)), /* @__PURE__ */
|
|
3013
|
+
)), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ React72.createElement(
|
|
2761
3014
|
"button",
|
|
2762
3015
|
{
|
|
2763
3016
|
key: m,
|
|
@@ -2770,7 +3023,7 @@ var CalendarBody = ({
|
|
|
2770
3023
|
onClick: () => handleMonthPick(idx)
|
|
2771
3024
|
},
|
|
2772
3025
|
m
|
|
2773
|
-
))), pickerView === "year" && /* @__PURE__ */
|
|
3026
|
+
))), pickerView === "year" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ React72.createElement(
|
|
2774
3027
|
"button",
|
|
2775
3028
|
{
|
|
2776
3029
|
key: y,
|
|
@@ -2783,12 +3036,12 @@ var CalendarBody = ({
|
|
|
2783
3036
|
onClick: () => handleYearPick(y)
|
|
2784
3037
|
},
|
|
2785
3038
|
y
|
|
2786
|
-
))), pickerView === "calendar" && /* @__PURE__ */
|
|
2787
|
-
if (day === null) return /* @__PURE__ */
|
|
3039
|
+
))), pickerView === "calendar" && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React72.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
|
|
3040
|
+
if (day === null) return /* @__PURE__ */ React72.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
|
|
2788
3041
|
const cellDate = new Date(viewYear, viewMonth, day);
|
|
2789
3042
|
const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
|
|
2790
3043
|
const isToday = isSameDay(cellDate, todayDate);
|
|
2791
|
-
return /* @__PURE__ */
|
|
3044
|
+
return /* @__PURE__ */ React72.createElement(
|
|
2792
3045
|
"button",
|
|
2793
3046
|
{
|
|
2794
3047
|
key: day,
|
|
@@ -2824,29 +3077,29 @@ var DateField = ({
|
|
|
2824
3077
|
sx
|
|
2825
3078
|
}) => {
|
|
2826
3079
|
const sxClass = useSx(sx);
|
|
2827
|
-
const [open, setOpen] =
|
|
2828
|
-
const [selectedDate, setSelectedDate] =
|
|
2829
|
-
const [hour, setHour] =
|
|
3080
|
+
const [open, setOpen] = useState7(false);
|
|
3081
|
+
const [selectedDate, setSelectedDate] = useState7(() => value ? isoToDate(value) : null);
|
|
3082
|
+
const [hour, setHour] = useState7(() => {
|
|
2830
3083
|
if (value && isDatetimeType(type)) return parseTimeFromISO(value).h;
|
|
2831
3084
|
return 12;
|
|
2832
3085
|
});
|
|
2833
|
-
const [minute, setMinute] =
|
|
3086
|
+
const [minute, setMinute] = useState7(() => {
|
|
2834
3087
|
if (value && isDatetimeType(type)) return parseTimeFromISO(value).m;
|
|
2835
3088
|
return 0;
|
|
2836
3089
|
});
|
|
2837
|
-
const [ampm, setAmpm] =
|
|
3090
|
+
const [ampm, setAmpm] = useState7(() => {
|
|
2838
3091
|
if (value && isDatetimeType(type)) return parseTimeFromISO(value).ampm;
|
|
2839
3092
|
return "AM";
|
|
2840
3093
|
});
|
|
2841
|
-
const [viewYear, setViewYear] =
|
|
3094
|
+
const [viewYear, setViewYear] = useState7(() => {
|
|
2842
3095
|
const base = value ? isoToDate(value) : null;
|
|
2843
3096
|
return base ? base.getFullYear() : today().getFullYear();
|
|
2844
3097
|
});
|
|
2845
|
-
const [viewMonth, setViewMonth] =
|
|
3098
|
+
const [viewMonth, setViewMonth] = useState7(() => {
|
|
2846
3099
|
const base = value ? isoToDate(value) : null;
|
|
2847
3100
|
return base ? base.getMonth() : today().getMonth();
|
|
2848
3101
|
});
|
|
2849
|
-
const [inputStr, setInputStr] =
|
|
3102
|
+
const [inputStr, setInputStr] = useState7(() => {
|
|
2850
3103
|
if (!value) return "";
|
|
2851
3104
|
const d = isoToDate(value);
|
|
2852
3105
|
if (!d) return "";
|
|
@@ -2860,12 +3113,12 @@ var DateField = ({
|
|
|
2860
3113
|
const HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0"));
|
|
2861
3114
|
const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
|
|
2862
3115
|
const AMPMS = ["AM", "PM"];
|
|
2863
|
-
const containerRef =
|
|
2864
|
-
const pickerRef =
|
|
2865
|
-
const [dropUp, setDropUp] =
|
|
2866
|
-
const inputId =
|
|
2867
|
-
const isInternalChange =
|
|
2868
|
-
|
|
3116
|
+
const containerRef = useRef6(null);
|
|
3117
|
+
const pickerRef = useRef6(null);
|
|
3118
|
+
const [dropUp, setDropUp] = useState7(false);
|
|
3119
|
+
const inputId = useRef6(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
|
|
3120
|
+
const isInternalChange = useRef6(false);
|
|
3121
|
+
useEffect7(() => {
|
|
2869
3122
|
if (value === void 0) return;
|
|
2870
3123
|
if (isInternalChange.current) {
|
|
2871
3124
|
isInternalChange.current = false;
|
|
@@ -2892,7 +3145,7 @@ var DateField = ({
|
|
|
2892
3145
|
setInputStr(str);
|
|
2893
3146
|
}
|
|
2894
3147
|
}, [value, type]);
|
|
2895
|
-
|
|
3148
|
+
useEffect7(() => {
|
|
2896
3149
|
if (!open) return;
|
|
2897
3150
|
const handler = (e) => {
|
|
2898
3151
|
const target = e.target;
|
|
@@ -2903,14 +3156,14 @@ var DateField = ({
|
|
|
2903
3156
|
document.addEventListener("mousedown", handler);
|
|
2904
3157
|
return () => document.removeEventListener("mousedown", handler);
|
|
2905
3158
|
}, [open]);
|
|
2906
|
-
|
|
3159
|
+
useEffect7(() => {
|
|
2907
3160
|
if (!open || !containerRef.current) return;
|
|
2908
3161
|
const rect = containerRef.current.getBoundingClientRect();
|
|
2909
3162
|
const spaceBelow = window.innerHeight - rect.bottom;
|
|
2910
3163
|
const pickerHeight = 400;
|
|
2911
3164
|
setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
|
|
2912
3165
|
}, [open]);
|
|
2913
|
-
const commitDate =
|
|
3166
|
+
const commitDate = useCallback3((d, h, m, ap) => {
|
|
2914
3167
|
setSelectedDate(d);
|
|
2915
3168
|
if (!d) {
|
|
2916
3169
|
setInputStr("");
|
|
@@ -3061,7 +3314,7 @@ var DateField = ({
|
|
|
3061
3314
|
const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
|
|
3062
3315
|
const todayDate = today();
|
|
3063
3316
|
const isSideVariant = type === "datetime-side" || type === "datetime-scroll";
|
|
3064
|
-
return /* @__PURE__ */
|
|
3317
|
+
return /* @__PURE__ */ React72.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React72.createElement(
|
|
3065
3318
|
"div",
|
|
3066
3319
|
{
|
|
3067
3320
|
className: "rf-text-field__wrapper",
|
|
@@ -3070,7 +3323,7 @@ var DateField = ({
|
|
|
3070
3323
|
},
|
|
3071
3324
|
style: { cursor: disabled ? "default" : "pointer" }
|
|
3072
3325
|
},
|
|
3073
|
-
/* @__PURE__ */
|
|
3326
|
+
/* @__PURE__ */ React72.createElement(
|
|
3074
3327
|
"input",
|
|
3075
3328
|
{
|
|
3076
3329
|
id: inputId,
|
|
@@ -3086,7 +3339,7 @@ var DateField = ({
|
|
|
3086
3339
|
}
|
|
3087
3340
|
}
|
|
3088
3341
|
),
|
|
3089
|
-
/* @__PURE__ */
|
|
3342
|
+
/* @__PURE__ */ React72.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React72.createElement(
|
|
3090
3343
|
"button",
|
|
3091
3344
|
{
|
|
3092
3345
|
type: "button",
|
|
@@ -3099,12 +3352,12 @@ var DateField = ({
|
|
|
3099
3352
|
},
|
|
3100
3353
|
"aria-label": "Pick date"
|
|
3101
3354
|
},
|
|
3102
|
-
/* @__PURE__ */
|
|
3355
|
+
/* @__PURE__ */ React72.createElement(CalendarIcon, null)
|
|
3103
3356
|
)),
|
|
3104
|
-
label && /* @__PURE__ */
|
|
3105
|
-
variant === "outlined" && /* @__PURE__ */
|
|
3357
|
+
label && /* @__PURE__ */ React72.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React72.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
|
|
3358
|
+
variant === "outlined" && /* @__PURE__ */ React72.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ React72.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React72.createElement("span", null, label, required ? " *" : "")))
|
|
3106
3359
|
), open && !disabled && createPortal(
|
|
3107
|
-
/* @__PURE__ */
|
|
3360
|
+
/* @__PURE__ */ React72.createElement(
|
|
3108
3361
|
"div",
|
|
3109
3362
|
{
|
|
3110
3363
|
ref: pickerRef,
|
|
@@ -3129,7 +3382,7 @@ var DateField = ({
|
|
|
3129
3382
|
})(),
|
|
3130
3383
|
onMouseDown: (e) => e.preventDefault()
|
|
3131
3384
|
},
|
|
3132
|
-
/* @__PURE__ */
|
|
3385
|
+
/* @__PURE__ */ React72.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ React72.createElement(
|
|
3133
3386
|
CalendarBody,
|
|
3134
3387
|
{
|
|
3135
3388
|
viewMonth,
|
|
@@ -3143,7 +3396,7 @@ var DateField = ({
|
|
|
3143
3396
|
onMonthSelect: setViewMonth,
|
|
3144
3397
|
onYearSelect: setViewYear
|
|
3145
3398
|
}
|
|
3146
|
-
), type === "datetime" && /* @__PURE__ */
|
|
3399
|
+
), type === "datetime" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React72.createElement(
|
|
3147
3400
|
SpinnerPanel,
|
|
3148
3401
|
{
|
|
3149
3402
|
hour,
|
|
@@ -3155,8 +3408,8 @@ var DateField = ({
|
|
|
3155
3408
|
onMinuteInput: handleMinuteInput,
|
|
3156
3409
|
onAmpmToggle: handleAmpmToggle
|
|
3157
3410
|
}
|
|
3158
|
-
)), /* @__PURE__ */
|
|
3159
|
-
type === "datetime-side" && /* @__PURE__ */
|
|
3411
|
+
)), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
|
|
3412
|
+
type === "datetime-side" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ React72.createElement(
|
|
3160
3413
|
SpinnerPanel,
|
|
3161
3414
|
{
|
|
3162
3415
|
hour,
|
|
@@ -3168,22 +3421,22 @@ var DateField = ({
|
|
|
3168
3421
|
onMinuteInput: handleMinuteInput,
|
|
3169
3422
|
onAmpmToggle: handleAmpmToggle
|
|
3170
3423
|
}
|
|
3171
|
-
)), /* @__PURE__ */
|
|
3172
|
-
type === "datetime-scroll" && /* @__PURE__ */
|
|
3424
|
+
)), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
|
|
3425
|
+
type === "datetime-scroll" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React72.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ React72.createElement(
|
|
3173
3426
|
ScrollColumn,
|
|
3174
3427
|
{
|
|
3175
3428
|
items: HOURS,
|
|
3176
3429
|
selected: hour - 1,
|
|
3177
3430
|
onSelect: handleScrollHour
|
|
3178
3431
|
}
|
|
3179
|
-
), /* @__PURE__ */
|
|
3432
|
+
), /* @__PURE__ */ React72.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ React72.createElement(
|
|
3180
3433
|
ScrollColumn,
|
|
3181
3434
|
{
|
|
3182
3435
|
items: MINUTES,
|
|
3183
3436
|
selected: minute,
|
|
3184
3437
|
onSelect: handleScrollMinute
|
|
3185
3438
|
}
|
|
3186
|
-
), /* @__PURE__ */
|
|
3439
|
+
), /* @__PURE__ */ React72.createElement(
|
|
3187
3440
|
ScrollColumn,
|
|
3188
3441
|
{
|
|
3189
3442
|
items: AMPMS,
|
|
@@ -3191,18 +3444,18 @@ var DateField = ({
|
|
|
3191
3444
|
onSelect: handleScrollAmpm,
|
|
3192
3445
|
infinite: false
|
|
3193
3446
|
}
|
|
3194
|
-
)), /* @__PURE__ */
|
|
3447
|
+
)), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
|
|
3195
3448
|
),
|
|
3196
3449
|
document.body
|
|
3197
|
-
)), helperText && /* @__PURE__ */
|
|
3450
|
+
)), helperText && /* @__PURE__ */ React72.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
3198
3451
|
};
|
|
3199
3452
|
DateField.displayName = "DateField";
|
|
3200
3453
|
|
|
3201
3454
|
// lib/TextFields/DateRangeField.tsx
|
|
3202
|
-
import
|
|
3203
|
-
useState as
|
|
3204
|
-
useRef as
|
|
3205
|
-
useEffect as
|
|
3455
|
+
import React73, {
|
|
3456
|
+
useState as useState8,
|
|
3457
|
+
useRef as useRef7,
|
|
3458
|
+
useEffect as useEffect8
|
|
3206
3459
|
} from "react";
|
|
3207
3460
|
var WEEKDAYS2 = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
|
|
3208
3461
|
var MONTHS2 = [
|
|
@@ -3328,7 +3581,7 @@ var detectPreset = (start, end) => {
|
|
|
3328
3581
|
if (isSameDay2(start, new Date(2e3, 0, 1)) && isSameDay2(end, today2)) return "all";
|
|
3329
3582
|
return null;
|
|
3330
3583
|
};
|
|
3331
|
-
var CalendarIcon2 = () => /* @__PURE__ */
|
|
3584
|
+
var CalendarIcon2 = () => /* @__PURE__ */ React73.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React73.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React73.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React73.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React73.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
|
|
3332
3585
|
var RangeCalendarBody = ({
|
|
3333
3586
|
viewYear,
|
|
3334
3587
|
viewMonth,
|
|
@@ -3353,7 +3606,7 @@ var RangeCalendarBody = ({
|
|
|
3353
3606
|
const hasRange = startDate != null && effectiveEnd != null && !isSameDay2(startDate, effectiveEnd);
|
|
3354
3607
|
const lo = startDate && effectiveEnd ? startDate <= effectiveEnd ? startDate : effectiveEnd : null;
|
|
3355
3608
|
const hi = startDate && effectiveEnd ? startDate <= effectiveEnd ? effectiveEnd : startDate : null;
|
|
3356
|
-
return /* @__PURE__ */
|
|
3609
|
+
return /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ React73.createElement(
|
|
3357
3610
|
"button",
|
|
3358
3611
|
{
|
|
3359
3612
|
type: "button",
|
|
@@ -3363,7 +3616,7 @@ var RangeCalendarBody = ({
|
|
|
3363
3616
|
"aria-label": "Previous month"
|
|
3364
3617
|
},
|
|
3365
3618
|
"\u2039"
|
|
3366
|
-
), /* @__PURE__ */
|
|
3619
|
+
), /* @__PURE__ */ React73.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React73.createElement(
|
|
3367
3620
|
"button",
|
|
3368
3621
|
{
|
|
3369
3622
|
type: "button",
|
|
@@ -3373,9 +3626,9 @@ var RangeCalendarBody = ({
|
|
|
3373
3626
|
"aria-label": "Next month"
|
|
3374
3627
|
},
|
|
3375
3628
|
"\u203A"
|
|
3376
|
-
)), /* @__PURE__ */
|
|
3629
|
+
)), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React73.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
|
|
3377
3630
|
if (day === null) {
|
|
3378
|
-
return /* @__PURE__ */
|
|
3631
|
+
return /* @__PURE__ */ React73.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
|
|
3379
3632
|
}
|
|
3380
3633
|
const cellDate = new Date(viewYear, viewMonth, day);
|
|
3381
3634
|
const isStart = startDate ? isSameDay2(cellDate, startDate) : false;
|
|
@@ -3395,7 +3648,7 @@ var RangeCalendarBody = ({
|
|
|
3395
3648
|
isStart || isEnd ? "rf-dr-calendar__day--selected" : "",
|
|
3396
3649
|
isToday && !isStart && !isEnd ? "rf-dr-calendar__day--today" : ""
|
|
3397
3650
|
].filter(Boolean).join(" ");
|
|
3398
|
-
return /* @__PURE__ */
|
|
3651
|
+
return /* @__PURE__ */ React73.createElement(
|
|
3399
3652
|
"div",
|
|
3400
3653
|
{
|
|
3401
3654
|
key: day,
|
|
@@ -3403,7 +3656,7 @@ var RangeCalendarBody = ({
|
|
|
3403
3656
|
onMouseEnter: () => onDayHover(cellDate),
|
|
3404
3657
|
onMouseLeave: () => onDayHover(null)
|
|
3405
3658
|
},
|
|
3406
|
-
/* @__PURE__ */
|
|
3659
|
+
/* @__PURE__ */ React73.createElement(
|
|
3407
3660
|
"button",
|
|
3408
3661
|
{
|
|
3409
3662
|
type: "button",
|
|
@@ -3417,8 +3670,8 @@ var RangeCalendarBody = ({
|
|
|
3417
3670
|
};
|
|
3418
3671
|
var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
|
|
3419
3672
|
const init = selectedDate ?? todayDate;
|
|
3420
|
-
const [viewYear, setViewYear] =
|
|
3421
|
-
const [viewMonth, setViewMonth] =
|
|
3673
|
+
const [viewYear, setViewYear] = useState8(init.getFullYear());
|
|
3674
|
+
const [viewMonth, setViewMonth] = useState8(init.getMonth());
|
|
3422
3675
|
const firstDay = new Date(viewYear, viewMonth, 1).getDay();
|
|
3423
3676
|
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
3424
3677
|
const dayCells = [
|
|
@@ -3437,14 +3690,14 @@ var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
|
|
|
3437
3690
|
setViewYear((y) => y + 1);
|
|
3438
3691
|
} else setViewMonth((m) => m + 1);
|
|
3439
3692
|
};
|
|
3440
|
-
return /* @__PURE__ */
|
|
3693
|
+
return /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ React73.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ React73.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React73.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React73.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
|
|
3441
3694
|
if (day === null) {
|
|
3442
|
-
return /* @__PURE__ */
|
|
3695
|
+
return /* @__PURE__ */ React73.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
|
|
3443
3696
|
}
|
|
3444
3697
|
const cellDate = new Date(viewYear, viewMonth, day);
|
|
3445
3698
|
const isSel = selectedDate ? isSameDay2(cellDate, selectedDate) : false;
|
|
3446
3699
|
const isToday = isSameDay2(cellDate, todayDate);
|
|
3447
|
-
return /* @__PURE__ */
|
|
3700
|
+
return /* @__PURE__ */ React73.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ React73.createElement(
|
|
3448
3701
|
"button",
|
|
3449
3702
|
{
|
|
3450
3703
|
type: "button",
|
|
@@ -3483,22 +3736,22 @@ var DateRangeField = ({
|
|
|
3483
3736
|
const today2 = todayFn();
|
|
3484
3737
|
const committedStart = value?.start ? isoToDate2(value.start) : null;
|
|
3485
3738
|
const committedEnd = value?.end ? isoToDate2(value.end) : null;
|
|
3486
|
-
const [open, setOpen] =
|
|
3487
|
-
const [draftStart, setDraftStart] =
|
|
3488
|
-
const [draftEnd, setDraftEnd] =
|
|
3489
|
-
const [activePreset, setActivePreset] =
|
|
3739
|
+
const [open, setOpen] = useState8(false);
|
|
3740
|
+
const [draftStart, setDraftStart] = useState8(committedStart);
|
|
3741
|
+
const [draftEnd, setDraftEnd] = useState8(committedEnd);
|
|
3742
|
+
const [activePreset, setActivePreset] = useState8(
|
|
3490
3743
|
() => detectPreset(committedStart, committedEnd)
|
|
3491
3744
|
);
|
|
3492
|
-
const [startInputStr, setStartInputStr] =
|
|
3493
|
-
const [endInputStr, setEndInputStr] =
|
|
3494
|
-
const [inlineCal, setInlineCal] =
|
|
3495
|
-
const [hoverDate, setHoverDate] =
|
|
3496
|
-
const [selecting, setSelecting] =
|
|
3497
|
-
const [leftViewYear, setLeftViewYear] =
|
|
3498
|
-
const [leftViewMonth, setLeftViewMonth] =
|
|
3499
|
-
const containerRef =
|
|
3500
|
-
const inputId =
|
|
3501
|
-
|
|
3745
|
+
const [startInputStr, setStartInputStr] = useState8(() => committedStart ? formatShort(committedStart) : "");
|
|
3746
|
+
const [endInputStr, setEndInputStr] = useState8(() => committedEnd ? formatShort(committedEnd) : "");
|
|
3747
|
+
const [inlineCal, setInlineCal] = useState8(null);
|
|
3748
|
+
const [hoverDate, setHoverDate] = useState8(null);
|
|
3749
|
+
const [selecting, setSelecting] = useState8("start");
|
|
3750
|
+
const [leftViewYear, setLeftViewYear] = useState8(() => today2.getFullYear());
|
|
3751
|
+
const [leftViewMonth, setLeftViewMonth] = useState8(() => today2.getMonth());
|
|
3752
|
+
const containerRef = useRef7(null);
|
|
3753
|
+
const inputId = useRef7(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
|
|
3754
|
+
useEffect8(() => {
|
|
3502
3755
|
const s2 = value?.start ? isoToDate2(value.start) : null;
|
|
3503
3756
|
const e = value?.end ? isoToDate2(value.end) : null;
|
|
3504
3757
|
setDraftStart(s2);
|
|
@@ -3507,10 +3760,10 @@ var DateRangeField = ({
|
|
|
3507
3760
|
setEndInputStr(e ? formatShort(e) : "");
|
|
3508
3761
|
setActivePreset(detectPreset(s2, e));
|
|
3509
3762
|
}, [value?.start, value?.end]);
|
|
3510
|
-
|
|
3763
|
+
useEffect8(() => {
|
|
3511
3764
|
setActivePreset(detectPreset(draftStart, draftEnd));
|
|
3512
3765
|
}, [draftStart?.getTime(), draftEnd?.getTime()]);
|
|
3513
|
-
|
|
3766
|
+
useEffect8(() => {
|
|
3514
3767
|
if (!open) return;
|
|
3515
3768
|
const handler = (e) => {
|
|
3516
3769
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
@@ -3652,7 +3905,7 @@ var DateRangeField = ({
|
|
|
3652
3905
|
className
|
|
3653
3906
|
].filter(Boolean).join(" ");
|
|
3654
3907
|
const inputPlaceholder = variant === "outlined" ? " " : void 0;
|
|
3655
|
-
return /* @__PURE__ */
|
|
3908
|
+
return /* @__PURE__ */ React73.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React73.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React73.createElement(
|
|
3656
3909
|
"div",
|
|
3657
3910
|
{
|
|
3658
3911
|
className: "rf-text-field__wrapper",
|
|
@@ -3661,7 +3914,7 @@ var DateRangeField = ({
|
|
|
3661
3914
|
},
|
|
3662
3915
|
style: { cursor: disabled ? "default" : "pointer" }
|
|
3663
3916
|
},
|
|
3664
|
-
/* @__PURE__ */
|
|
3917
|
+
/* @__PURE__ */ React73.createElement(
|
|
3665
3918
|
"input",
|
|
3666
3919
|
{
|
|
3667
3920
|
id: inputId,
|
|
@@ -3677,7 +3930,7 @@ var DateRangeField = ({
|
|
|
3677
3930
|
}
|
|
3678
3931
|
}
|
|
3679
3932
|
),
|
|
3680
|
-
/* @__PURE__ */
|
|
3933
|
+
/* @__PURE__ */ React73.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React73.createElement(
|
|
3681
3934
|
"button",
|
|
3682
3935
|
{
|
|
3683
3936
|
type: "button",
|
|
@@ -3690,13 +3943,13 @@ var DateRangeField = ({
|
|
|
3690
3943
|
},
|
|
3691
3944
|
"aria-label": "Pick date range"
|
|
3692
3945
|
},
|
|
3693
|
-
/* @__PURE__ */
|
|
3946
|
+
/* @__PURE__ */ React73.createElement(CalendarIcon2, null)
|
|
3694
3947
|
)),
|
|
3695
|
-
label && /* @__PURE__ */
|
|
3696
|
-
variant === "outlined" && /* @__PURE__ */
|
|
3948
|
+
label && /* @__PURE__ */ React73.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React73.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
|
|
3949
|
+
variant === "outlined" && /* @__PURE__ */ React73.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React73.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React73.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React73.createElement("legend", { className: "rf-text-field__legend--empty" }))
|
|
3697
3950
|
), open && !disabled && (pickerType === "panel" ? (
|
|
3698
3951
|
/* ── Panel Mode ── */
|
|
3699
|
-
/* @__PURE__ */
|
|
3952
|
+
/* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ React73.createElement(React73.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ React73.createElement(
|
|
3700
3953
|
"button",
|
|
3701
3954
|
{
|
|
3702
3955
|
type: "button",
|
|
@@ -3707,7 +3960,7 @@ var DateRangeField = ({
|
|
|
3707
3960
|
onClick: () => handlePreset(p.id)
|
|
3708
3961
|
},
|
|
3709
3962
|
p.label
|
|
3710
|
-
)))), /* @__PURE__ */
|
|
3963
|
+
)))), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React73.createElement(
|
|
3711
3964
|
"div",
|
|
3712
3965
|
{
|
|
3713
3966
|
className: [
|
|
@@ -3715,8 +3968,8 @@ var DateRangeField = ({
|
|
|
3715
3968
|
inlineCal === "start" ? "rf-dr-picker__date-field--active" : ""
|
|
3716
3969
|
].filter(Boolean).join(" ")
|
|
3717
3970
|
},
|
|
3718
|
-
/* @__PURE__ */
|
|
3719
|
-
/* @__PURE__ */
|
|
3971
|
+
/* @__PURE__ */ React73.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
|
|
3972
|
+
/* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React73.createElement(
|
|
3720
3973
|
"input",
|
|
3721
3974
|
{
|
|
3722
3975
|
type: "text",
|
|
@@ -3727,7 +3980,7 @@ var DateRangeField = ({
|
|
|
3727
3980
|
onBlur: handleStartInputBlur,
|
|
3728
3981
|
onMouseDown: (e) => e.stopPropagation()
|
|
3729
3982
|
}
|
|
3730
|
-
), /* @__PURE__ */
|
|
3983
|
+
), /* @__PURE__ */ React73.createElement(
|
|
3731
3984
|
"button",
|
|
3732
3985
|
{
|
|
3733
3986
|
type: "button",
|
|
@@ -3736,9 +3989,9 @@ var DateRangeField = ({
|
|
|
3736
3989
|
onClick: () => setInlineCal((v) => v === "start" ? null : "start"),
|
|
3737
3990
|
"aria-label": "Pick start date"
|
|
3738
3991
|
},
|
|
3739
|
-
/* @__PURE__ */
|
|
3992
|
+
/* @__PURE__ */ React73.createElement(CalendarIcon2, null)
|
|
3740
3993
|
))
|
|
3741
|
-
), inlineCal === "start" && /* @__PURE__ */
|
|
3994
|
+
), inlineCal === "start" && /* @__PURE__ */ React73.createElement(
|
|
3742
3995
|
MiniCalendar,
|
|
3743
3996
|
{
|
|
3744
3997
|
selectedDate: draftStart,
|
|
@@ -3749,7 +4002,7 @@ var DateRangeField = ({
|
|
|
3749
4002
|
},
|
|
3750
4003
|
onClose: () => setInlineCal(null)
|
|
3751
4004
|
}
|
|
3752
|
-
)), /* @__PURE__ */
|
|
4005
|
+
)), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React73.createElement(
|
|
3753
4006
|
"div",
|
|
3754
4007
|
{
|
|
3755
4008
|
className: [
|
|
@@ -3757,8 +4010,8 @@ var DateRangeField = ({
|
|
|
3757
4010
|
inlineCal === "end" ? "rf-dr-picker__date-field--active" : ""
|
|
3758
4011
|
].filter(Boolean).join(" ")
|
|
3759
4012
|
},
|
|
3760
|
-
/* @__PURE__ */
|
|
3761
|
-
/* @__PURE__ */
|
|
4013
|
+
/* @__PURE__ */ React73.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
|
|
4014
|
+
/* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React73.createElement(
|
|
3762
4015
|
"input",
|
|
3763
4016
|
{
|
|
3764
4017
|
type: "text",
|
|
@@ -3769,7 +4022,7 @@ var DateRangeField = ({
|
|
|
3769
4022
|
onBlur: handleEndInputBlur,
|
|
3770
4023
|
onMouseDown: (e) => e.stopPropagation()
|
|
3771
4024
|
}
|
|
3772
|
-
), /* @__PURE__ */
|
|
4025
|
+
), /* @__PURE__ */ React73.createElement(
|
|
3773
4026
|
"button",
|
|
3774
4027
|
{
|
|
3775
4028
|
type: "button",
|
|
@@ -3778,9 +4031,9 @@ var DateRangeField = ({
|
|
|
3778
4031
|
onClick: () => setInlineCal((v) => v === "end" ? null : "end"),
|
|
3779
4032
|
"aria-label": "Pick end date"
|
|
3780
4033
|
},
|
|
3781
|
-
/* @__PURE__ */
|
|
4034
|
+
/* @__PURE__ */ React73.createElement(CalendarIcon2, null)
|
|
3782
4035
|
))
|
|
3783
|
-
), inlineCal === "end" && /* @__PURE__ */
|
|
4036
|
+
), inlineCal === "end" && /* @__PURE__ */ React73.createElement(
|
|
3784
4037
|
MiniCalendar,
|
|
3785
4038
|
{
|
|
3786
4039
|
selectedDate: draftEnd,
|
|
@@ -3791,7 +4044,7 @@ var DateRangeField = ({
|
|
|
3791
4044
|
},
|
|
3792
4045
|
onClose: () => setInlineCal(null)
|
|
3793
4046
|
}
|
|
3794
|
-
)), !inlineCal && /* @__PURE__ */
|
|
4047
|
+
)), !inlineCal && /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React73.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ React73.createElement(
|
|
3795
4048
|
"input",
|
|
3796
4049
|
{
|
|
3797
4050
|
type: "number",
|
|
@@ -3802,7 +4055,7 @@ var DateRangeField = ({
|
|
|
3802
4055
|
onMouseDown: (e) => e.stopPropagation(),
|
|
3803
4056
|
placeholder: "\u2014"
|
|
3804
4057
|
}
|
|
3805
|
-
)), /* @__PURE__ */
|
|
4058
|
+
)), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React73.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ React73.createElement(
|
|
3806
4059
|
"input",
|
|
3807
4060
|
{
|
|
3808
4061
|
type: "number",
|
|
@@ -3813,10 +4066,10 @@ var DateRangeField = ({
|
|
|
3813
4066
|
onMouseDown: (e) => e.stopPropagation(),
|
|
3814
4067
|
placeholder: "\u2014"
|
|
3815
4068
|
}
|
|
3816
|
-
))), /* @__PURE__ */
|
|
4069
|
+
))), /* @__PURE__ */ React73.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ React73.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React73.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
|
|
3817
4070
|
) : (
|
|
3818
4071
|
/* ── Calendar Mode ── */
|
|
3819
|
-
/* @__PURE__ */
|
|
4072
|
+
/* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ React73.createElement(
|
|
3820
4073
|
RangeCalendarBody,
|
|
3821
4074
|
{
|
|
3822
4075
|
viewYear: leftViewYear,
|
|
@@ -3831,7 +4084,7 @@ var DateRangeField = ({
|
|
|
3831
4084
|
onNext: nextMonth,
|
|
3832
4085
|
showNext: false
|
|
3833
4086
|
}
|
|
3834
|
-
), /* @__PURE__ */
|
|
4087
|
+
), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ React73.createElement(
|
|
3835
4088
|
RangeCalendarBody,
|
|
3836
4089
|
{
|
|
3837
4090
|
viewYear: rightViewYear,
|
|
@@ -3846,19 +4099,19 @@ var DateRangeField = ({
|
|
|
3846
4099
|
onNext: nextMonth,
|
|
3847
4100
|
showPrev: false
|
|
3848
4101
|
}
|
|
3849
|
-
)), selecting === "end" && draftStart && /* @__PURE__ */
|
|
3850
|
-
))), helperText && /* @__PURE__ */
|
|
4102
|
+
)), selecting === "end" && draftStart && /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ React73.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ React73.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ React73.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ React73.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ React73.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ React73.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ React73.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React73.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React73.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
|
|
4103
|
+
))), helperText && /* @__PURE__ */ React73.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
3851
4104
|
};
|
|
3852
4105
|
DateRangeField.displayName = "DateRangeField";
|
|
3853
4106
|
|
|
3854
4107
|
// lib/Progress/RufousLogoLoader.tsx
|
|
3855
|
-
import * as
|
|
4108
|
+
import * as React74 from "react";
|
|
3856
4109
|
var _uid = 0;
|
|
3857
4110
|
var RufousLogoLoader = ({ size = 80, sx, className }) => {
|
|
3858
|
-
const clipId =
|
|
4111
|
+
const clipId = React74.useRef(`rll-${++_uid}`).current;
|
|
3859
4112
|
const height = size * (38.795 / 54.585);
|
|
3860
4113
|
const sxClass = useSx(sx);
|
|
3861
|
-
return /* @__PURE__ */
|
|
4114
|
+
return /* @__PURE__ */ React74.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size, height } }, /* @__PURE__ */ React74.createElement(
|
|
3862
4115
|
"svg",
|
|
3863
4116
|
{
|
|
3864
4117
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3867,14 +4120,14 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
|
|
|
3867
4120
|
height,
|
|
3868
4121
|
className: "rufous-logo-loader__svg"
|
|
3869
4122
|
},
|
|
3870
|
-
/* @__PURE__ */
|
|
4123
|
+
/* @__PURE__ */ React74.createElement("defs", null, /* @__PURE__ */ React74.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React74.createElement(
|
|
3871
4124
|
"path",
|
|
3872
4125
|
{
|
|
3873
4126
|
transform: "translate(2208 18.205)",
|
|
3874
4127
|
d: "M.7,38.8a3.783,3.783,0,0,1-.5-.045l-.031,0A.26.26,0,0,1,0,38.564a.279.279,0,0,1,.14-.2c.222-.126.45-.251.671-.371l.047-.026c.357-.194.8-.435,1.209-.685.783-.479,1.565-.993,2.32-1.489l.033-.022.218-.143.49-.32c.575-.374,1.226-.8,1.824-1.241.98-.726,1.834-1.407,2.611-2.081a22.444,22.444,0,0,0,1.783-1.774A14.2,14.2,0,0,0,12.5,28.749l.012-.016a15.8,15.8,0,0,0,1.151-1.8,10.351,10.351,0,0,0,.586-1.511l0-.011.092-.278a4.425,4.425,0,0,0,.14-.583l.007-.036c.024-.119.048-.243.079-.363a4.639,4.639,0,0,0-.034-2.566c-.064-.212-.126-.43-.184-.636l-.008-.028c-.111-.391-.225-.8-.369-1.181a8.71,8.71,0,0,0-2.279-3.24,14.363,14.363,0,0,0-3.239-2.326c-.75-.4-1.553-.727-2.329-1.046L6.1,13.114l-.157-.065c-.294-.122-.6-.221-.9-.318l-.025-.008c-.19-.061-.427-.136-.649-.218-.108-.04-.265-.172-.252-.229a.7.7,0,0,1,.235-.4.915.915,0,0,1,.449-.112c.383-.029.77-.063,1.165-.1.969-.085,1.971-.174,2.962-.181h.119a13.145,13.145,0,0,1,2.907.315,11.888,11.888,0,0,1,3.128,1.123,10.286,10.286,0,0,1,2.3,1.554.92.92,0,0,1,.273.4,12.722,12.722,0,0,1,.458,3.3c-.009,1.494-.014,2.867-.014,4.2,0,.309.013.588.039.852a1.013,1.013,0,0,0,.078.26l0,.01c.027.067.051.129.077.207.029-.064.054-.116.076-.161l.009-.017.006-.012a.823.823,0,0,0,.076-.189c.051-.247.1-.494.164-.767.136-.618.276-1.257.359-1.9a24.362,24.362,0,0,0,0-6.777,13.01,13.01,0,0,0-.559-2.1c-.061-.185-.125-.382-.187-.579a9.42,9.42,0,0,0-.583-1.469c-.367-.727-.786-1.449-1.184-2.126a9.376,9.376,0,0,0-.643-.918c-.076-.1-.151-.2-.224-.3L15.548,6.3a8.128,8.128,0,0,0-.865-1.057,32.021,32.021,0,0,0-2.466-2.183,12.673,12.673,0,0,0-1.905-1.188c-.48-.256-1-.485-1.462-.687-.221-.1-.457-.2-.683-.306a.663.663,0,0,1-.11-.071L8.039.795c-.027-.02-.058-.043-.1-.069L8.062.667,8.108.644a1.786,1.786,0,0,1,.27-.12A11.679,11.679,0,0,1,11.866,0a13.332,13.332,0,0,1,1.769.121A13.927,13.927,0,0,1,15.9.693l.471.147a10.775,10.775,0,0,1,1.656.658,9.622,9.622,0,0,1,1.768,1.041,32.024,32.024,0,0,1,3.092,2.717,25.62,25.62,0,0,1,2.245,2.829l.084.117c.617.86,1.171,1.777,1.678,2.641.255.435.484.9.687,1.3.14.281.285.572.436.854.262.491.534.977.835,1.516l.005.01q.169.3.337.6c.064.116.13.232.2.347l.027.047c.12.212.244.431.357.651a8.518,8.518,0,0,0,2.121,2.695c.065.024.137.054.212.086l.013.006a1.268,1.268,0,0,0,.376.123.087.087,0,0,0,.063-.02.209.209,0,0,0,.083-.151c0-.083-.08-.153-.157-.22a.694.694,0,0,1-.135-.142c-.134-.216-.273-.436-.407-.649l-.063-.1c-.373-.587-.8-1.251-1.157-1.923s-.666-1.373-.964-2.057l0-.008q-.123-.284-.247-.564a1.707,1.707,0,0,1,.239-1.554l.026-.046.005-.009A12.918,12.918,0,0,1,31.408,9.3,7.814,7.814,0,0,1,33.75,7.612a5.391,5.391,0,0,1,2.218-.444,11.369,11.369,0,0,1,1.882.186,9.211,9.211,0,0,1,2.845,1.022c.138.071.261.135.373.188a4.155,4.155,0,0,0,1.849.464h.093c1.993-.052,4-.14,5.95-.224l.846-.036c.9-.038,1.808-.066,2.682-.093L52.7,8.67l1.007-.031h.041a1.787,1.787,0,0,1,.73.163c.1.051.109.256.109.318,0,.081-.147.169-.257.175-.466.028-.994.043-1.485.043a37.855,37.855,0,0,0-6.3.577A9.221,9.221,0,0,0,42.7,11.3a7.884,7.884,0,0,0-1.565,1.5c-.593.743-1.116,1.545-1.621,2.321l-.121.185c-.228.35-.435.709-.662,1.109l-.041.071c-.136.236-.276.481-.42.717l-.007.012c-.349.572-.709,1.162-1.1,1.716l-.216.307-.01.014a21.585,21.585,0,0,1-1.451,1.907c-1.317,1.485-2.538,2.8-3.734,4.006a30.822,30.822,0,0,1-2.5,2.207c-.548.446-1.139.86-1.71,1.26l-.01.007q-.254.177-.5.355c-.536.379-1.109.78-1.7,1.157-.545.35-1.143.71-1.828,1.1-.842.483-1.586.9-2.275,1.26-.271.144-.553.272-.868.412-.13.058-.3.135-.467.213a6.838,6.838,0,0,1-1.18.3,5.079,5.079,0,0,1,.647-.771l.008-.008c.132-.136.251-.26.365-.393l.048-.056c.566-.667,1.151-1.357,1.7-2.059s1.126-1.439,1.649-2.2c.4-.579.749-1.2,1.134-1.888l.016-.028c.406-.734.826-1.493,1.181-2.266.274-.6.733-1.787.866-2.189l.023-.07c.13-.389.215-.646-.013-.916a.369.369,0,0,1-.041.031l0,0c-.028.021-.055.041-.058.065a2.307,2.307,0,0,1-.146.5,5.257,5.257,0,0,1-.374.709c-.281.468-.536.959-.782,1.434-.2.385-.379.731-.57,1.069a20.042,20.042,0,0,1-1.161,1.871,30.689,30.689,0,0,1-1.985,2.531c-.74.821-1.567,1.648-2.6,2.6a21.448,21.448,0,0,1-2.1,1.669c-.85.606-1.754,1.2-2.688,1.768a17.867,17.867,0,0,1-1.993,1.037c-.994.445-2.066.891-3.185,1.324a12.127,12.127,0,0,1-1.714.514c-.955.213-1.969.413-3.1.611-1.023.18-2.054.328-2.927.449A1.41,1.41,0,0,1,.7,38.8ZM37.945,10.58l-.007,0a.583.583,0,0,0-.223.048.677.677,0,0,0-.437.555.637.637,0,0,0,.426.527.621.621,0,0,0,.209.046h.016a.72.72,0,0,0,.464-.194.676.676,0,0,0,.194-.282l0-.011,0-.005,0-.006,0-.009a.415.415,0,0,0,.014-.109.734.734,0,0,0-.657-.56Z"
|
|
3875
4128
|
}
|
|
3876
4129
|
))),
|
|
3877
|
-
/* @__PURE__ */
|
|
4130
|
+
/* @__PURE__ */ React74.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React74.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
|
|
3878
4131
|
));
|
|
3879
4132
|
};
|
|
3880
4133
|
|
|
@@ -3898,238 +4151,6 @@ import {
|
|
|
3898
4151
|
Trash2,
|
|
3899
4152
|
Plus
|
|
3900
4153
|
} from "lucide-react";
|
|
3901
|
-
|
|
3902
|
-
// lib/Tooltip/Tooltip.tsx
|
|
3903
|
-
import React74, {
|
|
3904
|
-
useCallback as useCallback3,
|
|
3905
|
-
useEffect as useEffect8,
|
|
3906
|
-
useRef as useRef8,
|
|
3907
|
-
useState as useState8
|
|
3908
|
-
} from "react";
|
|
3909
|
-
import ReactDOM3 from "react-dom";
|
|
3910
|
-
var GAP = 8;
|
|
3911
|
-
function computePosition(anchor, tooltip, placement) {
|
|
3912
|
-
const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
|
|
3913
|
-
const { width: tW, height: tH } = tooltip;
|
|
3914
|
-
let top = 0;
|
|
3915
|
-
let left = 0;
|
|
3916
|
-
let arrowLeft;
|
|
3917
|
-
let arrowTop;
|
|
3918
|
-
switch (placement) {
|
|
3919
|
-
case "top":
|
|
3920
|
-
top = aTop - tH - GAP;
|
|
3921
|
-
left = aLeft + aW / 2 - tW / 2;
|
|
3922
|
-
arrowLeft = tW / 2 - 4;
|
|
3923
|
-
break;
|
|
3924
|
-
case "top-start":
|
|
3925
|
-
top = aTop - tH - GAP;
|
|
3926
|
-
left = aLeft;
|
|
3927
|
-
arrowLeft = Math.min(aW / 2, tW - 16);
|
|
3928
|
-
break;
|
|
3929
|
-
case "top-end":
|
|
3930
|
-
top = aTop - tH - GAP;
|
|
3931
|
-
left = aLeft + aW - tW;
|
|
3932
|
-
arrowLeft = Math.max(tW - aW / 2 - 4, 8);
|
|
3933
|
-
break;
|
|
3934
|
-
case "bottom":
|
|
3935
|
-
top = aTop + aH + GAP;
|
|
3936
|
-
left = aLeft + aW / 2 - tW / 2;
|
|
3937
|
-
arrowLeft = tW / 2 - 4;
|
|
3938
|
-
break;
|
|
3939
|
-
case "bottom-start":
|
|
3940
|
-
top = aTop + aH + GAP;
|
|
3941
|
-
left = aLeft;
|
|
3942
|
-
arrowLeft = Math.min(aW / 2, tW - 16);
|
|
3943
|
-
break;
|
|
3944
|
-
case "bottom-end":
|
|
3945
|
-
top = aTop + aH + GAP;
|
|
3946
|
-
left = aLeft + aW - tW;
|
|
3947
|
-
arrowLeft = Math.max(tW - aW / 2 - 4, 8);
|
|
3948
|
-
break;
|
|
3949
|
-
case "left":
|
|
3950
|
-
top = aTop + aH / 2 - tH / 2;
|
|
3951
|
-
left = aLeft - tW - GAP;
|
|
3952
|
-
arrowTop = tH / 2 - 4;
|
|
3953
|
-
break;
|
|
3954
|
-
case "left-start":
|
|
3955
|
-
top = aTop;
|
|
3956
|
-
left = aLeft - tW - GAP;
|
|
3957
|
-
arrowTop = Math.min(aH / 2, tH - 16);
|
|
3958
|
-
break;
|
|
3959
|
-
case "left-end":
|
|
3960
|
-
top = aTop + aH - tH;
|
|
3961
|
-
left = aLeft - tW - GAP;
|
|
3962
|
-
arrowTop = Math.max(tH - aH / 2 - 4, 8);
|
|
3963
|
-
break;
|
|
3964
|
-
case "right":
|
|
3965
|
-
top = aTop + aH / 2 - tH / 2;
|
|
3966
|
-
left = aLeft + aW + GAP;
|
|
3967
|
-
arrowTop = tH / 2 - 4;
|
|
3968
|
-
break;
|
|
3969
|
-
case "right-start":
|
|
3970
|
-
top = aTop;
|
|
3971
|
-
left = aLeft + aW + GAP;
|
|
3972
|
-
arrowTop = Math.min(aH / 2, tH - 16);
|
|
3973
|
-
break;
|
|
3974
|
-
case "right-end":
|
|
3975
|
-
top = aTop + aH - tH;
|
|
3976
|
-
left = aLeft + aW + GAP;
|
|
3977
|
-
arrowTop = Math.max(tH - aH / 2 - 4, 8);
|
|
3978
|
-
break;
|
|
3979
|
-
default:
|
|
3980
|
-
top = aTop - tH - GAP;
|
|
3981
|
-
left = aLeft + aW / 2 - tW / 2;
|
|
3982
|
-
}
|
|
3983
|
-
const vw = window.innerWidth;
|
|
3984
|
-
const vh = window.innerHeight;
|
|
3985
|
-
left = Math.max(8, Math.min(left, vw - tW - 8));
|
|
3986
|
-
top = Math.max(8, Math.min(top, vh - tH - 8));
|
|
3987
|
-
return { top, left, arrowLeft, arrowTop };
|
|
3988
|
-
}
|
|
3989
|
-
var Tooltip = ({
|
|
3990
|
-
title,
|
|
3991
|
-
placement = "top",
|
|
3992
|
-
arrow = false,
|
|
3993
|
-
open: controlledOpen,
|
|
3994
|
-
disableHoverListener = false,
|
|
3995
|
-
disableFocusListener = false,
|
|
3996
|
-
enterDelay = 100,
|
|
3997
|
-
leaveDelay = 0,
|
|
3998
|
-
children,
|
|
3999
|
-
followCursor = false,
|
|
4000
|
-
className = "",
|
|
4001
|
-
style,
|
|
4002
|
-
sx
|
|
4003
|
-
}) => {
|
|
4004
|
-
const sxClass = useSx(sx);
|
|
4005
|
-
const [internalOpen, setInternalOpen] = useState8(false);
|
|
4006
|
-
const [position, setPosition] = useState8({ top: 0, left: 0 });
|
|
4007
|
-
const anchorRef = useRef8(null);
|
|
4008
|
-
const tooltipRef = useRef8(null);
|
|
4009
|
-
const enterTimer = useRef8(null);
|
|
4010
|
-
const leaveTimer = useRef8(null);
|
|
4011
|
-
const cursorPos = useRef8({ x: 0, y: 0 });
|
|
4012
|
-
const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
|
|
4013
|
-
const clearTimers = useCallback3(() => {
|
|
4014
|
-
if (enterTimer.current) clearTimeout(enterTimer.current);
|
|
4015
|
-
if (leaveTimer.current) clearTimeout(leaveTimer.current);
|
|
4016
|
-
}, []);
|
|
4017
|
-
const updatePosition = useCallback3(() => {
|
|
4018
|
-
if (!anchorRef.current || !tooltipRef.current) return;
|
|
4019
|
-
const anchorRect = anchorRef.current.getBoundingClientRect();
|
|
4020
|
-
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
4021
|
-
if (followCursor) {
|
|
4022
|
-
const fakeRect = {
|
|
4023
|
-
top: cursorPos.current.y,
|
|
4024
|
-
left: cursorPos.current.x,
|
|
4025
|
-
right: cursorPos.current.x,
|
|
4026
|
-
bottom: cursorPos.current.y,
|
|
4027
|
-
width: 0,
|
|
4028
|
-
height: 0,
|
|
4029
|
-
x: cursorPos.current.x,
|
|
4030
|
-
y: cursorPos.current.y,
|
|
4031
|
-
toJSON: () => ({})
|
|
4032
|
-
};
|
|
4033
|
-
setPosition(computePosition(fakeRect, tooltipRect, placement));
|
|
4034
|
-
} else {
|
|
4035
|
-
setPosition(computePosition(anchorRect, tooltipRect, placement));
|
|
4036
|
-
}
|
|
4037
|
-
}, [placement, followCursor]);
|
|
4038
|
-
useEffect8(() => {
|
|
4039
|
-
if (isOpen) {
|
|
4040
|
-
requestAnimationFrame(() => {
|
|
4041
|
-
updatePosition();
|
|
4042
|
-
});
|
|
4043
|
-
}
|
|
4044
|
-
}, [isOpen, updatePosition]);
|
|
4045
|
-
const handleOpen = useCallback3(() => {
|
|
4046
|
-
clearTimers();
|
|
4047
|
-
if (enterDelay > 0) {
|
|
4048
|
-
enterTimer.current = setTimeout(() => {
|
|
4049
|
-
setInternalOpen(true);
|
|
4050
|
-
}, enterDelay);
|
|
4051
|
-
} else {
|
|
4052
|
-
setInternalOpen(true);
|
|
4053
|
-
}
|
|
4054
|
-
}, [enterDelay, clearTimers]);
|
|
4055
|
-
const handleClose = useCallback3(() => {
|
|
4056
|
-
clearTimers();
|
|
4057
|
-
if (leaveDelay > 0) {
|
|
4058
|
-
leaveTimer.current = setTimeout(() => {
|
|
4059
|
-
setInternalOpen(false);
|
|
4060
|
-
}, leaveDelay);
|
|
4061
|
-
} else {
|
|
4062
|
-
setInternalOpen(false);
|
|
4063
|
-
}
|
|
4064
|
-
}, [leaveDelay, clearTimers]);
|
|
4065
|
-
const handleMouseMove = useCallback3(
|
|
4066
|
-
(e) => {
|
|
4067
|
-
cursorPos.current = { x: e.clientX, y: e.clientY };
|
|
4068
|
-
if (isOpen && followCursor) {
|
|
4069
|
-
updatePosition();
|
|
4070
|
-
}
|
|
4071
|
-
},
|
|
4072
|
-
[isOpen, followCursor, updatePosition]
|
|
4073
|
-
);
|
|
4074
|
-
useEffect8(() => {
|
|
4075
|
-
return () => clearTimers();
|
|
4076
|
-
}, [clearTimers]);
|
|
4077
|
-
const childProps = {};
|
|
4078
|
-
if (!disableHoverListener) {
|
|
4079
|
-
childProps.onMouseEnter = handleOpen;
|
|
4080
|
-
childProps.onMouseLeave = handleClose;
|
|
4081
|
-
childProps.onMouseMove = followCursor ? handleMouseMove : void 0;
|
|
4082
|
-
}
|
|
4083
|
-
if (!disableFocusListener) {
|
|
4084
|
-
childProps.onFocus = handleOpen;
|
|
4085
|
-
childProps.onBlur = handleClose;
|
|
4086
|
-
}
|
|
4087
|
-
const tooltipClasses = [
|
|
4088
|
-
"rf-tooltip",
|
|
4089
|
-
`rf-tooltip--placement-${placement}`,
|
|
4090
|
-
isOpen ? "rf-tooltip--visible" : "",
|
|
4091
|
-
sxClass,
|
|
4092
|
-
className
|
|
4093
|
-
].filter(Boolean).join(" ");
|
|
4094
|
-
const tooltipElement = /* @__PURE__ */ React74.createElement(
|
|
4095
|
-
"div",
|
|
4096
|
-
{
|
|
4097
|
-
ref: tooltipRef,
|
|
4098
|
-
className: tooltipClasses,
|
|
4099
|
-
style: {
|
|
4100
|
-
top: position.top,
|
|
4101
|
-
left: position.left,
|
|
4102
|
-
...style
|
|
4103
|
-
},
|
|
4104
|
-
role: "tooltip",
|
|
4105
|
-
"aria-hidden": !isOpen
|
|
4106
|
-
},
|
|
4107
|
-
title,
|
|
4108
|
-
arrow && /* @__PURE__ */ React74.createElement(
|
|
4109
|
-
"span",
|
|
4110
|
-
{
|
|
4111
|
-
className: "rf-tooltip__arrow",
|
|
4112
|
-
style: {
|
|
4113
|
-
...position.arrowLeft !== void 0 ? { left: position.arrowLeft } : {},
|
|
4114
|
-
...position.arrowTop !== void 0 ? { top: position.arrowTop } : {}
|
|
4115
|
-
}
|
|
4116
|
-
}
|
|
4117
|
-
)
|
|
4118
|
-
);
|
|
4119
|
-
return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(
|
|
4120
|
-
"span",
|
|
4121
|
-
{
|
|
4122
|
-
ref: anchorRef,
|
|
4123
|
-
style: { display: "inline-flex", position: "relative" },
|
|
4124
|
-
"aria-describedby": isOpen ? "rf-tooltip" : void 0,
|
|
4125
|
-
...childProps
|
|
4126
|
-
},
|
|
4127
|
-
React74.cloneElement(children)
|
|
4128
|
-
), ReactDOM3.createPortal(tooltipElement, document.body));
|
|
4129
|
-
};
|
|
4130
|
-
Tooltip.displayName = "Tooltip";
|
|
4131
|
-
|
|
4132
|
-
// lib/DataGrid/DataGrid.tsx
|
|
4133
4154
|
var getOperatorsForType = (type) => {
|
|
4134
4155
|
if (type === "date") return [
|
|
4135
4156
|
{ value: "is", label: "is" },
|