@woobee/ui 0.2.1 → 0.2.3
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/README.md +99 -0
- package/SKIPPED.md +0 -8
- package/dist/index.d.mts +75 -1
- package/dist/index.d.ts +75 -1
- package/dist/index.js +501 -160
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +423 -85
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import React18, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback, useMemo } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
import { CSSTransition } from 'react-transition-group';
|
|
5
5
|
|
|
@@ -336,7 +336,7 @@ function useModalContext() {
|
|
|
336
336
|
}
|
|
337
337
|
function ModalProvider({ children }) {
|
|
338
338
|
const [currentState, setCurrentState] = useState(0);
|
|
339
|
-
function
|
|
339
|
+
function reducer2(state, action) {
|
|
340
340
|
const updatedValues = { ...state };
|
|
341
341
|
if ("modalShowing" in action) {
|
|
342
342
|
updatedValues.modalShowing = action.modalShowing;
|
|
@@ -349,7 +349,7 @@ function ModalProvider({ children }) {
|
|
|
349
349
|
}
|
|
350
350
|
return updatedValues;
|
|
351
351
|
}
|
|
352
|
-
const [values, dispatch] = useReducer(
|
|
352
|
+
const [values, dispatch] = useReducer(reducer2, {
|
|
353
353
|
modalShowing: false,
|
|
354
354
|
drawerShowing: false
|
|
355
355
|
});
|
|
@@ -466,7 +466,7 @@ function CSSTransitionComponent({
|
|
|
466
466
|
removeClasses(nodeRef.current, [...leaveToClasses, ...leaveClasses]);
|
|
467
467
|
onExited(nodeRef.current);
|
|
468
468
|
},
|
|
469
|
-
children:
|
|
469
|
+
children: React18.cloneElement(children, {
|
|
470
470
|
ref: (node) => {
|
|
471
471
|
nodeRef.current = node;
|
|
472
472
|
const childRef = children.ref;
|
|
@@ -1052,6 +1052,268 @@ function InlinePrompt({
|
|
|
1052
1052
|
)
|
|
1053
1053
|
] }) });
|
|
1054
1054
|
}
|
|
1055
|
+
function DefaultLink({ href, className, children }) {
|
|
1056
|
+
return /* @__PURE__ */ jsx("a", { href, className, children });
|
|
1057
|
+
}
|
|
1058
|
+
function Breadcrumb({
|
|
1059
|
+
links,
|
|
1060
|
+
onBack,
|
|
1061
|
+
linkComponent: LinkComponent = DefaultLink
|
|
1062
|
+
}) {
|
|
1063
|
+
function clickBack(e) {
|
|
1064
|
+
e.preventDefault();
|
|
1065
|
+
if (onBack) {
|
|
1066
|
+
onBack();
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
1069
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "pb-5 px-4 sm:px-6 lg:px-8", children: [
|
|
1070
|
+
onBack && /* @__PURE__ */ jsx("nav", { className: "sm:hidden", children: /* @__PURE__ */ jsxs(
|
|
1071
|
+
"a",
|
|
1072
|
+
{
|
|
1073
|
+
onClick: clickBack,
|
|
1074
|
+
className: "flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out cursor-pointer",
|
|
1075
|
+
children: [
|
|
1076
|
+
/* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
|
|
1077
|
+
"path",
|
|
1078
|
+
{
|
|
1079
|
+
fillRule: "evenodd",
|
|
1080
|
+
d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
|
|
1081
|
+
clipRule: "evenodd"
|
|
1082
|
+
}
|
|
1083
|
+
) }),
|
|
1084
|
+
"Back"
|
|
1085
|
+
]
|
|
1086
|
+
}
|
|
1087
|
+
) }),
|
|
1088
|
+
/* @__PURE__ */ jsx("nav", { className: "hidden sm:flex items-center text-sm leading-5 font-medium", children: links && links.length > 0 && links.map((link, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex", children: [
|
|
1089
|
+
/* @__PURE__ */ jsx(LinkComponent, { href: link.href, className: "text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out", children: link.name }),
|
|
1090
|
+
index !== links.length - 1 && /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
|
|
1091
|
+
"path",
|
|
1092
|
+
{
|
|
1093
|
+
fillRule: "evenodd",
|
|
1094
|
+
d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
|
|
1095
|
+
clipRule: "evenodd"
|
|
1096
|
+
}
|
|
1097
|
+
) })
|
|
1098
|
+
] }, `breadcrumb-link-${index}-${link.name}`)) })
|
|
1099
|
+
] }) });
|
|
1100
|
+
}
|
|
1101
|
+
function DefaultLink2({ href, className, children, onClick }) {
|
|
1102
|
+
return /* @__PURE__ */ jsx("a", { href, className, onClick, children });
|
|
1103
|
+
}
|
|
1104
|
+
function TabItemComponent({
|
|
1105
|
+
allowRedirect,
|
|
1106
|
+
item,
|
|
1107
|
+
label,
|
|
1108
|
+
isActive,
|
|
1109
|
+
onSelect,
|
|
1110
|
+
linkComponent: LinkComponent = DefaultLink2
|
|
1111
|
+
}) {
|
|
1112
|
+
function handleTabSelect() {
|
|
1113
|
+
onSelect(item);
|
|
1114
|
+
}
|
|
1115
|
+
if (!!allowRedirect && !!item.link) {
|
|
1116
|
+
return /* @__PURE__ */ jsx(
|
|
1117
|
+
LinkComponent,
|
|
1118
|
+
{
|
|
1119
|
+
href: item.link,
|
|
1120
|
+
className: classNames({
|
|
1121
|
+
"whitespace-no-wrap -mb-px cursor-pointer border-b-2 py-2 px-3 text-center text-sm font-medium leading-5 tracking-tight focus:outline-none sm:px-5 sm:text-base sm:tracking-normal": true,
|
|
1122
|
+
"border-primary-500 text-primary-500 focus:border-primary-500 focus:text-primary-500": isActive,
|
|
1123
|
+
"text-cool-gray-500 hover:text-cool-gray-700 focus:text-cool-gray-700 border-transparent hover:border-transparent focus:border-transparent": !isActive
|
|
1124
|
+
}),
|
|
1125
|
+
onClick: handleTabSelect,
|
|
1126
|
+
children: item[label]
|
|
1127
|
+
}
|
|
1128
|
+
);
|
|
1129
|
+
}
|
|
1130
|
+
return null;
|
|
1131
|
+
}
|
|
1132
|
+
function Tab({
|
|
1133
|
+
items,
|
|
1134
|
+
label,
|
|
1135
|
+
value,
|
|
1136
|
+
defaultValue,
|
|
1137
|
+
allowRedirect,
|
|
1138
|
+
onChange,
|
|
1139
|
+
rightContent,
|
|
1140
|
+
linkComponent
|
|
1141
|
+
}) {
|
|
1142
|
+
const [selected, setSelected] = useState(defaultValue);
|
|
1143
|
+
useEffect(() => {
|
|
1144
|
+
setSelected(value);
|
|
1145
|
+
}, [value]);
|
|
1146
|
+
function handleSelect(item) {
|
|
1147
|
+
if (typeof onChange === "function") {
|
|
1148
|
+
onChange(item);
|
|
1149
|
+
}
|
|
1150
|
+
setSelected(item && item.id || null);
|
|
1151
|
+
}
|
|
1152
|
+
return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex w-full items-stretch pb-1 sm:pb-2", children: [
|
|
1153
|
+
/* @__PURE__ */ jsx("nav", { className: "border-cool-gray-200 -mb-px flex w-full items-end border-b", children: items.map((item) => /* @__PURE__ */ jsx(
|
|
1154
|
+
TabItemComponent,
|
|
1155
|
+
{
|
|
1156
|
+
item,
|
|
1157
|
+
label,
|
|
1158
|
+
isActive: selected === item.id,
|
|
1159
|
+
allowRedirect,
|
|
1160
|
+
onSelect: handleSelect,
|
|
1161
|
+
linkComponent
|
|
1162
|
+
},
|
|
1163
|
+
item.id
|
|
1164
|
+
)) }),
|
|
1165
|
+
rightContent && /* @__PURE__ */ jsx("nav", { className: "border-cool-gray-200 -mb-px flex flex flex-shrink-0 items-center border-b px-4", children: rightContent })
|
|
1166
|
+
] });
|
|
1167
|
+
}
|
|
1168
|
+
function DefaultLink3({ href, children }) {
|
|
1169
|
+
return /* @__PURE__ */ jsx("a", { href, children });
|
|
1170
|
+
}
|
|
1171
|
+
function ButtonItem({
|
|
1172
|
+
className,
|
|
1173
|
+
active,
|
|
1174
|
+
direction,
|
|
1175
|
+
iconPosition,
|
|
1176
|
+
button,
|
|
1177
|
+
onChange,
|
|
1178
|
+
onChangeGroup,
|
|
1179
|
+
currentPath,
|
|
1180
|
+
navLinks,
|
|
1181
|
+
linkComponent: LinkComponent = DefaultLink3
|
|
1182
|
+
}) {
|
|
1183
|
+
let currentButton = { ...button };
|
|
1184
|
+
if (active && navLinks && currentPath) {
|
|
1185
|
+
const navItem = navLinks.find((navLink) => navLink.url === currentPath);
|
|
1186
|
+
if (navItem) {
|
|
1187
|
+
currentButton.label = navItem.label;
|
|
1188
|
+
currentButton.image = /* @__PURE__ */ jsx("div", { className: "w-5 h-5", children: navItem.icon });
|
|
1189
|
+
currentButton.icon = void 0;
|
|
1190
|
+
}
|
|
1191
|
+
}
|
|
1192
|
+
const buttonContent = /* @__PURE__ */ jsx(
|
|
1193
|
+
"div",
|
|
1194
|
+
{
|
|
1195
|
+
className: classNames({
|
|
1196
|
+
"p-3 rounded-xl mx-auto text-charcoal-700/70 dark:text-charcoal-50/50 flex justify-center cursor-pointer": true,
|
|
1197
|
+
"w-full": direction === "vertical",
|
|
1198
|
+
"w-full overflow-hidden": direction === "horizontal",
|
|
1199
|
+
"!text-charcoal-700 dark:!text-primary-500 bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
|
|
1200
|
+
...classNameObject(className)
|
|
1201
|
+
}),
|
|
1202
|
+
children: /* @__PURE__ */ jsxs(
|
|
1203
|
+
"div",
|
|
1204
|
+
{
|
|
1205
|
+
className: classNames({
|
|
1206
|
+
"flex items-center justify-center": true,
|
|
1207
|
+
"flex-col md:flex-row md:space-x-1.5": !!currentButton.image,
|
|
1208
|
+
"gap-2": !currentButton.image && !!currentButton.icon,
|
|
1209
|
+
"flex-row-reverse": !currentButton.image && iconPosition === "back",
|
|
1210
|
+
"flex-row": !currentButton.image && iconPosition !== "back"
|
|
1211
|
+
}),
|
|
1212
|
+
children: [
|
|
1213
|
+
currentButton.image && /* @__PURE__ */ jsxs("div", { className: "relative mb-0.5 md:mb-0", children: [
|
|
1214
|
+
typeof currentButton.image === "string" && /* @__PURE__ */ jsx(
|
|
1215
|
+
"img",
|
|
1216
|
+
{
|
|
1217
|
+
src: currentButton.image,
|
|
1218
|
+
alt: currentButton.label,
|
|
1219
|
+
className: "w-6 h-6 object-cover rounded-full pointer-events-none"
|
|
1220
|
+
}
|
|
1221
|
+
),
|
|
1222
|
+
typeof currentButton.image === "object" && currentButton.image
|
|
1223
|
+
] }),
|
|
1224
|
+
!currentButton.image && currentButton.icon && /* @__PURE__ */ jsx("span", { className: "text-sm", children: currentButton.icon }),
|
|
1225
|
+
/* @__PURE__ */ jsx(
|
|
1226
|
+
"div",
|
|
1227
|
+
{
|
|
1228
|
+
className: classNames({
|
|
1229
|
+
"text-xs font-thin tracking-tight": true,
|
|
1230
|
+
"!font-normal": active
|
|
1231
|
+
}),
|
|
1232
|
+
children: /* @__PURE__ */ jsx("div", { className: "line-clamp-1", children: currentButton.label })
|
|
1233
|
+
}
|
|
1234
|
+
)
|
|
1235
|
+
]
|
|
1236
|
+
}
|
|
1237
|
+
)
|
|
1238
|
+
}
|
|
1239
|
+
);
|
|
1240
|
+
if (currentButton.subgroups) {
|
|
1241
|
+
return /* @__PURE__ */ jsx(
|
|
1242
|
+
"div",
|
|
1243
|
+
{
|
|
1244
|
+
onClick: () => onChangeGroup(button),
|
|
1245
|
+
children: buttonContent
|
|
1246
|
+
}
|
|
1247
|
+
);
|
|
1248
|
+
}
|
|
1249
|
+
if (currentButton.url) {
|
|
1250
|
+
return /* @__PURE__ */ jsx(LinkComponent, { href: currentButton.url, children: buttonContent });
|
|
1251
|
+
}
|
|
1252
|
+
return /* @__PURE__ */ jsx(
|
|
1253
|
+
"div",
|
|
1254
|
+
{
|
|
1255
|
+
onClick: () => onChange && onChange(button.id),
|
|
1256
|
+
children: buttonContent
|
|
1257
|
+
}
|
|
1258
|
+
);
|
|
1259
|
+
}
|
|
1260
|
+
function ButtonGroup({
|
|
1261
|
+
buttons = [],
|
|
1262
|
+
direction = "horizontal",
|
|
1263
|
+
iconPosition = "front",
|
|
1264
|
+
activeId,
|
|
1265
|
+
onChange,
|
|
1266
|
+
className,
|
|
1267
|
+
itemClassName,
|
|
1268
|
+
currentPath,
|
|
1269
|
+
navLinks,
|
|
1270
|
+
linkComponent,
|
|
1271
|
+
subgroupModal
|
|
1272
|
+
}) {
|
|
1273
|
+
const [selectedGroup, setSelectedGroup] = useState(null);
|
|
1274
|
+
function handleCloseModal() {
|
|
1275
|
+
setSelectedGroup(null);
|
|
1276
|
+
}
|
|
1277
|
+
return /* @__PURE__ */ jsxs(
|
|
1278
|
+
"div",
|
|
1279
|
+
{
|
|
1280
|
+
className: classNames({
|
|
1281
|
+
"gap-2 scrollbar-hide": true,
|
|
1282
|
+
"w-full": direction === "vertical",
|
|
1283
|
+
"grid grid-cols-5 w-full items-center": direction === "horizontal",
|
|
1284
|
+
...classNameObject(className)
|
|
1285
|
+
}),
|
|
1286
|
+
children: [
|
|
1287
|
+
buttons.map((button) => {
|
|
1288
|
+
const isActive = activeId === button.id;
|
|
1289
|
+
return /* @__PURE__ */ jsx(
|
|
1290
|
+
ButtonItem,
|
|
1291
|
+
{
|
|
1292
|
+
className: itemClassName,
|
|
1293
|
+
button,
|
|
1294
|
+
direction,
|
|
1295
|
+
iconPosition,
|
|
1296
|
+
onChange,
|
|
1297
|
+
onChangeGroup: (group) => setSelectedGroup(group),
|
|
1298
|
+
active: isActive,
|
|
1299
|
+
currentPath,
|
|
1300
|
+
navLinks,
|
|
1301
|
+
linkComponent
|
|
1302
|
+
},
|
|
1303
|
+
button.id
|
|
1304
|
+
);
|
|
1305
|
+
}),
|
|
1306
|
+
subgroupModal && subgroupModal({
|
|
1307
|
+
open: !!selectedGroup,
|
|
1308
|
+
label: selectedGroup?.label,
|
|
1309
|
+
items: selectedGroup?.subgroups,
|
|
1310
|
+
onClose: handleCloseModal,
|
|
1311
|
+
onChange
|
|
1312
|
+
})
|
|
1313
|
+
]
|
|
1314
|
+
}
|
|
1315
|
+
);
|
|
1316
|
+
}
|
|
1055
1317
|
function H1({ className, children }) {
|
|
1056
1318
|
return /* @__PURE__ */ jsx(
|
|
1057
1319
|
"h1",
|
|
@@ -1555,7 +1817,7 @@ function TagInput({
|
|
|
1555
1817
|
}) {
|
|
1556
1818
|
const [currentState, setCurrentState] = useState(0);
|
|
1557
1819
|
const tagInputRef = useRef(null);
|
|
1558
|
-
function
|
|
1820
|
+
function reducer2(state, action) {
|
|
1559
1821
|
const updatedValues = { ...state };
|
|
1560
1822
|
if ("tags" in action) {
|
|
1561
1823
|
updatedValues.tags = Array.from(new Set(action.tags));
|
|
@@ -1568,7 +1830,7 @@ function TagInput({
|
|
|
1568
1830
|
}
|
|
1569
1831
|
return updatedValues;
|
|
1570
1832
|
}
|
|
1571
|
-
const [values, dispatch] = useReducer(
|
|
1833
|
+
const [values, dispatch] = useReducer(reducer2, {
|
|
1572
1834
|
tags: []
|
|
1573
1835
|
});
|
|
1574
1836
|
const { tags } = values;
|
|
@@ -1660,6 +1922,60 @@ function NoData({ className }) {
|
|
|
1660
1922
|
] });
|
|
1661
1923
|
}
|
|
1662
1924
|
var ThemeContext = createContext(void 0);
|
|
1925
|
+
var currentIsDark = false;
|
|
1926
|
+
var matchMediaListeners = /* @__PURE__ */ new Set();
|
|
1927
|
+
var originalMatchMedia = null;
|
|
1928
|
+
if (typeof window !== "undefined") {
|
|
1929
|
+
originalMatchMedia = window.matchMedia;
|
|
1930
|
+
try {
|
|
1931
|
+
const saved = localStorage.getItem("theme");
|
|
1932
|
+
const prefersDark = originalMatchMedia.call(window, "(prefers-color-scheme: dark)").matches;
|
|
1933
|
+
const isSystemOrNone = !saved || saved === "system";
|
|
1934
|
+
currentIsDark = saved === "dark" || isSystemOrNone && prefersDark;
|
|
1935
|
+
} catch (e) {
|
|
1936
|
+
}
|
|
1937
|
+
window.matchMedia = function(query) {
|
|
1938
|
+
const normalized = query.replace(/\s+/g, "").toLowerCase();
|
|
1939
|
+
const isDarkQuery = normalized.includes("prefers-color-scheme:dark");
|
|
1940
|
+
const isLightQuery = normalized.includes("prefers-color-scheme:light");
|
|
1941
|
+
if (isDarkQuery || isLightQuery) {
|
|
1942
|
+
const matches = isDarkQuery ? currentIsDark : !currentIsDark;
|
|
1943
|
+
return {
|
|
1944
|
+
matches,
|
|
1945
|
+
media: query,
|
|
1946
|
+
onchange: null,
|
|
1947
|
+
addListener(listener) {
|
|
1948
|
+
matchMediaListeners.add({ listener, query });
|
|
1949
|
+
},
|
|
1950
|
+
removeListener(listener) {
|
|
1951
|
+
for (const item of matchMediaListeners) {
|
|
1952
|
+
if (item.listener === listener) {
|
|
1953
|
+
matchMediaListeners.delete(item);
|
|
1954
|
+
}
|
|
1955
|
+
}
|
|
1956
|
+
},
|
|
1957
|
+
addEventListener(type, listener) {
|
|
1958
|
+
if (type === "change") {
|
|
1959
|
+
matchMediaListeners.add({ listener, query });
|
|
1960
|
+
}
|
|
1961
|
+
},
|
|
1962
|
+
removeEventListener(type, listener) {
|
|
1963
|
+
if (type === "change") {
|
|
1964
|
+
for (const item of matchMediaListeners) {
|
|
1965
|
+
if (item.listener === listener) {
|
|
1966
|
+
matchMediaListeners.delete(item);
|
|
1967
|
+
}
|
|
1968
|
+
}
|
|
1969
|
+
}
|
|
1970
|
+
},
|
|
1971
|
+
dispatchEvent(event) {
|
|
1972
|
+
return true;
|
|
1973
|
+
}
|
|
1974
|
+
};
|
|
1975
|
+
}
|
|
1976
|
+
return originalMatchMedia.call(window, query);
|
|
1977
|
+
};
|
|
1978
|
+
}
|
|
1663
1979
|
function ThemeProvider({ children, defaultTheme = "system" }) {
|
|
1664
1980
|
const [mode, setMode] = useState(defaultTheme);
|
|
1665
1981
|
const [isDark, setIsDark] = useState(false);
|
|
@@ -1671,27 +1987,47 @@ function ThemeProvider({ children, defaultTheme = "system" }) {
|
|
|
1671
1987
|
}, [defaultTheme]);
|
|
1672
1988
|
useEffect(() => {
|
|
1673
1989
|
if (!mounted) return;
|
|
1674
|
-
const media =
|
|
1990
|
+
const media = originalMatchMedia ? originalMatchMedia.call(window, "(prefers-color-scheme: dark)") : null;
|
|
1675
1991
|
const updateTheme = () => {
|
|
1676
|
-
const prefersDark = media.matches;
|
|
1677
|
-
const
|
|
1678
|
-
if (
|
|
1992
|
+
const prefersDark = media ? media.matches : false;
|
|
1993
|
+
const currentIsDarkVal = mode === "dark" || mode === "system" && prefersDark;
|
|
1994
|
+
if (currentIsDarkVal) {
|
|
1679
1995
|
document.documentElement.classList.add("dark");
|
|
1680
1996
|
document.documentElement.classList.remove("light");
|
|
1681
1997
|
} else {
|
|
1682
1998
|
document.documentElement.classList.remove("dark");
|
|
1683
1999
|
document.documentElement.classList.add("light");
|
|
1684
2000
|
}
|
|
1685
|
-
|
|
2001
|
+
currentIsDark = currentIsDarkVal;
|
|
2002
|
+
setIsDark(currentIsDarkVal);
|
|
2003
|
+
matchMediaListeners.forEach(({ listener, query }) => {
|
|
2004
|
+
try {
|
|
2005
|
+
const normalized = query.replace(/\s+/g, "").toLowerCase();
|
|
2006
|
+
const isDarkQuery = normalized.includes("prefers-color-scheme:dark");
|
|
2007
|
+
const matches = isDarkQuery ? currentIsDarkVal : !currentIsDarkVal;
|
|
2008
|
+
const event = { matches, media: query };
|
|
2009
|
+
if (typeof listener === "function") {
|
|
2010
|
+
listener(event);
|
|
2011
|
+
} else if (listener && typeof listener.handleEvent === "function") {
|
|
2012
|
+
listener.handleEvent(event);
|
|
2013
|
+
}
|
|
2014
|
+
} catch (e) {
|
|
2015
|
+
console.error(e);
|
|
2016
|
+
}
|
|
2017
|
+
});
|
|
1686
2018
|
};
|
|
1687
2019
|
const timeoutId = setTimeout(updateTheme, 0);
|
|
1688
2020
|
const handleMediaChange = () => {
|
|
1689
2021
|
updateTheme();
|
|
1690
2022
|
};
|
|
1691
|
-
media
|
|
2023
|
+
if (media) {
|
|
2024
|
+
media.addEventListener("change", handleMediaChange);
|
|
2025
|
+
}
|
|
1692
2026
|
return () => {
|
|
1693
2027
|
clearTimeout(timeoutId);
|
|
1694
|
-
media
|
|
2028
|
+
if (media) {
|
|
2029
|
+
media.removeEventListener("change", handleMediaChange);
|
|
2030
|
+
}
|
|
1695
2031
|
};
|
|
1696
2032
|
}, [mode, mounted]);
|
|
1697
2033
|
function handleToggleTheme(triggerMode) {
|
|
@@ -1947,71 +2283,65 @@ var resetValues = {
|
|
|
1947
2283
|
description: null,
|
|
1948
2284
|
actions: null
|
|
1949
2285
|
};
|
|
1950
|
-
function
|
|
1951
|
-
|
|
1952
|
-
const
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
updatedValues.show = action.show;
|
|
1958
|
-
}
|
|
1959
|
-
if ("style" in action) {
|
|
1960
|
-
updatedValues.style = action.style;
|
|
1961
|
-
}
|
|
1962
|
-
if ("tooltipStyle" in action) {
|
|
1963
|
-
updatedValues.tooltipStyle = action.tooltipStyle;
|
|
1964
|
-
}
|
|
1965
|
-
if ("position" in action) {
|
|
1966
|
-
updatedValues.position = action.position;
|
|
1967
|
-
}
|
|
1968
|
-
if ("description" in action) {
|
|
1969
|
-
updatedValues.description = action.description;
|
|
2286
|
+
function reducer(state, action) {
|
|
2287
|
+
let changed = false;
|
|
2288
|
+
for (const k in action) {
|
|
2289
|
+
const key = k;
|
|
2290
|
+
if (action[key] !== state[key]) {
|
|
2291
|
+
changed = true;
|
|
2292
|
+
break;
|
|
1970
2293
|
}
|
|
1971
|
-
if ("actions" in action) {
|
|
1972
|
-
updatedValues.actions = action.actions;
|
|
1973
|
-
}
|
|
1974
|
-
if ("render" in action && !!action.render) {
|
|
1975
|
-
setCurrentState((prev) => 1 - prev);
|
|
1976
|
-
}
|
|
1977
|
-
return updatedValues;
|
|
1978
2294
|
}
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
});
|
|
2295
|
+
if (!changed) return state;
|
|
2296
|
+
const updatedValues = { ...state };
|
|
2297
|
+
if ("show" in action) {
|
|
2298
|
+
updatedValues.show = action.show;
|
|
1984
2299
|
}
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
...resetValues,
|
|
1988
|
-
render: true
|
|
1989
|
-
});
|
|
2300
|
+
if ("style" in action) {
|
|
2301
|
+
updatedValues.style = action.style;
|
|
1990
2302
|
}
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
)
|
|
2303
|
+
if ("tooltipStyle" in action) {
|
|
2304
|
+
updatedValues.tooltipStyle = action.tooltipStyle;
|
|
2305
|
+
}
|
|
2306
|
+
if ("position" in action) {
|
|
2307
|
+
updatedValues.position = action.position;
|
|
2308
|
+
}
|
|
2309
|
+
if ("description" in action) {
|
|
2310
|
+
updatedValues.description = action.description;
|
|
2311
|
+
}
|
|
2312
|
+
if ("actions" in action) {
|
|
2313
|
+
updatedValues.actions = action.actions;
|
|
2314
|
+
}
|
|
2315
|
+
return updatedValues;
|
|
2316
|
+
}
|
|
2317
|
+
function PopoverProvider({ children }) {
|
|
2318
|
+
const [values, dispatch] = useReducer(reducer, resetValues);
|
|
2319
|
+
const { show, style, tooltipStyle, position, description, actions } = values;
|
|
2320
|
+
const handleShowPopover = useCallback((params) => {
|
|
2321
|
+
dispatch(params);
|
|
2322
|
+
}, []);
|
|
2323
|
+
const handleClosePopover = useCallback(() => {
|
|
2324
|
+
dispatch(resetValues);
|
|
2325
|
+
}, []);
|
|
2326
|
+
const contextValue = useMemo(() => ({
|
|
2327
|
+
showPopover: show,
|
|
2328
|
+
setPopover: handleShowPopover
|
|
2329
|
+
}), [show, handleShowPopover]);
|
|
2330
|
+
return /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: contextValue, children: [
|
|
2331
|
+
children,
|
|
2332
|
+
!!show && /* @__PURE__ */ jsx(
|
|
2333
|
+
PopoverCard,
|
|
2334
|
+
{
|
|
2335
|
+
show,
|
|
2336
|
+
style,
|
|
2337
|
+
tooltipStyle,
|
|
2338
|
+
position,
|
|
2339
|
+
description,
|
|
2340
|
+
actions,
|
|
2341
|
+
onClose: handleClosePopover
|
|
2342
|
+
}
|
|
2343
|
+
)
|
|
2344
|
+
] });
|
|
2015
2345
|
}
|
|
2016
2346
|
function usePopoverContext() {
|
|
2017
2347
|
const context = useContext(PopoverContext);
|
|
@@ -2026,8 +2356,15 @@ function Popover({ className, description, actions, children, opts }) {
|
|
|
2026
2356
|
const { screenWidth, screenHeight } = useResizeListener();
|
|
2027
2357
|
const [menuData, setMenuData] = useState({ showMenu: false, x: 0, y: 0, left: 0, right: 0, top: 0, bottom: 0 });
|
|
2028
2358
|
const parentRef = useRef(null);
|
|
2359
|
+
const prevShowMenuRef = useRef(false);
|
|
2360
|
+
const prevShowPopoverRef = useRef(false);
|
|
2029
2361
|
(actions || []).some((action) => (action.items || []).length > 0);
|
|
2030
2362
|
useEffect(() => {
|
|
2363
|
+
const wasOpen = prevShowMenuRef.current;
|
|
2364
|
+
prevShowMenuRef.current = menuData.showMenu;
|
|
2365
|
+
if (!menuData.showMenu && !wasOpen) {
|
|
2366
|
+
return;
|
|
2367
|
+
}
|
|
2031
2368
|
const stickyTop = menuData.showMenu && screenHeight - (menuData.y + 14) < 300;
|
|
2032
2369
|
setPopover({
|
|
2033
2370
|
show: menuData.showMenu,
|
|
@@ -2051,13 +2388,14 @@ function Popover({ className, description, actions, children, opts }) {
|
|
|
2051
2388
|
});
|
|
2052
2389
|
}, [menuData, screenWidth, screenHeight, description, actions, setPopover]);
|
|
2053
2390
|
useEffect(() => {
|
|
2054
|
-
if (
|
|
2391
|
+
if (prevShowPopoverRef.current && !showPopover) {
|
|
2055
2392
|
setMenuData((prev) => ({
|
|
2056
2393
|
...prev,
|
|
2057
2394
|
showMenu: false
|
|
2058
2395
|
}));
|
|
2059
2396
|
}
|
|
2060
|
-
|
|
2397
|
+
prevShowPopoverRef.current = showPopover;
|
|
2398
|
+
}, [showPopover]);
|
|
2061
2399
|
function handleToggleMenu(e) {
|
|
2062
2400
|
e.stopPropagation();
|
|
2063
2401
|
if (menuData.showMenu) {
|
|
@@ -2180,7 +2518,7 @@ function Dragger({
|
|
|
2180
2518
|
onChange
|
|
2181
2519
|
}) {
|
|
2182
2520
|
const [, setCurrentState] = useState(0);
|
|
2183
|
-
const [values, dispatch] = useReducer(
|
|
2521
|
+
const [values, dispatch] = useReducer(reducer2, {
|
|
2184
2522
|
items: null,
|
|
2185
2523
|
displayItems: null,
|
|
2186
2524
|
dragging: false,
|
|
@@ -2219,7 +2557,7 @@ function Dragger({
|
|
|
2219
2557
|
}
|
|
2220
2558
|
}
|
|
2221
2559
|
}, [grandChildren, updated]);
|
|
2222
|
-
function
|
|
2560
|
+
function reducer2(state, action) {
|
|
2223
2561
|
const updatedValues = { ...state };
|
|
2224
2562
|
if ("items" in action) {
|
|
2225
2563
|
updatedValues.items = action.items;
|
|
@@ -2440,9 +2778,9 @@ function Dragger({
|
|
|
2440
2778
|
}
|
|
2441
2779
|
dispatch({ dragging: false });
|
|
2442
2780
|
}
|
|
2443
|
-
const derivedItems = !!items &&
|
|
2781
|
+
const derivedItems = !!items && React18.cloneElement(children, {
|
|
2444
2782
|
children: items.map((grandChild, index) => {
|
|
2445
|
-
return
|
|
2783
|
+
return React18.cloneElement(grandChild, {
|
|
2446
2784
|
id: (records[index] || {}).id,
|
|
2447
2785
|
draggable: true,
|
|
2448
2786
|
className: classNames({
|
|
@@ -2459,9 +2797,9 @@ function Dragger({
|
|
|
2459
2797
|
});
|
|
2460
2798
|
})
|
|
2461
2799
|
});
|
|
2462
|
-
const derivedDisplayItems = !!displayItems &&
|
|
2800
|
+
const derivedDisplayItems = !!displayItems && React18.cloneElement(children, {
|
|
2463
2801
|
children: displayItems.map((grandChild, index) => {
|
|
2464
|
-
return
|
|
2802
|
+
return React18.cloneElement(grandChild, {
|
|
2465
2803
|
draggable: true,
|
|
2466
2804
|
className: classNames({
|
|
2467
2805
|
...classNameObject(grandChild.props.className),
|
|
@@ -3060,7 +3398,7 @@ function DataTableRow({ index, selected, label, description, additionalDescripti
|
|
|
3060
3398
|
"!text-left": dataItem.align === "left",
|
|
3061
3399
|
"align-middle": vertical === "middle"
|
|
3062
3400
|
}),
|
|
3063
|
-
children: typeof dataItem.data[index] === "string" ||
|
|
3401
|
+
children: typeof dataItem.data[index] === "string" || React18.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
|
|
3064
3402
|
},
|
|
3065
3403
|
`${dataIndex}-${index}`
|
|
3066
3404
|
))
|
|
@@ -3197,7 +3535,7 @@ function DataTable({
|
|
|
3197
3535
|
backgroundColor: `${colors[dataIndex]}`,
|
|
3198
3536
|
color: bestTextColorForBg(colors[dataIndex])
|
|
3199
3537
|
} : void 0,
|
|
3200
|
-
children: typeof total[dataIndex] === "string" ||
|
|
3538
|
+
children: typeof total[dataIndex] === "string" || React18.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
|
|
3201
3539
|
},
|
|
3202
3540
|
`${dataIndex}-total`
|
|
3203
3541
|
))
|
|
@@ -3609,6 +3947,6 @@ function DataGrid({ headers, data, selectedId, footers, opts, onSelect }) {
|
|
|
3609
3947
|
);
|
|
3610
3948
|
}
|
|
3611
3949
|
|
|
3612
|
-
export { B, Button, CheckboxList, ConfirmationBox, Coverflow, DataGrid, Dragger, Drawer, ExcelTable, H1, H2, H3, H4, InlinePrompt, Input_default as Input, Label, Loading, Modal, ModalContext, ModalProvider, NoData, Popover, PopoverContext, PopoverProvider, Select_default as Select, SelectInput_default as SelectInput, SortIcon, Table, Tabs, Tag, TagGroup, TagInput, Tbody, Td, Textarea_default as Textarea, Th, Thead, ThemeContext, ThemeProvider, ThemeToggle, Toggle_default as Toggle, Tr, Transition, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };
|
|
3950
|
+
export { B, Breadcrumb, Button, ButtonGroup, CheckboxList, ConfirmationBox, Coverflow, DataGrid, Dragger, Drawer, ExcelTable, H1, H2, H3, H4, InlinePrompt, Input_default as Input, Label, Loading, Modal, ModalContext, ModalProvider, NoData, Popover, PopoverContext, PopoverProvider, Select_default as Select, SelectInput_default as SelectInput, SortIcon, Tab, Table, Tabs, Tag, TagGroup, TagInput, Tbody, Td, Textarea_default as Textarea, Th, Thead, ThemeContext, ThemeProvider, ThemeToggle, Toggle_default as Toggle, Tr, Transition, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };
|
|
3613
3951
|
//# sourceMappingURL=index.mjs.map
|
|
3614
3952
|
//# sourceMappingURL=index.mjs.map
|