@rufous/ui 0.2.93 → 0.2.95
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 +450 -413
- package/dist/main.js +463 -426
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -1831,6 +1831,28 @@ var TextField = (0, import_react17.forwardRef)(({
|
|
|
1831
1831
|
className
|
|
1832
1832
|
].filter(Boolean).join(" ");
|
|
1833
1833
|
const internalRef = import_react17.default.useRef(null);
|
|
1834
|
+
const handleChange = (e) => {
|
|
1835
|
+
if (type === "number") {
|
|
1836
|
+
const raw = e.target.value;
|
|
1837
|
+
const inputMax = slotProps?.input?.max ?? props.max;
|
|
1838
|
+
const inputMaxLength = slotProps?.input?.maxLength ?? props.maxLength;
|
|
1839
|
+
if (inputMaxLength != null) {
|
|
1840
|
+
const digits = raw.replace(/[^0-9]/g, "");
|
|
1841
|
+
if (digits.length > Number(inputMaxLength)) return;
|
|
1842
|
+
}
|
|
1843
|
+
if (inputMax != null && raw !== "") {
|
|
1844
|
+
if (Number(raw) > Number(inputMax)) return;
|
|
1845
|
+
}
|
|
1846
|
+
const numericValue = raw === "" ? "" : Number(raw);
|
|
1847
|
+
const syntheticEvent = Object.assign({}, e, {
|
|
1848
|
+
target: Object.assign({}, e.target, { value: numericValue }),
|
|
1849
|
+
currentTarget: Object.assign({}, e.currentTarget, { value: numericValue })
|
|
1850
|
+
});
|
|
1851
|
+
onChange?.(syntheticEvent);
|
|
1852
|
+
return;
|
|
1853
|
+
}
|
|
1854
|
+
onChange?.(e);
|
|
1855
|
+
};
|
|
1834
1856
|
const triggerChange = () => {
|
|
1835
1857
|
if (internalRef.current) {
|
|
1836
1858
|
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
|
|
@@ -1894,30 +1916,257 @@ var TextField = (0, import_react17.forwardRef)(({
|
|
|
1894
1916
|
name,
|
|
1895
1917
|
id: inputId,
|
|
1896
1918
|
value,
|
|
1897
|
-
onChange,
|
|
1898
1919
|
required,
|
|
1899
1920
|
disabled,
|
|
1900
1921
|
readOnly,
|
|
1901
1922
|
step: type === "number" && numberVariant ? STEP_BY_VARIANT[numberVariant] : void 0,
|
|
1902
1923
|
min: type === "number" && numberVariant ? MIN_BY_VARIANT[numberVariant] : void 0,
|
|
1903
1924
|
...slotProps?.input,
|
|
1904
|
-
...props
|
|
1925
|
+
...props,
|
|
1926
|
+
onChange: handleChange
|
|
1905
1927
|
}
|
|
1906
1928
|
), InputProps?.endAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ import_react17.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react17.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ import_react17.default.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react17.default.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
1907
1929
|
});
|
|
1908
1930
|
TextField.displayName = "TextField";
|
|
1909
1931
|
|
|
1910
1932
|
// lib/TextFields/AddressLookup.tsx
|
|
1911
|
-
var
|
|
1933
|
+
var import_react20 = __toESM(require("react"), 1);
|
|
1912
1934
|
var import_axios = __toESM(require("axios"), 1);
|
|
1913
1935
|
var import_country_state_city = require("country-state-city");
|
|
1914
1936
|
|
|
1915
1937
|
// lib/TextFields/Autocomplete.tsx
|
|
1938
|
+
var import_react19 = __toESM(require("react"), 1);
|
|
1939
|
+
var import_react_dom3 = __toESM(require("react-dom"), 1);
|
|
1940
|
+
|
|
1941
|
+
// lib/Tooltip/Tooltip.tsx
|
|
1916
1942
|
var import_react18 = __toESM(require("react"), 1);
|
|
1917
1943
|
var import_react_dom2 = __toESM(require("react-dom"), 1);
|
|
1918
|
-
var
|
|
1919
|
-
|
|
1920
|
-
|
|
1944
|
+
var GAP = 8;
|
|
1945
|
+
function computePosition(anchor, tooltip, placement) {
|
|
1946
|
+
const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
|
|
1947
|
+
const { width: tW, height: tH } = tooltip;
|
|
1948
|
+
let top = 0;
|
|
1949
|
+
let left = 0;
|
|
1950
|
+
let arrowLeft;
|
|
1951
|
+
let arrowTop;
|
|
1952
|
+
switch (placement) {
|
|
1953
|
+
case "top":
|
|
1954
|
+
top = aTop - tH - GAP;
|
|
1955
|
+
left = aLeft + aW / 2 - tW / 2;
|
|
1956
|
+
arrowLeft = tW / 2 - 4;
|
|
1957
|
+
break;
|
|
1958
|
+
case "top-start":
|
|
1959
|
+
top = aTop - tH - GAP;
|
|
1960
|
+
left = aLeft;
|
|
1961
|
+
arrowLeft = Math.min(aW / 2, tW - 16);
|
|
1962
|
+
break;
|
|
1963
|
+
case "top-end":
|
|
1964
|
+
top = aTop - tH - GAP;
|
|
1965
|
+
left = aLeft + aW - tW;
|
|
1966
|
+
arrowLeft = Math.max(tW - aW / 2 - 4, 8);
|
|
1967
|
+
break;
|
|
1968
|
+
case "bottom":
|
|
1969
|
+
top = aTop + aH + GAP;
|
|
1970
|
+
left = aLeft + aW / 2 - tW / 2;
|
|
1971
|
+
arrowLeft = tW / 2 - 4;
|
|
1972
|
+
break;
|
|
1973
|
+
case "bottom-start":
|
|
1974
|
+
top = aTop + aH + GAP;
|
|
1975
|
+
left = aLeft;
|
|
1976
|
+
arrowLeft = Math.min(aW / 2, tW - 16);
|
|
1977
|
+
break;
|
|
1978
|
+
case "bottom-end":
|
|
1979
|
+
top = aTop + aH + GAP;
|
|
1980
|
+
left = aLeft + aW - tW;
|
|
1981
|
+
arrowLeft = Math.max(tW - aW / 2 - 4, 8);
|
|
1982
|
+
break;
|
|
1983
|
+
case "left":
|
|
1984
|
+
top = aTop + aH / 2 - tH / 2;
|
|
1985
|
+
left = aLeft - tW - GAP;
|
|
1986
|
+
arrowTop = tH / 2 - 4;
|
|
1987
|
+
break;
|
|
1988
|
+
case "left-start":
|
|
1989
|
+
top = aTop;
|
|
1990
|
+
left = aLeft - tW - GAP;
|
|
1991
|
+
arrowTop = Math.min(aH / 2, tH - 16);
|
|
1992
|
+
break;
|
|
1993
|
+
case "left-end":
|
|
1994
|
+
top = aTop + aH - tH;
|
|
1995
|
+
left = aLeft - tW - GAP;
|
|
1996
|
+
arrowTop = Math.max(tH - aH / 2 - 4, 8);
|
|
1997
|
+
break;
|
|
1998
|
+
case "right":
|
|
1999
|
+
top = aTop + aH / 2 - tH / 2;
|
|
2000
|
+
left = aLeft + aW + GAP;
|
|
2001
|
+
arrowTop = tH / 2 - 4;
|
|
2002
|
+
break;
|
|
2003
|
+
case "right-start":
|
|
2004
|
+
top = aTop;
|
|
2005
|
+
left = aLeft + aW + GAP;
|
|
2006
|
+
arrowTop = Math.min(aH / 2, tH - 16);
|
|
2007
|
+
break;
|
|
2008
|
+
case "right-end":
|
|
2009
|
+
top = aTop + aH - tH;
|
|
2010
|
+
left = aLeft + aW + GAP;
|
|
2011
|
+
arrowTop = Math.max(tH - aH / 2 - 4, 8);
|
|
2012
|
+
break;
|
|
2013
|
+
default:
|
|
2014
|
+
top = aTop - tH - GAP;
|
|
2015
|
+
left = aLeft + aW / 2 - tW / 2;
|
|
2016
|
+
}
|
|
2017
|
+
const vw = window.innerWidth;
|
|
2018
|
+
const vh = window.innerHeight;
|
|
2019
|
+
left = Math.max(8, Math.min(left, vw - tW - 8));
|
|
2020
|
+
top = Math.max(8, Math.min(top, vh - tH - 8));
|
|
2021
|
+
return { top, left, arrowLeft, arrowTop };
|
|
2022
|
+
}
|
|
2023
|
+
var Tooltip = ({
|
|
2024
|
+
title,
|
|
2025
|
+
placement = "top",
|
|
2026
|
+
arrow = false,
|
|
2027
|
+
open: controlledOpen,
|
|
2028
|
+
disableHoverListener = false,
|
|
2029
|
+
disableFocusListener = false,
|
|
2030
|
+
enterDelay = 100,
|
|
2031
|
+
leaveDelay = 0,
|
|
2032
|
+
children,
|
|
2033
|
+
followCursor = false,
|
|
2034
|
+
className = "",
|
|
2035
|
+
style,
|
|
2036
|
+
sx
|
|
2037
|
+
}) => {
|
|
2038
|
+
const sxClass = useSx(sx);
|
|
2039
|
+
const [internalOpen, setInternalOpen] = (0, import_react18.useState)(false);
|
|
2040
|
+
const [position, setPosition] = (0, import_react18.useState)({ top: 0, left: 0 });
|
|
2041
|
+
const anchorRef = (0, import_react18.useRef)(null);
|
|
2042
|
+
const tooltipRef = (0, import_react18.useRef)(null);
|
|
2043
|
+
const enterTimer = (0, import_react18.useRef)(null);
|
|
2044
|
+
const leaveTimer = (0, import_react18.useRef)(null);
|
|
2045
|
+
const cursorPos = (0, import_react18.useRef)({ x: 0, y: 0 });
|
|
2046
|
+
const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
|
|
2047
|
+
const clearTimers = (0, import_react18.useCallback)(() => {
|
|
2048
|
+
if (enterTimer.current) clearTimeout(enterTimer.current);
|
|
2049
|
+
if (leaveTimer.current) clearTimeout(leaveTimer.current);
|
|
2050
|
+
}, []);
|
|
2051
|
+
const updatePosition = (0, import_react18.useCallback)(() => {
|
|
2052
|
+
if (!anchorRef.current || !tooltipRef.current) return;
|
|
2053
|
+
const anchorRect = anchorRef.current.getBoundingClientRect();
|
|
2054
|
+
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
2055
|
+
if (followCursor) {
|
|
2056
|
+
const fakeRect = {
|
|
2057
|
+
top: cursorPos.current.y,
|
|
2058
|
+
left: cursorPos.current.x,
|
|
2059
|
+
right: cursorPos.current.x,
|
|
2060
|
+
bottom: cursorPos.current.y,
|
|
2061
|
+
width: 0,
|
|
2062
|
+
height: 0,
|
|
2063
|
+
x: cursorPos.current.x,
|
|
2064
|
+
y: cursorPos.current.y,
|
|
2065
|
+
toJSON: () => ({})
|
|
2066
|
+
};
|
|
2067
|
+
setPosition(computePosition(fakeRect, tooltipRect, placement));
|
|
2068
|
+
} else {
|
|
2069
|
+
setPosition(computePosition(anchorRect, tooltipRect, placement));
|
|
2070
|
+
}
|
|
2071
|
+
}, [placement, followCursor]);
|
|
2072
|
+
(0, import_react18.useEffect)(() => {
|
|
2073
|
+
if (isOpen) {
|
|
2074
|
+
requestAnimationFrame(() => {
|
|
2075
|
+
updatePosition();
|
|
2076
|
+
});
|
|
2077
|
+
}
|
|
2078
|
+
}, [isOpen, updatePosition]);
|
|
2079
|
+
const handleOpen = (0, import_react18.useCallback)(() => {
|
|
2080
|
+
clearTimers();
|
|
2081
|
+
if (enterDelay > 0) {
|
|
2082
|
+
enterTimer.current = setTimeout(() => {
|
|
2083
|
+
setInternalOpen(true);
|
|
2084
|
+
}, enterDelay);
|
|
2085
|
+
} else {
|
|
2086
|
+
setInternalOpen(true);
|
|
2087
|
+
}
|
|
2088
|
+
}, [enterDelay, clearTimers]);
|
|
2089
|
+
const handleClose = (0, import_react18.useCallback)(() => {
|
|
2090
|
+
clearTimers();
|
|
2091
|
+
if (leaveDelay > 0) {
|
|
2092
|
+
leaveTimer.current = setTimeout(() => {
|
|
2093
|
+
setInternalOpen(false);
|
|
2094
|
+
}, leaveDelay);
|
|
2095
|
+
} else {
|
|
2096
|
+
setInternalOpen(false);
|
|
2097
|
+
}
|
|
2098
|
+
}, [leaveDelay, clearTimers]);
|
|
2099
|
+
const handleMouseMove = (0, import_react18.useCallback)(
|
|
2100
|
+
(e) => {
|
|
2101
|
+
cursorPos.current = { x: e.clientX, y: e.clientY };
|
|
2102
|
+
if (isOpen && followCursor) {
|
|
2103
|
+
updatePosition();
|
|
2104
|
+
}
|
|
2105
|
+
},
|
|
2106
|
+
[isOpen, followCursor, updatePosition]
|
|
2107
|
+
);
|
|
2108
|
+
(0, import_react18.useEffect)(() => {
|
|
2109
|
+
return () => clearTimers();
|
|
2110
|
+
}, [clearTimers]);
|
|
2111
|
+
const childProps = {};
|
|
2112
|
+
if (!disableHoverListener) {
|
|
2113
|
+
childProps.onMouseEnter = handleOpen;
|
|
2114
|
+
childProps.onMouseLeave = handleClose;
|
|
2115
|
+
childProps.onMouseMove = followCursor ? handleMouseMove : void 0;
|
|
2116
|
+
}
|
|
2117
|
+
if (!disableFocusListener) {
|
|
2118
|
+
childProps.onFocus = handleOpen;
|
|
2119
|
+
childProps.onBlur = handleClose;
|
|
2120
|
+
}
|
|
2121
|
+
const tooltipClasses = [
|
|
2122
|
+
"rf-tooltip",
|
|
2123
|
+
`rf-tooltip--placement-${placement}`,
|
|
2124
|
+
isOpen ? "rf-tooltip--visible" : "",
|
|
2125
|
+
sxClass,
|
|
2126
|
+
className
|
|
2127
|
+
].filter(Boolean).join(" ");
|
|
2128
|
+
const tooltipElement = /* @__PURE__ */ import_react18.default.createElement(
|
|
2129
|
+
"div",
|
|
2130
|
+
{
|
|
2131
|
+
ref: tooltipRef,
|
|
2132
|
+
className: tooltipClasses,
|
|
2133
|
+
style: {
|
|
2134
|
+
top: position.top,
|
|
2135
|
+
left: position.left,
|
|
2136
|
+
...style
|
|
2137
|
+
},
|
|
2138
|
+
role: "tooltip",
|
|
2139
|
+
"aria-hidden": !isOpen
|
|
2140
|
+
},
|
|
2141
|
+
title,
|
|
2142
|
+
arrow && /* @__PURE__ */ import_react18.default.createElement(
|
|
2143
|
+
"span",
|
|
2144
|
+
{
|
|
2145
|
+
className: "rf-tooltip__arrow",
|
|
2146
|
+
style: {
|
|
2147
|
+
...position.arrowLeft !== void 0 ? { left: position.arrowLeft } : {},
|
|
2148
|
+
...position.arrowTop !== void 0 ? { top: position.arrowTop } : {}
|
|
2149
|
+
}
|
|
2150
|
+
}
|
|
2151
|
+
)
|
|
2152
|
+
);
|
|
2153
|
+
return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(
|
|
2154
|
+
"span",
|
|
2155
|
+
{
|
|
2156
|
+
ref: anchorRef,
|
|
2157
|
+
style: { display: "inline-flex", position: "relative" },
|
|
2158
|
+
"aria-describedby": isOpen ? "rf-tooltip" : void 0,
|
|
2159
|
+
...childProps
|
|
2160
|
+
},
|
|
2161
|
+
import_react18.default.cloneElement(children)
|
|
2162
|
+
), import_react_dom2.default.createPortal(tooltipElement, document.body));
|
|
2163
|
+
};
|
|
2164
|
+
Tooltip.displayName = "Tooltip";
|
|
2165
|
+
|
|
2166
|
+
// lib/TextFields/Autocomplete.tsx
|
|
2167
|
+
var ChevronDownIcon = () => /* @__PURE__ */ import_react19.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react19.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
|
|
2168
|
+
var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ import_react19.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react19.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react19.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
|
|
2169
|
+
var CheckIcon = () => /* @__PURE__ */ import_react19.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react19.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
1921
2170
|
function defaultGetLabel(option) {
|
|
1922
2171
|
if (option === null || option === void 0) return "";
|
|
1923
2172
|
if (typeof option === "string") return option;
|
|
@@ -1927,11 +2176,19 @@ function defaultGetLabel(option) {
|
|
|
1927
2176
|
}
|
|
1928
2177
|
function defaultIsEqual(a, b) {
|
|
1929
2178
|
if (a === b) return true;
|
|
1930
|
-
if (a
|
|
2179
|
+
if (a == null || b == null) return false;
|
|
2180
|
+
const aIsObj = typeof a === "object";
|
|
2181
|
+
const bIsObj = typeof b === "object";
|
|
2182
|
+
if (aIsObj && bIsObj) {
|
|
1931
2183
|
const aVal = a.value;
|
|
1932
2184
|
const bVal = b.value;
|
|
1933
2185
|
if (aVal !== void 0 && bVal !== void 0) return aVal === bVal;
|
|
2186
|
+
const aId = a.id;
|
|
2187
|
+
const bId = b.id;
|
|
2188
|
+
if (aId !== void 0 && bId !== void 0) return aId === bId;
|
|
1934
2189
|
}
|
|
2190
|
+
if (aIsObj && !bIsObj) return a.value === b;
|
|
2191
|
+
if (!aIsObj && bIsObj) return a === b.value;
|
|
1935
2192
|
return false;
|
|
1936
2193
|
}
|
|
1937
2194
|
function defaultFilter(options, inputValue, getLabel) {
|
|
@@ -1974,18 +2231,18 @@ function AutocompleteInner(props, _ref) {
|
|
|
1974
2231
|
onOpen,
|
|
1975
2232
|
onClose
|
|
1976
2233
|
} = props;
|
|
1977
|
-
const [open, setOpen] = (0,
|
|
1978
|
-
const [inputStr, setInputStr] = (0,
|
|
1979
|
-
const [filterQuery, setFilterQuery] = (0,
|
|
1980
|
-
const [focusedIdx, setFocusedIdx] = (0,
|
|
1981
|
-
const [popupStyle, setPopupStyle] = (0,
|
|
1982
|
-
const containerRef = (0,
|
|
1983
|
-
const popupRef = (0,
|
|
1984
|
-
const inputRef = (0,
|
|
1985
|
-
const listRef = (0,
|
|
1986
|
-
const inputId = (0,
|
|
2234
|
+
const [open, setOpen] = (0, import_react19.useState)(false);
|
|
2235
|
+
const [inputStr, setInputStr] = (0, import_react19.useState)("");
|
|
2236
|
+
const [filterQuery, setFilterQuery] = (0, import_react19.useState)("");
|
|
2237
|
+
const [focusedIdx, setFocusedIdx] = (0, import_react19.useState)(-1);
|
|
2238
|
+
const [popupStyle, setPopupStyle] = (0, import_react19.useState)({});
|
|
2239
|
+
const containerRef = (0, import_react19.useRef)(null);
|
|
2240
|
+
const popupRef = (0, import_react19.useRef)(null);
|
|
2241
|
+
const inputRef = (0, import_react19.useRef)(null);
|
|
2242
|
+
const listRef = (0, import_react19.useRef)(null);
|
|
2243
|
+
const inputId = (0, import_react19.useRef)(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
|
|
1987
2244
|
const sxClass = useSx(sx);
|
|
1988
|
-
const calcPopupStyle = (0,
|
|
2245
|
+
const calcPopupStyle = (0, import_react19.useCallback)(() => {
|
|
1989
2246
|
if (!containerRef.current) return;
|
|
1990
2247
|
const rect = containerRef.current.getBoundingClientRect();
|
|
1991
2248
|
const POPUP_MAX_HEIGHT = 280;
|
|
@@ -2016,11 +2273,11 @@ function AutocompleteInner(props, _ref) {
|
|
|
2016
2273
|
}, []);
|
|
2017
2274
|
const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
|
|
2018
2275
|
const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
|
|
2019
|
-
const isEqual = (0,
|
|
2276
|
+
const isEqual = (0, import_react19.useCallback)(
|
|
2020
2277
|
(a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : defaultIsEqual(a, b),
|
|
2021
2278
|
[isOptionEqualToValue]
|
|
2022
2279
|
);
|
|
2023
|
-
const isSelected = (0,
|
|
2280
|
+
const isSelected = (0, import_react19.useCallback)(
|
|
2024
2281
|
(opt) => selectedValues.some((v) => isEqual(opt, v)),
|
|
2025
2282
|
[selectedValues, isEqual]
|
|
2026
2283
|
);
|
|
@@ -2047,7 +2304,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2047
2304
|
filtered.forEach((opt, i) => flatEntries.push({ kind: "option", option: opt, flatIdx: i }));
|
|
2048
2305
|
}
|
|
2049
2306
|
const selectableOptions = flatEntries.filter((e) => e.kind === "option");
|
|
2050
|
-
const openPopup = (0,
|
|
2307
|
+
const openPopup = (0, import_react19.useCallback)(() => {
|
|
2051
2308
|
if (disabled) return;
|
|
2052
2309
|
calcPopupStyle();
|
|
2053
2310
|
setOpen(true);
|
|
@@ -2055,7 +2312,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2055
2312
|
setFilterQuery("");
|
|
2056
2313
|
onOpen?.();
|
|
2057
2314
|
}, [disabled, calcPopupStyle, onOpen]);
|
|
2058
|
-
const closePopup = (0,
|
|
2315
|
+
const closePopup = (0, import_react19.useCallback)((justSelected = false) => {
|
|
2059
2316
|
setOpen(false);
|
|
2060
2317
|
setFocusedIdx(-1);
|
|
2061
2318
|
onClose?.();
|
|
@@ -2064,7 +2321,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2064
2321
|
onInputChange?.("");
|
|
2065
2322
|
}
|
|
2066
2323
|
}, [freeSolo, multiple, value, onInputChange, onClose]);
|
|
2067
|
-
(0,
|
|
2324
|
+
(0, import_react19.useEffect)(() => {
|
|
2068
2325
|
if (!open) return;
|
|
2069
2326
|
const handleOutside = (e) => {
|
|
2070
2327
|
const target = e.target;
|
|
@@ -2083,7 +2340,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2083
2340
|
window.removeEventListener("resize", calcPopupStyle);
|
|
2084
2341
|
};
|
|
2085
2342
|
}, [open, closePopup, calcPopupStyle]);
|
|
2086
|
-
(0,
|
|
2343
|
+
(0, import_react19.useEffect)(() => {
|
|
2087
2344
|
if (controlledInput !== void 0) return;
|
|
2088
2345
|
if (!multiple) {
|
|
2089
2346
|
const v = value;
|
|
@@ -2199,7 +2456,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2199
2456
|
className
|
|
2200
2457
|
].filter(Boolean).join(" ");
|
|
2201
2458
|
const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
|
|
2202
|
-
return /* @__PURE__ */
|
|
2459
|
+
return /* @__PURE__ */ import_react19.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react19.default.createElement(
|
|
2203
2460
|
"div",
|
|
2204
2461
|
{
|
|
2205
2462
|
className: "rf-text-field__wrapper",
|
|
@@ -2210,7 +2467,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2210
2467
|
}
|
|
2211
2468
|
}
|
|
2212
2469
|
},
|
|
2213
|
-
multiple && visibleTags.map((opt, i) => /* @__PURE__ */
|
|
2470
|
+
multiple && visibleTags.map((opt, i) => /* @__PURE__ */ import_react19.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ import_react19.default.createElement(
|
|
2214
2471
|
"button",
|
|
2215
2472
|
{
|
|
2216
2473
|
type: "button",
|
|
@@ -2219,10 +2476,17 @@ function AutocompleteInner(props, _ref) {
|
|
|
2219
2476
|
onClick: (e) => removeTag(opt, e),
|
|
2220
2477
|
tabIndex: -1
|
|
2221
2478
|
},
|
|
2222
|
-
/* @__PURE__ */
|
|
2479
|
+
/* @__PURE__ */ import_react19.default.createElement(CloseSmIcon, { size: 12 })
|
|
2223
2480
|
))),
|
|
2224
|
-
hiddenCount > 0 && /* @__PURE__ */
|
|
2225
|
-
|
|
2481
|
+
hiddenCount > 0 && /* @__PURE__ */ import_react19.default.createElement(
|
|
2482
|
+
Tooltip,
|
|
2483
|
+
{
|
|
2484
|
+
title: selectedValues.slice(limitTags).map((o) => getOptionLabel(o)).join(", "),
|
|
2485
|
+
placement: "top"
|
|
2486
|
+
},
|
|
2487
|
+
/* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more")
|
|
2488
|
+
),
|
|
2489
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
2226
2490
|
"input",
|
|
2227
2491
|
{
|
|
2228
2492
|
ref: inputRef,
|
|
@@ -2244,9 +2508,9 @@ function AutocompleteInner(props, _ref) {
|
|
|
2244
2508
|
"aria-autocomplete": "list"
|
|
2245
2509
|
}
|
|
2246
2510
|
),
|
|
2247
|
-
label && /* @__PURE__ */
|
|
2248
|
-
variant === "outlined" && /* @__PURE__ */
|
|
2249
|
-
/* @__PURE__ */
|
|
2511
|
+
label && /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
|
|
2512
|
+
variant === "outlined" && /* @__PURE__ */ import_react19.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react19.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react19.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react19.default.createElement("legend", { className: "rf-text-field__legend--empty" })),
|
|
2513
|
+
/* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ import_react19.default.createElement(
|
|
2250
2514
|
"button",
|
|
2251
2515
|
{
|
|
2252
2516
|
type: "button",
|
|
@@ -2256,8 +2520,8 @@ function AutocompleteInner(props, _ref) {
|
|
|
2256
2520
|
tabIndex: -1,
|
|
2257
2521
|
"aria-label": "Clear"
|
|
2258
2522
|
},
|
|
2259
|
-
/* @__PURE__ */
|
|
2260
|
-
), !freeSolo && /* @__PURE__ */
|
|
2523
|
+
/* @__PURE__ */ import_react19.default.createElement(CloseSmIcon, { size: 16 })
|
|
2524
|
+
), !freeSolo && /* @__PURE__ */ import_react19.default.createElement(
|
|
2261
2525
|
"button",
|
|
2262
2526
|
{
|
|
2263
2527
|
type: "button",
|
|
@@ -2269,10 +2533,10 @@ function AutocompleteInner(props, _ref) {
|
|
|
2269
2533
|
tabIndex: -1,
|
|
2270
2534
|
"aria-label": open ? "Close" : "Open"
|
|
2271
2535
|
},
|
|
2272
|
-
/* @__PURE__ */
|
|
2536
|
+
/* @__PURE__ */ import_react19.default.createElement(ChevronDownIcon, null)
|
|
2273
2537
|
))
|
|
2274
|
-
), helperText && /* @__PURE__ */
|
|
2275
|
-
/* @__PURE__ */
|
|
2538
|
+
), helperText && /* @__PURE__ */ import_react19.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && import_react_dom3.default.createPortal(
|
|
2539
|
+
/* @__PURE__ */ import_react19.default.createElement("div", { ref: popupRef, className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react19.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
|
|
2276
2540
|
// Grouped render
|
|
2277
2541
|
(() => {
|
|
2278
2542
|
const rendered = [];
|
|
@@ -2282,7 +2546,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2282
2546
|
if (entry.kind === "group") {
|
|
2283
2547
|
if (groupItems.length > 0) {
|
|
2284
2548
|
rendered.push(
|
|
2285
|
-
/* @__PURE__ */
|
|
2549
|
+
/* @__PURE__ */ import_react19.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react19.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
|
|
2286
2550
|
);
|
|
2287
2551
|
groupItems = [];
|
|
2288
2552
|
}
|
|
@@ -2293,7 +2557,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2293
2557
|
}
|
|
2294
2558
|
if (ei === flatEntries.length - 1 && groupItems.length > 0) {
|
|
2295
2559
|
rendered.push(
|
|
2296
|
-
/* @__PURE__ */
|
|
2560
|
+
/* @__PURE__ */ import_react19.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react19.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
|
|
2297
2561
|
);
|
|
2298
2562
|
}
|
|
2299
2563
|
});
|
|
@@ -2307,7 +2571,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2307
2571
|
const focused = focusedIdx === flatIdx;
|
|
2308
2572
|
const optDisabled = getOptionDisabled?.(option) ?? false;
|
|
2309
2573
|
const label2 = getOptionLabel(option);
|
|
2310
|
-
return /* @__PURE__ */
|
|
2574
|
+
return /* @__PURE__ */ import_react19.default.createElement(
|
|
2311
2575
|
"li",
|
|
2312
2576
|
{
|
|
2313
2577
|
key: label2 + flatIdx,
|
|
@@ -2326,12 +2590,12 @@ function AutocompleteInner(props, _ref) {
|
|
|
2326
2590
|
onMouseDown: (e) => e.preventDefault(),
|
|
2327
2591
|
onClick: (e) => selectOption(option, e)
|
|
2328
2592
|
},
|
|
2329
|
-
renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */
|
|
2330
|
-
!renderOption && /* @__PURE__ */
|
|
2593
|
+
renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ import_react19.default.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
|
|
2594
|
+
!renderOption && /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ import_react19.default.createElement(CheckIcon, null))
|
|
2331
2595
|
);
|
|
2332
2596
|
}
|
|
2333
2597
|
}
|
|
2334
|
-
var Autocomplete =
|
|
2598
|
+
var Autocomplete = import_react19.default.forwardRef(AutocompleteInner);
|
|
2335
2599
|
Autocomplete.displayName = "Autocomplete";
|
|
2336
2600
|
|
|
2337
2601
|
// lib/TextFields/AddressLookup.tsx
|
|
@@ -2348,16 +2612,16 @@ var AddressLookup = ({
|
|
|
2348
2612
|
token = ""
|
|
2349
2613
|
}) => {
|
|
2350
2614
|
const { theme } = useRufousTheme();
|
|
2351
|
-
const [suggestions, setSuggestions] = (0,
|
|
2352
|
-
const [loading, setLoading] = (0,
|
|
2353
|
-
const [showSuggestions, setShowSuggestions] = (0,
|
|
2354
|
-
const debounceTimeout = (0,
|
|
2355
|
-
const containerRef = (0,
|
|
2615
|
+
const [suggestions, setSuggestions] = (0, import_react20.useState)([]);
|
|
2616
|
+
const [loading, setLoading] = (0, import_react20.useState)(false);
|
|
2617
|
+
const [showSuggestions, setShowSuggestions] = (0, import_react20.useState)(false);
|
|
2618
|
+
const debounceTimeout = (0, import_react20.useRef)(null);
|
|
2619
|
+
const containerRef = (0, import_react20.useRef)(null);
|
|
2356
2620
|
const apiKey = token || "";
|
|
2357
2621
|
const countries = import_country_state_city.Country.getAllCountries();
|
|
2358
|
-
const [states, setStates] = (0,
|
|
2359
|
-
const [cities, setCities] = (0,
|
|
2360
|
-
(0,
|
|
2622
|
+
const [states, setStates] = (0, import_react20.useState)([]);
|
|
2623
|
+
const [cities, setCities] = (0, import_react20.useState)([]);
|
|
2624
|
+
(0, import_react20.useEffect)(() => {
|
|
2361
2625
|
const handleClickOutside = (event) => {
|
|
2362
2626
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
2363
2627
|
setShowSuggestions(false);
|
|
@@ -2366,7 +2630,7 @@ var AddressLookup = ({
|
|
|
2366
2630
|
document.addEventListener("mousedown", handleClickOutside);
|
|
2367
2631
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2368
2632
|
}, []);
|
|
2369
|
-
(0,
|
|
2633
|
+
(0, import_react20.useEffect)(() => {
|
|
2370
2634
|
if (value.country) {
|
|
2371
2635
|
const country = countries.find((c) => c.name === value.country);
|
|
2372
2636
|
if (country) {
|
|
@@ -2379,7 +2643,7 @@ var AddressLookup = ({
|
|
|
2379
2643
|
setStates([]);
|
|
2380
2644
|
}
|
|
2381
2645
|
}, [value.country]);
|
|
2382
|
-
(0,
|
|
2646
|
+
(0, import_react20.useEffect)(() => {
|
|
2383
2647
|
if (value.state && value.country) {
|
|
2384
2648
|
const country = countries.find((c) => c.name === value.country);
|
|
2385
2649
|
if (country) {
|
|
@@ -2484,7 +2748,7 @@ var AddressLookup = ({
|
|
|
2484
2748
|
city: ""
|
|
2485
2749
|
});
|
|
2486
2750
|
};
|
|
2487
|
-
return /* @__PURE__ */
|
|
2751
|
+
return /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ import_react20.default.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ import_react20.default.createElement(
|
|
2488
2752
|
TextField,
|
|
2489
2753
|
{
|
|
2490
2754
|
label,
|
|
@@ -2516,7 +2780,7 @@ var AddressLookup = ({
|
|
|
2516
2780
|
},
|
|
2517
2781
|
onFocus: () => suggestions.length > 0 && setShowSuggestions(true)
|
|
2518
2782
|
}
|
|
2519
|
-
), loading && /* @__PURE__ */
|
|
2783
|
+
), loading && /* @__PURE__ */ import_react20.default.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ import_react20.default.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ import_react20.default.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ import_react20.default.createElement(
|
|
2520
2784
|
"div",
|
|
2521
2785
|
{
|
|
2522
2786
|
key: idx,
|
|
@@ -2527,9 +2791,9 @@ var AddressLookup = ({
|
|
|
2527
2791
|
fetchPlaceDetails(option.placePrediction.placeId, mainText);
|
|
2528
2792
|
}
|
|
2529
2793
|
},
|
|
2530
|
-
/* @__PURE__ */
|
|
2531
|
-
/* @__PURE__ */
|
|
2532
|
-
))), error.addressLine1 && /* @__PURE__ */
|
|
2794
|
+
/* @__PURE__ */ import_react20.default.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
|
|
2795
|
+
/* @__PURE__ */ import_react20.default.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
|
|
2796
|
+
))), error.addressLine1 && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react20.default.createElement(
|
|
2533
2797
|
TextField,
|
|
2534
2798
|
{
|
|
2535
2799
|
label: "Address Line 2",
|
|
@@ -2538,7 +2802,7 @@ var AddressLookup = ({
|
|
|
2538
2802
|
value: value.addressLine2 || "",
|
|
2539
2803
|
onChange: (e) => handleChange("addressLine2", e.target.value)
|
|
2540
2804
|
}
|
|
2541
|
-
)), layout !== "compact" && /* @__PURE__ */
|
|
2805
|
+
)), layout !== "compact" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react20.default.createElement(
|
|
2542
2806
|
TextField,
|
|
2543
2807
|
{
|
|
2544
2808
|
label: "Address Line 2",
|
|
@@ -2547,7 +2811,7 @@ var AddressLookup = ({
|
|
|
2547
2811
|
value: value.addressLine2 || "",
|
|
2548
2812
|
onChange: (e) => handleChange("addressLine2", e.target.value)
|
|
2549
2813
|
}
|
|
2550
|
-
)), /* @__PURE__ */
|
|
2814
|
+
)), /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ import_react20.default.createElement(
|
|
2551
2815
|
Autocomplete,
|
|
2552
2816
|
{
|
|
2553
2817
|
options: countries.map((c) => c.name),
|
|
@@ -2558,7 +2822,7 @@ var AddressLookup = ({
|
|
|
2558
2822
|
required,
|
|
2559
2823
|
error: !!error.country
|
|
2560
2824
|
}
|
|
2561
|
-
), error.country && /* @__PURE__ */
|
|
2825
|
+
), error.country && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ import_react20.default.createElement(
|
|
2562
2826
|
Autocomplete,
|
|
2563
2827
|
{
|
|
2564
2828
|
options: states.map((s2) => s2.name),
|
|
@@ -2569,7 +2833,7 @@ var AddressLookup = ({
|
|
|
2569
2833
|
required,
|
|
2570
2834
|
error: !!error.state
|
|
2571
2835
|
}
|
|
2572
|
-
), error.state && /* @__PURE__ */
|
|
2836
|
+
), error.state && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ import_react20.default.createElement(
|
|
2573
2837
|
Autocomplete,
|
|
2574
2838
|
{
|
|
2575
2839
|
options: cities.map((c) => c.name),
|
|
@@ -2580,7 +2844,7 @@ var AddressLookup = ({
|
|
|
2580
2844
|
required,
|
|
2581
2845
|
error: !!error.city
|
|
2582
2846
|
}
|
|
2583
|
-
), error.city && /* @__PURE__ */
|
|
2847
|
+
), error.city && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ import_react20.default.createElement(
|
|
2584
2848
|
TextField,
|
|
2585
2849
|
{
|
|
2586
2850
|
label: "Pincode",
|
|
@@ -2590,13 +2854,13 @@ var AddressLookup = ({
|
|
|
2590
2854
|
required,
|
|
2591
2855
|
onChange: (e) => handleChange("pincode", e.target.value)
|
|
2592
2856
|
}
|
|
2593
|
-
), error.pincode && /* @__PURE__ */
|
|
2857
|
+
), error.pincode && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.pincode))));
|
|
2594
2858
|
};
|
|
2595
2859
|
var AddressLookup_default = AddressLookup;
|
|
2596
2860
|
|
|
2597
2861
|
// lib/TextFields/DateField.tsx
|
|
2598
|
-
var
|
|
2599
|
-
var
|
|
2862
|
+
var import_react21 = __toESM(require("react"), 1);
|
|
2863
|
+
var import_react_dom4 = require("react-dom");
|
|
2600
2864
|
var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
|
|
2601
2865
|
var MONTHS = [
|
|
2602
2866
|
"January",
|
|
@@ -2756,25 +3020,25 @@ var parseTimeFromISO = (iso) => {
|
|
|
2756
3020
|
if (h === 0) h = 12;
|
|
2757
3021
|
return { h, m, ampm };
|
|
2758
3022
|
};
|
|
2759
|
-
var CalendarIcon = () => /* @__PURE__ */
|
|
2760
|
-
var ChevUp = () => /* @__PURE__ */
|
|
2761
|
-
var ChevDown = () => /* @__PURE__ */
|
|
3023
|
+
var CalendarIcon = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
|
|
3024
|
+
var ChevUp = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
|
|
3025
|
+
var ChevDown = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
|
|
2762
3026
|
var ITEM_H = 36;
|
|
2763
3027
|
var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
|
|
2764
|
-
const listRef = (0,
|
|
2765
|
-
const isInternalScroll = (0,
|
|
2766
|
-
const scrollTimeout = (0,
|
|
3028
|
+
const listRef = (0, import_react21.useRef)(null);
|
|
3029
|
+
const isInternalScroll = (0, import_react21.useRef)(false);
|
|
3030
|
+
const scrollTimeout = (0, import_react21.useRef)(null);
|
|
2767
3031
|
const MULTIPLIER = infinite ? 100 : 1;
|
|
2768
3032
|
const virtualItems = infinite ? Array(MULTIPLIER).fill(items).flat() : items;
|
|
2769
3033
|
const centerOffset = infinite ? Math.floor(MULTIPLIER / 2) * items.length : 0;
|
|
2770
3034
|
const VISUAL_OFFSET = 54;
|
|
2771
|
-
(0,
|
|
3035
|
+
(0, import_react21.useEffect)(() => {
|
|
2772
3036
|
if (listRef.current) {
|
|
2773
3037
|
const targetIndex = centerOffset + selected;
|
|
2774
3038
|
listRef.current.scrollTop = targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0);
|
|
2775
3039
|
}
|
|
2776
3040
|
}, [centerOffset, infinite, selected]);
|
|
2777
|
-
(0,
|
|
3041
|
+
(0, import_react21.useEffect)(() => {
|
|
2778
3042
|
if (listRef.current && !isInternalScroll.current) {
|
|
2779
3043
|
const targetIndex = centerOffset + selected;
|
|
2780
3044
|
listRef.current.scrollTo({
|
|
@@ -2806,15 +3070,15 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
|
|
|
2806
3070
|
}
|
|
2807
3071
|
}, 100);
|
|
2808
3072
|
};
|
|
2809
|
-
return /* @__PURE__ */
|
|
3073
|
+
return /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ import_react21.default.createElement(
|
|
2810
3074
|
"div",
|
|
2811
3075
|
{
|
|
2812
3076
|
className: "rf-timescroll__col",
|
|
2813
3077
|
ref: listRef,
|
|
2814
3078
|
onScroll: handleScroll
|
|
2815
3079
|
},
|
|
2816
|
-
!infinite && /* @__PURE__ */
|
|
2817
|
-
virtualItems.map((label, idx) => /* @__PURE__ */
|
|
3080
|
+
!infinite && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__spacer" }),
|
|
3081
|
+
virtualItems.map((label, idx) => /* @__PURE__ */ import_react21.default.createElement(
|
|
2818
3082
|
"div",
|
|
2819
3083
|
{
|
|
2820
3084
|
key: `${label}-${idx}`,
|
|
@@ -2822,8 +3086,8 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
|
|
|
2822
3086
|
},
|
|
2823
3087
|
label
|
|
2824
3088
|
)),
|
|
2825
|
-
!infinite && /* @__PURE__ */
|
|
2826
|
-
), /* @__PURE__ */
|
|
3089
|
+
!infinite && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__spacer" })
|
|
3090
|
+
), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
|
|
2827
3091
|
};
|
|
2828
3092
|
var SpinnerPanel = ({
|
|
2829
3093
|
hour,
|
|
@@ -2834,7 +3098,7 @@ var SpinnerPanel = ({
|
|
|
2834
3098
|
onHourInput,
|
|
2835
3099
|
onMinuteInput,
|
|
2836
3100
|
onAmpmToggle
|
|
2837
|
-
}) => /* @__PURE__ */
|
|
3101
|
+
}) => /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ import_react21.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react21.default.createElement(
|
|
2838
3102
|
"input",
|
|
2839
3103
|
{
|
|
2840
3104
|
type: "number",
|
|
@@ -2845,7 +3109,7 @@ var SpinnerPanel = ({
|
|
|
2845
3109
|
onChange: onHourInput,
|
|
2846
3110
|
onMouseDown: (e) => e.stopPropagation()
|
|
2847
3111
|
}
|
|
2848
|
-
), /* @__PURE__ */
|
|
3112
|
+
), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ import_react21.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ import_react21.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react21.default.createElement(
|
|
2849
3113
|
"input",
|
|
2850
3114
|
{
|
|
2851
3115
|
type: "number",
|
|
@@ -2856,7 +3120,7 @@ var SpinnerPanel = ({
|
|
|
2856
3120
|
onChange: onMinuteInput,
|
|
2857
3121
|
onMouseDown: (e) => e.stopPropagation()
|
|
2858
3122
|
}
|
|
2859
|
-
), /* @__PURE__ */
|
|
3123
|
+
), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ import_react21.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ import_react21.default.createElement(
|
|
2860
3124
|
"button",
|
|
2861
3125
|
{
|
|
2862
3126
|
type: "button",
|
|
@@ -2865,7 +3129,7 @@ var SpinnerPanel = ({
|
|
|
2865
3129
|
onClick: () => onAmpmToggle("AM")
|
|
2866
3130
|
},
|
|
2867
3131
|
"AM"
|
|
2868
|
-
), /* @__PURE__ */
|
|
3132
|
+
), /* @__PURE__ */ import_react21.default.createElement(
|
|
2869
3133
|
"button",
|
|
2870
3134
|
{
|
|
2871
3135
|
type: "button",
|
|
@@ -2887,7 +3151,7 @@ var CalendarBody = ({
|
|
|
2887
3151
|
onMonthSelect,
|
|
2888
3152
|
onYearSelect
|
|
2889
3153
|
}) => {
|
|
2890
|
-
const [pickerView, setPickerView] = (0,
|
|
3154
|
+
const [pickerView, setPickerView] = (0, import_react21.useState)("calendar");
|
|
2891
3155
|
const handleMonthClick = () => {
|
|
2892
3156
|
setPickerView(pickerView === "month" ? "calendar" : "month");
|
|
2893
3157
|
};
|
|
@@ -2905,21 +3169,21 @@ var CalendarBody = ({
|
|
|
2905
3169
|
const currentYear = todayDate.getFullYear();
|
|
2906
3170
|
const yearStart = viewYear - 6;
|
|
2907
3171
|
const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
|
|
2908
|
-
return /* @__PURE__ */
|
|
3172
|
+
return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react21.default.createElement(
|
|
2909
3173
|
"span",
|
|
2910
3174
|
{
|
|
2911
3175
|
className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
|
|
2912
3176
|
onClick: handleMonthClick
|
|
2913
3177
|
},
|
|
2914
3178
|
MONTHS[viewMonth]
|
|
2915
|
-
), /* @__PURE__ */
|
|
3179
|
+
), /* @__PURE__ */ import_react21.default.createElement(
|
|
2916
3180
|
"span",
|
|
2917
3181
|
{
|
|
2918
3182
|
className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
|
|
2919
3183
|
onClick: handleYearClick
|
|
2920
3184
|
},
|
|
2921
3185
|
viewYear
|
|
2922
|
-
)), /* @__PURE__ */
|
|
3186
|
+
)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ import_react21.default.createElement(
|
|
2923
3187
|
"button",
|
|
2924
3188
|
{
|
|
2925
3189
|
key: m,
|
|
@@ -2932,7 +3196,7 @@ var CalendarBody = ({
|
|
|
2932
3196
|
onClick: () => handleMonthPick(idx)
|
|
2933
3197
|
},
|
|
2934
3198
|
m
|
|
2935
|
-
))), pickerView === "year" && /* @__PURE__ */
|
|
3199
|
+
))), pickerView === "year" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ import_react21.default.createElement(
|
|
2936
3200
|
"button",
|
|
2937
3201
|
{
|
|
2938
3202
|
key: y,
|
|
@@ -2945,12 +3209,12 @@ var CalendarBody = ({
|
|
|
2945
3209
|
onClick: () => handleYearPick(y)
|
|
2946
3210
|
},
|
|
2947
3211
|
y
|
|
2948
|
-
))), pickerView === "calendar" && /* @__PURE__ */
|
|
2949
|
-
if (day === null) return /* @__PURE__ */
|
|
3212
|
+
))), pickerView === "calendar" && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
|
|
3213
|
+
if (day === null) return /* @__PURE__ */ import_react21.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
|
|
2950
3214
|
const cellDate = new Date(viewYear, viewMonth, day);
|
|
2951
3215
|
const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
|
|
2952
3216
|
const isToday = isSameDay(cellDate, todayDate);
|
|
2953
|
-
return /* @__PURE__ */
|
|
3217
|
+
return /* @__PURE__ */ import_react21.default.createElement(
|
|
2954
3218
|
"button",
|
|
2955
3219
|
{
|
|
2956
3220
|
key: day,
|
|
@@ -2986,29 +3250,29 @@ var DateField = ({
|
|
|
2986
3250
|
sx
|
|
2987
3251
|
}) => {
|
|
2988
3252
|
const sxClass = useSx(sx);
|
|
2989
|
-
const [open, setOpen] = (0,
|
|
2990
|
-
const [selectedDate, setSelectedDate] = (0,
|
|
2991
|
-
const [hour, setHour] = (0,
|
|
3253
|
+
const [open, setOpen] = (0, import_react21.useState)(false);
|
|
3254
|
+
const [selectedDate, setSelectedDate] = (0, import_react21.useState)(() => value ? isoToDate(value) : null);
|
|
3255
|
+
const [hour, setHour] = (0, import_react21.useState)(() => {
|
|
2992
3256
|
if (value && isDatetimeType(type)) return parseTimeFromISO(value).h;
|
|
2993
3257
|
return 12;
|
|
2994
3258
|
});
|
|
2995
|
-
const [minute, setMinute] = (0,
|
|
3259
|
+
const [minute, setMinute] = (0, import_react21.useState)(() => {
|
|
2996
3260
|
if (value && isDatetimeType(type)) return parseTimeFromISO(value).m;
|
|
2997
3261
|
return 0;
|
|
2998
3262
|
});
|
|
2999
|
-
const [ampm, setAmpm] = (0,
|
|
3263
|
+
const [ampm, setAmpm] = (0, import_react21.useState)(() => {
|
|
3000
3264
|
if (value && isDatetimeType(type)) return parseTimeFromISO(value).ampm;
|
|
3001
3265
|
return "AM";
|
|
3002
3266
|
});
|
|
3003
|
-
const [viewYear, setViewYear] = (0,
|
|
3267
|
+
const [viewYear, setViewYear] = (0, import_react21.useState)(() => {
|
|
3004
3268
|
const base = value ? isoToDate(value) : null;
|
|
3005
3269
|
return base ? base.getFullYear() : today().getFullYear();
|
|
3006
3270
|
});
|
|
3007
|
-
const [viewMonth, setViewMonth] = (0,
|
|
3271
|
+
const [viewMonth, setViewMonth] = (0, import_react21.useState)(() => {
|
|
3008
3272
|
const base = value ? isoToDate(value) : null;
|
|
3009
3273
|
return base ? base.getMonth() : today().getMonth();
|
|
3010
3274
|
});
|
|
3011
|
-
const [inputStr, setInputStr] = (0,
|
|
3275
|
+
const [inputStr, setInputStr] = (0, import_react21.useState)(() => {
|
|
3012
3276
|
if (!value) return "";
|
|
3013
3277
|
const d = isoToDate(value);
|
|
3014
3278
|
if (!d) return "";
|
|
@@ -3022,12 +3286,12 @@ var DateField = ({
|
|
|
3022
3286
|
const HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0"));
|
|
3023
3287
|
const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
|
|
3024
3288
|
const AMPMS = ["AM", "PM"];
|
|
3025
|
-
const containerRef = (0,
|
|
3026
|
-
const pickerRef = (0,
|
|
3027
|
-
const [dropUp, setDropUp] = (0,
|
|
3028
|
-
const inputId = (0,
|
|
3029
|
-
const isInternalChange = (0,
|
|
3030
|
-
(0,
|
|
3289
|
+
const containerRef = (0, import_react21.useRef)(null);
|
|
3290
|
+
const pickerRef = (0, import_react21.useRef)(null);
|
|
3291
|
+
const [dropUp, setDropUp] = (0, import_react21.useState)(false);
|
|
3292
|
+
const inputId = (0, import_react21.useRef)(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
|
|
3293
|
+
const isInternalChange = (0, import_react21.useRef)(false);
|
|
3294
|
+
(0, import_react21.useEffect)(() => {
|
|
3031
3295
|
if (value === void 0) return;
|
|
3032
3296
|
if (isInternalChange.current) {
|
|
3033
3297
|
isInternalChange.current = false;
|
|
@@ -3054,7 +3318,7 @@ var DateField = ({
|
|
|
3054
3318
|
setInputStr(str);
|
|
3055
3319
|
}
|
|
3056
3320
|
}, [value, type]);
|
|
3057
|
-
(0,
|
|
3321
|
+
(0, import_react21.useEffect)(() => {
|
|
3058
3322
|
if (!open) return;
|
|
3059
3323
|
const handler = (e) => {
|
|
3060
3324
|
const target = e.target;
|
|
@@ -3065,14 +3329,14 @@ var DateField = ({
|
|
|
3065
3329
|
document.addEventListener("mousedown", handler);
|
|
3066
3330
|
return () => document.removeEventListener("mousedown", handler);
|
|
3067
3331
|
}, [open]);
|
|
3068
|
-
(0,
|
|
3332
|
+
(0, import_react21.useEffect)(() => {
|
|
3069
3333
|
if (!open || !containerRef.current) return;
|
|
3070
3334
|
const rect = containerRef.current.getBoundingClientRect();
|
|
3071
3335
|
const spaceBelow = window.innerHeight - rect.bottom;
|
|
3072
3336
|
const pickerHeight = 400;
|
|
3073
3337
|
setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
|
|
3074
3338
|
}, [open]);
|
|
3075
|
-
const commitDate = (0,
|
|
3339
|
+
const commitDate = (0, import_react21.useCallback)((d, h, m, ap) => {
|
|
3076
3340
|
setSelectedDate(d);
|
|
3077
3341
|
if (!d) {
|
|
3078
3342
|
setInputStr("");
|
|
@@ -3223,7 +3487,7 @@ var DateField = ({
|
|
|
3223
3487
|
const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
|
|
3224
3488
|
const todayDate = today();
|
|
3225
3489
|
const isSideVariant = type === "datetime-side" || type === "datetime-scroll";
|
|
3226
|
-
return /* @__PURE__ */
|
|
3490
|
+
return /* @__PURE__ */ import_react21.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react21.default.createElement(
|
|
3227
3491
|
"div",
|
|
3228
3492
|
{
|
|
3229
3493
|
className: "rf-text-field__wrapper",
|
|
@@ -3232,7 +3496,7 @@ var DateField = ({
|
|
|
3232
3496
|
},
|
|
3233
3497
|
style: { cursor: disabled ? "default" : "pointer" }
|
|
3234
3498
|
},
|
|
3235
|
-
/* @__PURE__ */
|
|
3499
|
+
/* @__PURE__ */ import_react21.default.createElement(
|
|
3236
3500
|
"input",
|
|
3237
3501
|
{
|
|
3238
3502
|
id: inputId,
|
|
@@ -3248,7 +3512,7 @@ var DateField = ({
|
|
|
3248
3512
|
}
|
|
3249
3513
|
}
|
|
3250
3514
|
),
|
|
3251
|
-
/* @__PURE__ */
|
|
3515
|
+
/* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react21.default.createElement(
|
|
3252
3516
|
"button",
|
|
3253
3517
|
{
|
|
3254
3518
|
type: "button",
|
|
@@ -3261,12 +3525,12 @@ var DateField = ({
|
|
|
3261
3525
|
},
|
|
3262
3526
|
"aria-label": "Pick date"
|
|
3263
3527
|
},
|
|
3264
|
-
/* @__PURE__ */
|
|
3528
|
+
/* @__PURE__ */ import_react21.default.createElement(CalendarIcon, null)
|
|
3265
3529
|
)),
|
|
3266
|
-
label && /* @__PURE__ */
|
|
3267
|
-
variant === "outlined" && /* @__PURE__ */
|
|
3268
|
-
), open && !disabled && (0,
|
|
3269
|
-
/* @__PURE__ */
|
|
3530
|
+
label && /* @__PURE__ */ import_react21.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
|
|
3531
|
+
variant === "outlined" && /* @__PURE__ */ import_react21.default.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ import_react21.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react21.default.createElement("span", null, label, required ? " *" : "")))
|
|
3532
|
+
), open && !disabled && (0, import_react_dom4.createPortal)(
|
|
3533
|
+
/* @__PURE__ */ import_react21.default.createElement(
|
|
3270
3534
|
"div",
|
|
3271
3535
|
{
|
|
3272
3536
|
ref: pickerRef,
|
|
@@ -3291,7 +3555,7 @@ var DateField = ({
|
|
|
3291
3555
|
})(),
|
|
3292
3556
|
onMouseDown: (e) => e.preventDefault()
|
|
3293
3557
|
},
|
|
3294
|
-
/* @__PURE__ */
|
|
3558
|
+
/* @__PURE__ */ import_react21.default.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ import_react21.default.createElement(
|
|
3295
3559
|
CalendarBody,
|
|
3296
3560
|
{
|
|
3297
3561
|
viewMonth,
|
|
@@ -3305,7 +3569,7 @@ var DateField = ({
|
|
|
3305
3569
|
onMonthSelect: setViewMonth,
|
|
3306
3570
|
onYearSelect: setViewYear
|
|
3307
3571
|
}
|
|
3308
|
-
), type === "datetime" && /* @__PURE__ */
|
|
3572
|
+
), type === "datetime" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement(
|
|
3309
3573
|
SpinnerPanel,
|
|
3310
3574
|
{
|
|
3311
3575
|
hour,
|
|
@@ -3317,8 +3581,8 @@ var DateField = ({
|
|
|
3317
3581
|
onMinuteInput: handleMinuteInput,
|
|
3318
3582
|
onAmpmToggle: handleAmpmToggle
|
|
3319
3583
|
}
|
|
3320
|
-
)), /* @__PURE__ */
|
|
3321
|
-
type === "datetime-side" && /* @__PURE__ */
|
|
3584
|
+
)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
|
|
3585
|
+
type === "datetime-side" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ import_react21.default.createElement(
|
|
3322
3586
|
SpinnerPanel,
|
|
3323
3587
|
{
|
|
3324
3588
|
hour,
|
|
@@ -3330,22 +3594,22 @@ var DateField = ({
|
|
|
3330
3594
|
onMinuteInput: handleMinuteInput,
|
|
3331
3595
|
onAmpmToggle: handleAmpmToggle
|
|
3332
3596
|
}
|
|
3333
|
-
)), /* @__PURE__ */
|
|
3334
|
-
type === "datetime-scroll" && /* @__PURE__ */
|
|
3597
|
+
)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
|
|
3598
|
+
type === "datetime-scroll" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ import_react21.default.createElement(
|
|
3335
3599
|
ScrollColumn,
|
|
3336
3600
|
{
|
|
3337
3601
|
items: HOURS,
|
|
3338
3602
|
selected: hour - 1,
|
|
3339
3603
|
onSelect: handleScrollHour
|
|
3340
3604
|
}
|
|
3341
|
-
), /* @__PURE__ */
|
|
3605
|
+
), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ import_react21.default.createElement(
|
|
3342
3606
|
ScrollColumn,
|
|
3343
3607
|
{
|
|
3344
3608
|
items: MINUTES,
|
|
3345
3609
|
selected: minute,
|
|
3346
3610
|
onSelect: handleScrollMinute
|
|
3347
3611
|
}
|
|
3348
|
-
), /* @__PURE__ */
|
|
3612
|
+
), /* @__PURE__ */ import_react21.default.createElement(
|
|
3349
3613
|
ScrollColumn,
|
|
3350
3614
|
{
|
|
3351
3615
|
items: AMPMS,
|
|
@@ -3353,15 +3617,15 @@ var DateField = ({
|
|
|
3353
3617
|
onSelect: handleScrollAmpm,
|
|
3354
3618
|
infinite: false
|
|
3355
3619
|
}
|
|
3356
|
-
)), /* @__PURE__ */
|
|
3620
|
+
)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
|
|
3357
3621
|
),
|
|
3358
3622
|
document.body
|
|
3359
|
-
)), helperText && /* @__PURE__ */
|
|
3623
|
+
)), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
3360
3624
|
};
|
|
3361
3625
|
DateField.displayName = "DateField";
|
|
3362
3626
|
|
|
3363
3627
|
// lib/TextFields/DateRangeField.tsx
|
|
3364
|
-
var
|
|
3628
|
+
var import_react22 = __toESM(require("react"), 1);
|
|
3365
3629
|
var WEEKDAYS2 = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
|
|
3366
3630
|
var MONTHS2 = [
|
|
3367
3631
|
"January",
|
|
@@ -3486,7 +3750,7 @@ var detectPreset = (start, end) => {
|
|
|
3486
3750
|
if (isSameDay2(start, new Date(2e3, 0, 1)) && isSameDay2(end, today2)) return "all";
|
|
3487
3751
|
return null;
|
|
3488
3752
|
};
|
|
3489
|
-
var CalendarIcon2 = () => /* @__PURE__ */
|
|
3753
|
+
var CalendarIcon2 = () => /* @__PURE__ */ import_react22.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react22.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react22.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react22.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react22.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
|
|
3490
3754
|
var RangeCalendarBody = ({
|
|
3491
3755
|
viewYear,
|
|
3492
3756
|
viewMonth,
|
|
@@ -3511,7 +3775,7 @@ var RangeCalendarBody = ({
|
|
|
3511
3775
|
const hasRange = startDate != null && effectiveEnd != null && !isSameDay2(startDate, effectiveEnd);
|
|
3512
3776
|
const lo = startDate && effectiveEnd ? startDate <= effectiveEnd ? startDate : effectiveEnd : null;
|
|
3513
3777
|
const hi = startDate && effectiveEnd ? startDate <= effectiveEnd ? effectiveEnd : startDate : null;
|
|
3514
|
-
return /* @__PURE__ */
|
|
3778
|
+
return /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3515
3779
|
"button",
|
|
3516
3780
|
{
|
|
3517
3781
|
type: "button",
|
|
@@ -3521,7 +3785,7 @@ var RangeCalendarBody = ({
|
|
|
3521
3785
|
"aria-label": "Previous month"
|
|
3522
3786
|
},
|
|
3523
3787
|
"\u2039"
|
|
3524
|
-
), /* @__PURE__ */
|
|
3788
|
+
), /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react22.default.createElement(
|
|
3525
3789
|
"button",
|
|
3526
3790
|
{
|
|
3527
3791
|
type: "button",
|
|
@@ -3531,9 +3795,9 @@ var RangeCalendarBody = ({
|
|
|
3531
3795
|
"aria-label": "Next month"
|
|
3532
3796
|
},
|
|
3533
3797
|
"\u203A"
|
|
3534
|
-
)), /* @__PURE__ */
|
|
3798
|
+
)), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react22.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
|
|
3535
3799
|
if (day === null) {
|
|
3536
|
-
return /* @__PURE__ */
|
|
3800
|
+
return /* @__PURE__ */ import_react22.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
|
|
3537
3801
|
}
|
|
3538
3802
|
const cellDate = new Date(viewYear, viewMonth, day);
|
|
3539
3803
|
const isStart = startDate ? isSameDay2(cellDate, startDate) : false;
|
|
@@ -3553,7 +3817,7 @@ var RangeCalendarBody = ({
|
|
|
3553
3817
|
isStart || isEnd ? "rf-dr-calendar__day--selected" : "",
|
|
3554
3818
|
isToday && !isStart && !isEnd ? "rf-dr-calendar__day--today" : ""
|
|
3555
3819
|
].filter(Boolean).join(" ");
|
|
3556
|
-
return /* @__PURE__ */
|
|
3820
|
+
return /* @__PURE__ */ import_react22.default.createElement(
|
|
3557
3821
|
"div",
|
|
3558
3822
|
{
|
|
3559
3823
|
key: day,
|
|
@@ -3561,7 +3825,7 @@ var RangeCalendarBody = ({
|
|
|
3561
3825
|
onMouseEnter: () => onDayHover(cellDate),
|
|
3562
3826
|
onMouseLeave: () => onDayHover(null)
|
|
3563
3827
|
},
|
|
3564
|
-
/* @__PURE__ */
|
|
3828
|
+
/* @__PURE__ */ import_react22.default.createElement(
|
|
3565
3829
|
"button",
|
|
3566
3830
|
{
|
|
3567
3831
|
type: "button",
|
|
@@ -3575,8 +3839,8 @@ var RangeCalendarBody = ({
|
|
|
3575
3839
|
};
|
|
3576
3840
|
var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
|
|
3577
3841
|
const init = selectedDate ?? todayDate;
|
|
3578
|
-
const [viewYear, setViewYear] = (0,
|
|
3579
|
-
const [viewMonth, setViewMonth] = (0,
|
|
3842
|
+
const [viewYear, setViewYear] = (0, import_react22.useState)(init.getFullYear());
|
|
3843
|
+
const [viewMonth, setViewMonth] = (0, import_react22.useState)(init.getMonth());
|
|
3580
3844
|
const firstDay = new Date(viewYear, viewMonth, 1).getDay();
|
|
3581
3845
|
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
3582
3846
|
const dayCells = [
|
|
@@ -3595,14 +3859,14 @@ var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
|
|
|
3595
3859
|
setViewYear((y) => y + 1);
|
|
3596
3860
|
} else setViewMonth((m) => m + 1);
|
|
3597
3861
|
};
|
|
3598
|
-
return /* @__PURE__ */
|
|
3862
|
+
return /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react22.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
|
|
3599
3863
|
if (day === null) {
|
|
3600
|
-
return /* @__PURE__ */
|
|
3864
|
+
return /* @__PURE__ */ import_react22.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
|
|
3601
3865
|
}
|
|
3602
3866
|
const cellDate = new Date(viewYear, viewMonth, day);
|
|
3603
3867
|
const isSel = selectedDate ? isSameDay2(cellDate, selectedDate) : false;
|
|
3604
3868
|
const isToday = isSameDay2(cellDate, todayDate);
|
|
3605
|
-
return /* @__PURE__ */
|
|
3869
|
+
return /* @__PURE__ */ import_react22.default.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3606
3870
|
"button",
|
|
3607
3871
|
{
|
|
3608
3872
|
type: "button",
|
|
@@ -3641,22 +3905,22 @@ var DateRangeField = ({
|
|
|
3641
3905
|
const today2 = todayFn();
|
|
3642
3906
|
const committedStart = value?.start ? isoToDate2(value.start) : null;
|
|
3643
3907
|
const committedEnd = value?.end ? isoToDate2(value.end) : null;
|
|
3644
|
-
const [open, setOpen] = (0,
|
|
3645
|
-
const [draftStart, setDraftStart] = (0,
|
|
3646
|
-
const [draftEnd, setDraftEnd] = (0,
|
|
3647
|
-
const [activePreset, setActivePreset] = (0,
|
|
3908
|
+
const [open, setOpen] = (0, import_react22.useState)(false);
|
|
3909
|
+
const [draftStart, setDraftStart] = (0, import_react22.useState)(committedStart);
|
|
3910
|
+
const [draftEnd, setDraftEnd] = (0, import_react22.useState)(committedEnd);
|
|
3911
|
+
const [activePreset, setActivePreset] = (0, import_react22.useState)(
|
|
3648
3912
|
() => detectPreset(committedStart, committedEnd)
|
|
3649
3913
|
);
|
|
3650
|
-
const [startInputStr, setStartInputStr] = (0,
|
|
3651
|
-
const [endInputStr, setEndInputStr] = (0,
|
|
3652
|
-
const [inlineCal, setInlineCal] = (0,
|
|
3653
|
-
const [hoverDate, setHoverDate] = (0,
|
|
3654
|
-
const [selecting, setSelecting] = (0,
|
|
3655
|
-
const [leftViewYear, setLeftViewYear] = (0,
|
|
3656
|
-
const [leftViewMonth, setLeftViewMonth] = (0,
|
|
3657
|
-
const containerRef = (0,
|
|
3658
|
-
const inputId = (0,
|
|
3659
|
-
(0,
|
|
3914
|
+
const [startInputStr, setStartInputStr] = (0, import_react22.useState)(() => committedStart ? formatShort(committedStart) : "");
|
|
3915
|
+
const [endInputStr, setEndInputStr] = (0, import_react22.useState)(() => committedEnd ? formatShort(committedEnd) : "");
|
|
3916
|
+
const [inlineCal, setInlineCal] = (0, import_react22.useState)(null);
|
|
3917
|
+
const [hoverDate, setHoverDate] = (0, import_react22.useState)(null);
|
|
3918
|
+
const [selecting, setSelecting] = (0, import_react22.useState)("start");
|
|
3919
|
+
const [leftViewYear, setLeftViewYear] = (0, import_react22.useState)(() => today2.getFullYear());
|
|
3920
|
+
const [leftViewMonth, setLeftViewMonth] = (0, import_react22.useState)(() => today2.getMonth());
|
|
3921
|
+
const containerRef = (0, import_react22.useRef)(null);
|
|
3922
|
+
const inputId = (0, import_react22.useRef)(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
|
|
3923
|
+
(0, import_react22.useEffect)(() => {
|
|
3660
3924
|
const s2 = value?.start ? isoToDate2(value.start) : null;
|
|
3661
3925
|
const e = value?.end ? isoToDate2(value.end) : null;
|
|
3662
3926
|
setDraftStart(s2);
|
|
@@ -3665,10 +3929,10 @@ var DateRangeField = ({
|
|
|
3665
3929
|
setEndInputStr(e ? formatShort(e) : "");
|
|
3666
3930
|
setActivePreset(detectPreset(s2, e));
|
|
3667
3931
|
}, [value?.start, value?.end]);
|
|
3668
|
-
(0,
|
|
3932
|
+
(0, import_react22.useEffect)(() => {
|
|
3669
3933
|
setActivePreset(detectPreset(draftStart, draftEnd));
|
|
3670
3934
|
}, [draftStart?.getTime(), draftEnd?.getTime()]);
|
|
3671
|
-
(0,
|
|
3935
|
+
(0, import_react22.useEffect)(() => {
|
|
3672
3936
|
if (!open) return;
|
|
3673
3937
|
const handler = (e) => {
|
|
3674
3938
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
@@ -3810,7 +4074,7 @@ var DateRangeField = ({
|
|
|
3810
4074
|
className
|
|
3811
4075
|
].filter(Boolean).join(" ");
|
|
3812
4076
|
const inputPlaceholder = variant === "outlined" ? " " : void 0;
|
|
3813
|
-
return /* @__PURE__ */
|
|
4077
|
+
return /* @__PURE__ */ import_react22.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3814
4078
|
"div",
|
|
3815
4079
|
{
|
|
3816
4080
|
className: "rf-text-field__wrapper",
|
|
@@ -3819,7 +4083,7 @@ var DateRangeField = ({
|
|
|
3819
4083
|
},
|
|
3820
4084
|
style: { cursor: disabled ? "default" : "pointer" }
|
|
3821
4085
|
},
|
|
3822
|
-
/* @__PURE__ */
|
|
4086
|
+
/* @__PURE__ */ import_react22.default.createElement(
|
|
3823
4087
|
"input",
|
|
3824
4088
|
{
|
|
3825
4089
|
id: inputId,
|
|
@@ -3835,7 +4099,7 @@ var DateRangeField = ({
|
|
|
3835
4099
|
}
|
|
3836
4100
|
}
|
|
3837
4101
|
),
|
|
3838
|
-
/* @__PURE__ */
|
|
4102
|
+
/* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3839
4103
|
"button",
|
|
3840
4104
|
{
|
|
3841
4105
|
type: "button",
|
|
@@ -3848,13 +4112,13 @@ var DateRangeField = ({
|
|
|
3848
4112
|
},
|
|
3849
4113
|
"aria-label": "Pick date range"
|
|
3850
4114
|
},
|
|
3851
|
-
/* @__PURE__ */
|
|
4115
|
+
/* @__PURE__ */ import_react22.default.createElement(CalendarIcon2, null)
|
|
3852
4116
|
)),
|
|
3853
|
-
label && /* @__PURE__ */
|
|
3854
|
-
variant === "outlined" && /* @__PURE__ */
|
|
4117
|
+
label && /* @__PURE__ */ import_react22.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
|
|
4118
|
+
variant === "outlined" && /* @__PURE__ */ import_react22.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react22.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react22.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react22.default.createElement("legend", { className: "rf-text-field__legend--empty" }))
|
|
3855
4119
|
), open && !disabled && (pickerType === "panel" ? (
|
|
3856
4120
|
/* ── Panel Mode ── */
|
|
3857
|
-
/* @__PURE__ */
|
|
4121
|
+
/* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react22.default.createElement(
|
|
3858
4122
|
"button",
|
|
3859
4123
|
{
|
|
3860
4124
|
type: "button",
|
|
@@ -3865,7 +4129,7 @@ var DateRangeField = ({
|
|
|
3865
4129
|
onClick: () => handlePreset(p.id)
|
|
3866
4130
|
},
|
|
3867
4131
|
p.label
|
|
3868
|
-
)))), /* @__PURE__ */
|
|
4132
|
+
)))), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3869
4133
|
"div",
|
|
3870
4134
|
{
|
|
3871
4135
|
className: [
|
|
@@ -3873,8 +4137,8 @@ var DateRangeField = ({
|
|
|
3873
4137
|
inlineCal === "start" ? "rf-dr-picker__date-field--active" : ""
|
|
3874
4138
|
].filter(Boolean).join(" ")
|
|
3875
4139
|
},
|
|
3876
|
-
/* @__PURE__ */
|
|
3877
|
-
/* @__PURE__ */
|
|
4140
|
+
/* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
|
|
4141
|
+
/* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3878
4142
|
"input",
|
|
3879
4143
|
{
|
|
3880
4144
|
type: "text",
|
|
@@ -3885,7 +4149,7 @@ var DateRangeField = ({
|
|
|
3885
4149
|
onBlur: handleStartInputBlur,
|
|
3886
4150
|
onMouseDown: (e) => e.stopPropagation()
|
|
3887
4151
|
}
|
|
3888
|
-
), /* @__PURE__ */
|
|
4152
|
+
), /* @__PURE__ */ import_react22.default.createElement(
|
|
3889
4153
|
"button",
|
|
3890
4154
|
{
|
|
3891
4155
|
type: "button",
|
|
@@ -3894,9 +4158,9 @@ var DateRangeField = ({
|
|
|
3894
4158
|
onClick: () => setInlineCal((v) => v === "start" ? null : "start"),
|
|
3895
4159
|
"aria-label": "Pick start date"
|
|
3896
4160
|
},
|
|
3897
|
-
/* @__PURE__ */
|
|
4161
|
+
/* @__PURE__ */ import_react22.default.createElement(CalendarIcon2, null)
|
|
3898
4162
|
))
|
|
3899
|
-
), inlineCal === "start" && /* @__PURE__ */
|
|
4163
|
+
), inlineCal === "start" && /* @__PURE__ */ import_react22.default.createElement(
|
|
3900
4164
|
MiniCalendar,
|
|
3901
4165
|
{
|
|
3902
4166
|
selectedDate: draftStart,
|
|
@@ -3907,7 +4171,7 @@ var DateRangeField = ({
|
|
|
3907
4171
|
},
|
|
3908
4172
|
onClose: () => setInlineCal(null)
|
|
3909
4173
|
}
|
|
3910
|
-
)), /* @__PURE__ */
|
|
4174
|
+
)), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3911
4175
|
"div",
|
|
3912
4176
|
{
|
|
3913
4177
|
className: [
|
|
@@ -3915,8 +4179,8 @@ var DateRangeField = ({
|
|
|
3915
4179
|
inlineCal === "end" ? "rf-dr-picker__date-field--active" : ""
|
|
3916
4180
|
].filter(Boolean).join(" ")
|
|
3917
4181
|
},
|
|
3918
|
-
/* @__PURE__ */
|
|
3919
|
-
/* @__PURE__ */
|
|
4182
|
+
/* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
|
|
4183
|
+
/* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3920
4184
|
"input",
|
|
3921
4185
|
{
|
|
3922
4186
|
type: "text",
|
|
@@ -3927,7 +4191,7 @@ var DateRangeField = ({
|
|
|
3927
4191
|
onBlur: handleEndInputBlur,
|
|
3928
4192
|
onMouseDown: (e) => e.stopPropagation()
|
|
3929
4193
|
}
|
|
3930
|
-
), /* @__PURE__ */
|
|
4194
|
+
), /* @__PURE__ */ import_react22.default.createElement(
|
|
3931
4195
|
"button",
|
|
3932
4196
|
{
|
|
3933
4197
|
type: "button",
|
|
@@ -3936,9 +4200,9 @@ var DateRangeField = ({
|
|
|
3936
4200
|
onClick: () => setInlineCal((v) => v === "end" ? null : "end"),
|
|
3937
4201
|
"aria-label": "Pick end date"
|
|
3938
4202
|
},
|
|
3939
|
-
/* @__PURE__ */
|
|
4203
|
+
/* @__PURE__ */ import_react22.default.createElement(CalendarIcon2, null)
|
|
3940
4204
|
))
|
|
3941
|
-
), inlineCal === "end" && /* @__PURE__ */
|
|
4205
|
+
), inlineCal === "end" && /* @__PURE__ */ import_react22.default.createElement(
|
|
3942
4206
|
MiniCalendar,
|
|
3943
4207
|
{
|
|
3944
4208
|
selectedDate: draftEnd,
|
|
@@ -3949,7 +4213,7 @@ var DateRangeField = ({
|
|
|
3949
4213
|
},
|
|
3950
4214
|
onClose: () => setInlineCal(null)
|
|
3951
4215
|
}
|
|
3952
|
-
)), !inlineCal && /* @__PURE__ */
|
|
4216
|
+
)), !inlineCal && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ import_react22.default.createElement(
|
|
3953
4217
|
"input",
|
|
3954
4218
|
{
|
|
3955
4219
|
type: "number",
|
|
@@ -3960,7 +4224,7 @@ var DateRangeField = ({
|
|
|
3960
4224
|
onMouseDown: (e) => e.stopPropagation(),
|
|
3961
4225
|
placeholder: "\u2014"
|
|
3962
4226
|
}
|
|
3963
|
-
)), /* @__PURE__ */
|
|
4227
|
+
)), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ import_react22.default.createElement(
|
|
3964
4228
|
"input",
|
|
3965
4229
|
{
|
|
3966
4230
|
type: "number",
|
|
@@ -3971,10 +4235,10 @@ var DateRangeField = ({
|
|
|
3971
4235
|
onMouseDown: (e) => e.stopPropagation(),
|
|
3972
4236
|
placeholder: "\u2014"
|
|
3973
4237
|
}
|
|
3974
|
-
))), /* @__PURE__ */
|
|
4238
|
+
))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
|
|
3975
4239
|
) : (
|
|
3976
4240
|
/* ── Calendar Mode ── */
|
|
3977
|
-
/* @__PURE__ */
|
|
4241
|
+
/* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react22.default.createElement(
|
|
3978
4242
|
RangeCalendarBody,
|
|
3979
4243
|
{
|
|
3980
4244
|
viewYear: leftViewYear,
|
|
@@ -3989,7 +4253,7 @@ var DateRangeField = ({
|
|
|
3989
4253
|
onNext: nextMonth,
|
|
3990
4254
|
showNext: false
|
|
3991
4255
|
}
|
|
3992
|
-
), /* @__PURE__ */
|
|
4256
|
+
), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ import_react22.default.createElement(
|
|
3993
4257
|
RangeCalendarBody,
|
|
3994
4258
|
{
|
|
3995
4259
|
viewYear: rightViewYear,
|
|
@@ -4004,19 +4268,19 @@ var DateRangeField = ({
|
|
|
4004
4268
|
onNext: nextMonth,
|
|
4005
4269
|
showPrev: false
|
|
4006
4270
|
}
|
|
4007
|
-
)), selecting === "end" && draftStart && /* @__PURE__ */
|
|
4008
|
-
))), helperText && /* @__PURE__ */
|
|
4271
|
+
)), selecting === "end" && draftStart && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ import_react22.default.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ import_react22.default.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ import_react22.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
|
|
4272
|
+
))), helperText && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
4009
4273
|
};
|
|
4010
4274
|
DateRangeField.displayName = "DateRangeField";
|
|
4011
4275
|
|
|
4012
4276
|
// lib/Progress/RufousLogoLoader.tsx
|
|
4013
|
-
var
|
|
4277
|
+
var React74 = __toESM(require("react"), 1);
|
|
4014
4278
|
var _uid = 0;
|
|
4015
4279
|
var RufousLogoLoader = ({ size = 80, sx, className }) => {
|
|
4016
|
-
const clipId =
|
|
4280
|
+
const clipId = React74.useRef(`rll-${++_uid}`).current;
|
|
4017
4281
|
const height = size * (38.795 / 54.585);
|
|
4018
4282
|
const sxClass = useSx(sx);
|
|
4019
|
-
return /* @__PURE__ */
|
|
4283
|
+
return /* @__PURE__ */ React74.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size, height } }, /* @__PURE__ */ React74.createElement(
|
|
4020
4284
|
"svg",
|
|
4021
4285
|
{
|
|
4022
4286
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -4025,247 +4289,20 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
|
|
|
4025
4289
|
height,
|
|
4026
4290
|
className: "rufous-logo-loader__svg"
|
|
4027
4291
|
},
|
|
4028
|
-
/* @__PURE__ */
|
|
4292
|
+
/* @__PURE__ */ React74.createElement("defs", null, /* @__PURE__ */ React74.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React74.createElement(
|
|
4029
4293
|
"path",
|
|
4030
4294
|
{
|
|
4031
4295
|
transform: "translate(2208 18.205)",
|
|
4032
4296
|
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"
|
|
4033
4297
|
}
|
|
4034
4298
|
))),
|
|
4035
|
-
/* @__PURE__ */
|
|
4299
|
+
/* @__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" })))
|
|
4036
4300
|
));
|
|
4037
4301
|
};
|
|
4038
4302
|
|
|
4039
4303
|
// lib/DataGrid/DataGrid.tsx
|
|
4040
4304
|
var import_react23 = __toESM(require("react"), 1);
|
|
4041
4305
|
var import_lucide_react2 = require("lucide-react");
|
|
4042
|
-
|
|
4043
|
-
// lib/Tooltip/Tooltip.tsx
|
|
4044
|
-
var import_react22 = __toESM(require("react"), 1);
|
|
4045
|
-
var import_react_dom4 = __toESM(require("react-dom"), 1);
|
|
4046
|
-
var GAP = 8;
|
|
4047
|
-
function computePosition(anchor, tooltip, placement) {
|
|
4048
|
-
const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
|
|
4049
|
-
const { width: tW, height: tH } = tooltip;
|
|
4050
|
-
let top = 0;
|
|
4051
|
-
let left = 0;
|
|
4052
|
-
let arrowLeft;
|
|
4053
|
-
let arrowTop;
|
|
4054
|
-
switch (placement) {
|
|
4055
|
-
case "top":
|
|
4056
|
-
top = aTop - tH - GAP;
|
|
4057
|
-
left = aLeft + aW / 2 - tW / 2;
|
|
4058
|
-
arrowLeft = tW / 2 - 4;
|
|
4059
|
-
break;
|
|
4060
|
-
case "top-start":
|
|
4061
|
-
top = aTop - tH - GAP;
|
|
4062
|
-
left = aLeft;
|
|
4063
|
-
arrowLeft = Math.min(aW / 2, tW - 16);
|
|
4064
|
-
break;
|
|
4065
|
-
case "top-end":
|
|
4066
|
-
top = aTop - tH - GAP;
|
|
4067
|
-
left = aLeft + aW - tW;
|
|
4068
|
-
arrowLeft = Math.max(tW - aW / 2 - 4, 8);
|
|
4069
|
-
break;
|
|
4070
|
-
case "bottom":
|
|
4071
|
-
top = aTop + aH + GAP;
|
|
4072
|
-
left = aLeft + aW / 2 - tW / 2;
|
|
4073
|
-
arrowLeft = tW / 2 - 4;
|
|
4074
|
-
break;
|
|
4075
|
-
case "bottom-start":
|
|
4076
|
-
top = aTop + aH + GAP;
|
|
4077
|
-
left = aLeft;
|
|
4078
|
-
arrowLeft = Math.min(aW / 2, tW - 16);
|
|
4079
|
-
break;
|
|
4080
|
-
case "bottom-end":
|
|
4081
|
-
top = aTop + aH + GAP;
|
|
4082
|
-
left = aLeft + aW - tW;
|
|
4083
|
-
arrowLeft = Math.max(tW - aW / 2 - 4, 8);
|
|
4084
|
-
break;
|
|
4085
|
-
case "left":
|
|
4086
|
-
top = aTop + aH / 2 - tH / 2;
|
|
4087
|
-
left = aLeft - tW - GAP;
|
|
4088
|
-
arrowTop = tH / 2 - 4;
|
|
4089
|
-
break;
|
|
4090
|
-
case "left-start":
|
|
4091
|
-
top = aTop;
|
|
4092
|
-
left = aLeft - tW - GAP;
|
|
4093
|
-
arrowTop = Math.min(aH / 2, tH - 16);
|
|
4094
|
-
break;
|
|
4095
|
-
case "left-end":
|
|
4096
|
-
top = aTop + aH - tH;
|
|
4097
|
-
left = aLeft - tW - GAP;
|
|
4098
|
-
arrowTop = Math.max(tH - aH / 2 - 4, 8);
|
|
4099
|
-
break;
|
|
4100
|
-
case "right":
|
|
4101
|
-
top = aTop + aH / 2 - tH / 2;
|
|
4102
|
-
left = aLeft + aW + GAP;
|
|
4103
|
-
arrowTop = tH / 2 - 4;
|
|
4104
|
-
break;
|
|
4105
|
-
case "right-start":
|
|
4106
|
-
top = aTop;
|
|
4107
|
-
left = aLeft + aW + GAP;
|
|
4108
|
-
arrowTop = Math.min(aH / 2, tH - 16);
|
|
4109
|
-
break;
|
|
4110
|
-
case "right-end":
|
|
4111
|
-
top = aTop + aH - tH;
|
|
4112
|
-
left = aLeft + aW + GAP;
|
|
4113
|
-
arrowTop = Math.max(tH - aH / 2 - 4, 8);
|
|
4114
|
-
break;
|
|
4115
|
-
default:
|
|
4116
|
-
top = aTop - tH - GAP;
|
|
4117
|
-
left = aLeft + aW / 2 - tW / 2;
|
|
4118
|
-
}
|
|
4119
|
-
const vw = window.innerWidth;
|
|
4120
|
-
const vh = window.innerHeight;
|
|
4121
|
-
left = Math.max(8, Math.min(left, vw - tW - 8));
|
|
4122
|
-
top = Math.max(8, Math.min(top, vh - tH - 8));
|
|
4123
|
-
return { top, left, arrowLeft, arrowTop };
|
|
4124
|
-
}
|
|
4125
|
-
var Tooltip = ({
|
|
4126
|
-
title,
|
|
4127
|
-
placement = "top",
|
|
4128
|
-
arrow = false,
|
|
4129
|
-
open: controlledOpen,
|
|
4130
|
-
disableHoverListener = false,
|
|
4131
|
-
disableFocusListener = false,
|
|
4132
|
-
enterDelay = 100,
|
|
4133
|
-
leaveDelay = 0,
|
|
4134
|
-
children,
|
|
4135
|
-
followCursor = false,
|
|
4136
|
-
className = "",
|
|
4137
|
-
style,
|
|
4138
|
-
sx
|
|
4139
|
-
}) => {
|
|
4140
|
-
const sxClass = useSx(sx);
|
|
4141
|
-
const [internalOpen, setInternalOpen] = (0, import_react22.useState)(false);
|
|
4142
|
-
const [position, setPosition] = (0, import_react22.useState)({ top: 0, left: 0 });
|
|
4143
|
-
const anchorRef = (0, import_react22.useRef)(null);
|
|
4144
|
-
const tooltipRef = (0, import_react22.useRef)(null);
|
|
4145
|
-
const enterTimer = (0, import_react22.useRef)(null);
|
|
4146
|
-
const leaveTimer = (0, import_react22.useRef)(null);
|
|
4147
|
-
const cursorPos = (0, import_react22.useRef)({ x: 0, y: 0 });
|
|
4148
|
-
const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
|
|
4149
|
-
const clearTimers = (0, import_react22.useCallback)(() => {
|
|
4150
|
-
if (enterTimer.current) clearTimeout(enterTimer.current);
|
|
4151
|
-
if (leaveTimer.current) clearTimeout(leaveTimer.current);
|
|
4152
|
-
}, []);
|
|
4153
|
-
const updatePosition = (0, import_react22.useCallback)(() => {
|
|
4154
|
-
if (!anchorRef.current || !tooltipRef.current) return;
|
|
4155
|
-
const anchorRect = anchorRef.current.getBoundingClientRect();
|
|
4156
|
-
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
4157
|
-
if (followCursor) {
|
|
4158
|
-
const fakeRect = {
|
|
4159
|
-
top: cursorPos.current.y,
|
|
4160
|
-
left: cursorPos.current.x,
|
|
4161
|
-
right: cursorPos.current.x,
|
|
4162
|
-
bottom: cursorPos.current.y,
|
|
4163
|
-
width: 0,
|
|
4164
|
-
height: 0,
|
|
4165
|
-
x: cursorPos.current.x,
|
|
4166
|
-
y: cursorPos.current.y,
|
|
4167
|
-
toJSON: () => ({})
|
|
4168
|
-
};
|
|
4169
|
-
setPosition(computePosition(fakeRect, tooltipRect, placement));
|
|
4170
|
-
} else {
|
|
4171
|
-
setPosition(computePosition(anchorRect, tooltipRect, placement));
|
|
4172
|
-
}
|
|
4173
|
-
}, [placement, followCursor]);
|
|
4174
|
-
(0, import_react22.useEffect)(() => {
|
|
4175
|
-
if (isOpen) {
|
|
4176
|
-
requestAnimationFrame(() => {
|
|
4177
|
-
updatePosition();
|
|
4178
|
-
});
|
|
4179
|
-
}
|
|
4180
|
-
}, [isOpen, updatePosition]);
|
|
4181
|
-
const handleOpen = (0, import_react22.useCallback)(() => {
|
|
4182
|
-
clearTimers();
|
|
4183
|
-
if (enterDelay > 0) {
|
|
4184
|
-
enterTimer.current = setTimeout(() => {
|
|
4185
|
-
setInternalOpen(true);
|
|
4186
|
-
}, enterDelay);
|
|
4187
|
-
} else {
|
|
4188
|
-
setInternalOpen(true);
|
|
4189
|
-
}
|
|
4190
|
-
}, [enterDelay, clearTimers]);
|
|
4191
|
-
const handleClose = (0, import_react22.useCallback)(() => {
|
|
4192
|
-
clearTimers();
|
|
4193
|
-
if (leaveDelay > 0) {
|
|
4194
|
-
leaveTimer.current = setTimeout(() => {
|
|
4195
|
-
setInternalOpen(false);
|
|
4196
|
-
}, leaveDelay);
|
|
4197
|
-
} else {
|
|
4198
|
-
setInternalOpen(false);
|
|
4199
|
-
}
|
|
4200
|
-
}, [leaveDelay, clearTimers]);
|
|
4201
|
-
const handleMouseMove = (0, import_react22.useCallback)(
|
|
4202
|
-
(e) => {
|
|
4203
|
-
cursorPos.current = { x: e.clientX, y: e.clientY };
|
|
4204
|
-
if (isOpen && followCursor) {
|
|
4205
|
-
updatePosition();
|
|
4206
|
-
}
|
|
4207
|
-
},
|
|
4208
|
-
[isOpen, followCursor, updatePosition]
|
|
4209
|
-
);
|
|
4210
|
-
(0, import_react22.useEffect)(() => {
|
|
4211
|
-
return () => clearTimers();
|
|
4212
|
-
}, [clearTimers]);
|
|
4213
|
-
const childProps = {};
|
|
4214
|
-
if (!disableHoverListener) {
|
|
4215
|
-
childProps.onMouseEnter = handleOpen;
|
|
4216
|
-
childProps.onMouseLeave = handleClose;
|
|
4217
|
-
childProps.onMouseMove = followCursor ? handleMouseMove : void 0;
|
|
4218
|
-
}
|
|
4219
|
-
if (!disableFocusListener) {
|
|
4220
|
-
childProps.onFocus = handleOpen;
|
|
4221
|
-
childProps.onBlur = handleClose;
|
|
4222
|
-
}
|
|
4223
|
-
const tooltipClasses = [
|
|
4224
|
-
"rf-tooltip",
|
|
4225
|
-
`rf-tooltip--placement-${placement}`,
|
|
4226
|
-
isOpen ? "rf-tooltip--visible" : "",
|
|
4227
|
-
sxClass,
|
|
4228
|
-
className
|
|
4229
|
-
].filter(Boolean).join(" ");
|
|
4230
|
-
const tooltipElement = /* @__PURE__ */ import_react22.default.createElement(
|
|
4231
|
-
"div",
|
|
4232
|
-
{
|
|
4233
|
-
ref: tooltipRef,
|
|
4234
|
-
className: tooltipClasses,
|
|
4235
|
-
style: {
|
|
4236
|
-
top: position.top,
|
|
4237
|
-
left: position.left,
|
|
4238
|
-
...style
|
|
4239
|
-
},
|
|
4240
|
-
role: "tooltip",
|
|
4241
|
-
"aria-hidden": !isOpen
|
|
4242
|
-
},
|
|
4243
|
-
title,
|
|
4244
|
-
arrow && /* @__PURE__ */ import_react22.default.createElement(
|
|
4245
|
-
"span",
|
|
4246
|
-
{
|
|
4247
|
-
className: "rf-tooltip__arrow",
|
|
4248
|
-
style: {
|
|
4249
|
-
...position.arrowLeft !== void 0 ? { left: position.arrowLeft } : {},
|
|
4250
|
-
...position.arrowTop !== void 0 ? { top: position.arrowTop } : {}
|
|
4251
|
-
}
|
|
4252
|
-
}
|
|
4253
|
-
)
|
|
4254
|
-
);
|
|
4255
|
-
return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(
|
|
4256
|
-
"span",
|
|
4257
|
-
{
|
|
4258
|
-
ref: anchorRef,
|
|
4259
|
-
style: { display: "inline-flex", position: "relative" },
|
|
4260
|
-
"aria-describedby": isOpen ? "rf-tooltip" : void 0,
|
|
4261
|
-
...childProps
|
|
4262
|
-
},
|
|
4263
|
-
import_react22.default.cloneElement(children)
|
|
4264
|
-
), import_react_dom4.default.createPortal(tooltipElement, document.body));
|
|
4265
|
-
};
|
|
4266
|
-
Tooltip.displayName = "Tooltip";
|
|
4267
|
-
|
|
4268
|
-
// lib/DataGrid/DataGrid.tsx
|
|
4269
4306
|
var getOperatorsForType = (type) => {
|
|
4270
4307
|
if (type === "date") return [
|
|
4271
4308
|
{ value: "is", label: "is" },
|