@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/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import React16, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback } from 'react';
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 reducer(state, action) {
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(reducer, {
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: React16.cloneElement(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 reducer(state, action) {
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(reducer, {
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 = window.matchMedia("(prefers-color-scheme: dark)");
1990
+ const media = originalMatchMedia ? originalMatchMedia.call(window, "(prefers-color-scheme: dark)") : null;
1675
1991
  const updateTheme = () => {
1676
- const prefersDark = media.matches;
1677
- const currentIsDark = mode === "dark" || mode === "system" && prefersDark;
1678
- if (currentIsDark) {
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
- setIsDark(currentIsDark);
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.addEventListener("change", handleMediaChange);
2023
+ if (media) {
2024
+ media.addEventListener("change", handleMediaChange);
2025
+ }
1692
2026
  return () => {
1693
2027
  clearTimeout(timeoutId);
1694
- media.removeEventListener("change", handleMediaChange);
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 PopoverProvider({ children }) {
1951
- const [currentState, setCurrentState] = useState(0);
1952
- const [values, dispatch] = useReducer(reducer, resetValues);
1953
- const { show, style, tooltipStyle, position, description, actions } = values;
1954
- function reducer(state, action) {
1955
- const updatedValues = { ...state };
1956
- if ("show" in action) {
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
- function handleShowPopover(params) {
1980
- dispatch({
1981
- ...params,
1982
- render: true
1983
- });
2295
+ if (!changed) return state;
2296
+ const updatedValues = { ...state };
2297
+ if ("show" in action) {
2298
+ updatedValues.show = action.show;
1984
2299
  }
1985
- function handleClosePopover() {
1986
- dispatch({
1987
- ...resetValues,
1988
- render: true
1989
- });
2300
+ if ("style" in action) {
2301
+ updatedValues.style = action.style;
1990
2302
  }
1991
- return /* @__PURE__ */ jsxs(
1992
- PopoverContext.Provider,
1993
- {
1994
- value: {
1995
- showPopover: show,
1996
- setPopover: handleShowPopover
1997
- },
1998
- children: [
1999
- children,
2000
- !!show && /* @__PURE__ */ jsx(
2001
- PopoverCard,
2002
- {
2003
- show,
2004
- style,
2005
- tooltipStyle,
2006
- position,
2007
- description,
2008
- actions,
2009
- onClose: handleClosePopover
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 (!showPopover && !!menuData.showMenu) {
2391
+ if (prevShowPopoverRef.current && !showPopover) {
2055
2392
  setMenuData((prev) => ({
2056
2393
  ...prev,
2057
2394
  showMenu: false
2058
2395
  }));
2059
2396
  }
2060
- }, [showPopover, menuData.showMenu]);
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(reducer, {
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 reducer(state, action) {
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 && React16.cloneElement(children, {
2781
+ const derivedItems = !!items && React18.cloneElement(children, {
2444
2782
  children: items.map((grandChild, index) => {
2445
- return React16.cloneElement(grandChild, {
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 && React16.cloneElement(children, {
2800
+ const derivedDisplayItems = !!displayItems && React18.cloneElement(children, {
2463
2801
  children: displayItems.map((grandChild, index) => {
2464
- return React16.cloneElement(grandChild, {
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" || React16.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
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" || React16.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
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