@underverse-ui/underverse 1.0.165 → 1.0.166
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/api-reference.json +23 -2
- package/dist/index.cjs +1087 -1024
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +16 -1
- package/dist/index.d.ts +16 -1
- package/dist/index.js +814 -754
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3349,6 +3349,9 @@ var Input_default = Input;
|
|
|
3349
3349
|
import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState6 } from "react";
|
|
3350
3350
|
import { Search as Search2, X as X2, Smile, Leaf, Utensils, Dumbbell, Lightbulb, Hash, Flag } from "lucide-react";
|
|
3351
3351
|
|
|
3352
|
+
// src/components/emoji-ui.tsx
|
|
3353
|
+
import React11 from "react";
|
|
3354
|
+
|
|
3352
3355
|
// src/components/Tooltip.tsx
|
|
3353
3356
|
import * as React10 from "react";
|
|
3354
3357
|
import { createPortal } from "react-dom";
|
|
@@ -3718,22 +3721,63 @@ function formatEmojiName(name) {
|
|
|
3718
3721
|
function formatEmojiCountLabel(template, shown, total) {
|
|
3719
3722
|
return template.replace("{shown}", String(shown)).replace("{total}", String(total));
|
|
3720
3723
|
}
|
|
3724
|
+
function getEmojiUnifiedCode(emoji) {
|
|
3725
|
+
const codePoints = [];
|
|
3726
|
+
for (let i = 0; i < emoji.length; ) {
|
|
3727
|
+
const codePoint = emoji.codePointAt(i);
|
|
3728
|
+
if (codePoint === void 0) break;
|
|
3729
|
+
let hex = codePoint.toString(16).toLowerCase();
|
|
3730
|
+
if (hex.length < 4) {
|
|
3731
|
+
hex = hex.padStart(4, "0");
|
|
3732
|
+
}
|
|
3733
|
+
codePoints.push(hex);
|
|
3734
|
+
i += codePoint > 65535 ? 2 : 1;
|
|
3735
|
+
}
|
|
3736
|
+
return codePoints.join("-");
|
|
3737
|
+
}
|
|
3738
|
+
var globalEmojiBaseUrl = "https://underverse.infiniq.com.vn/emojis";
|
|
3739
|
+
function setEmojiBaseUrl(url) {
|
|
3740
|
+
globalEmojiBaseUrl = url.endsWith("/") ? url.slice(0, -1) : url;
|
|
3741
|
+
}
|
|
3742
|
+
function getEmojiImageUrl(unified) {
|
|
3743
|
+
return `${globalEmojiBaseUrl}/${unified}.png`;
|
|
3744
|
+
}
|
|
3721
3745
|
var EmojiGridButton = ({ emoji, name, onClick, className, active = false }) => {
|
|
3722
|
-
|
|
3746
|
+
const [hasError, setHasError] = React11.useState(false);
|
|
3747
|
+
const [isHovered, setIsHovered] = React11.useState(false);
|
|
3748
|
+
const unified = React11.useMemo(() => getEmojiUnifiedCode(emoji), [emoji]);
|
|
3749
|
+
const button = /* @__PURE__ */ jsx12(
|
|
3723
3750
|
"button",
|
|
3724
3751
|
{
|
|
3725
3752
|
type: "button",
|
|
3726
3753
|
"aria-label": formatEmojiName(name),
|
|
3727
3754
|
onClick,
|
|
3755
|
+
onMouseEnter: () => setIsHovered(true),
|
|
3756
|
+
onMouseLeave: () => setIsHovered(false),
|
|
3728
3757
|
className: cn(
|
|
3729
|
-
"flex h-9 w-9 items-center justify-center rounded-
|
|
3758
|
+
"group flex h-9 w-9 items-center justify-center rounded-xl transition-all duration-300",
|
|
3759
|
+
"bg-transparent hover:bg-primary/10 border border-transparent hover:border-primary/20",
|
|
3730
3760
|
"focus:outline-none focus:ring-2 focus:ring-primary/20",
|
|
3731
|
-
|
|
3761
|
+
"scale-100 hover:scale-110 active:scale-95",
|
|
3762
|
+
active ? "bg-primary/15 border-primary/30 ring-2 ring-primary/20" : "",
|
|
3732
3763
|
className
|
|
3733
3764
|
),
|
|
3734
|
-
children: emoji
|
|
3765
|
+
children: hasError ? /* @__PURE__ */ jsx12("span", { className: "text-2xl transition-transform duration-300 group-hover:rotate-6", children: emoji }) : /* @__PURE__ */ jsx12(
|
|
3766
|
+
"img",
|
|
3767
|
+
{
|
|
3768
|
+
src: getEmojiImageUrl(unified),
|
|
3769
|
+
alt: emoji,
|
|
3770
|
+
onError: () => setHasError(true),
|
|
3771
|
+
className: "h-6.5 w-6.5 object-contain transition-all duration-300 group-hover:rotate-6 group-hover:drop-shadow-[0_2px_5px_rgba(0,0,0,0.15)]",
|
|
3772
|
+
loading: "lazy"
|
|
3773
|
+
}
|
|
3774
|
+
)
|
|
3735
3775
|
}
|
|
3736
|
-
)
|
|
3776
|
+
);
|
|
3777
|
+
if (!isHovered) {
|
|
3778
|
+
return button;
|
|
3779
|
+
}
|
|
3780
|
+
return /* @__PURE__ */ jsx12(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium", children: formatEmojiName(name) }), children: button });
|
|
3737
3781
|
};
|
|
3738
3782
|
|
|
3739
3783
|
// src/components/UEditor/emojis.ts
|
|
@@ -4583,9 +4627,13 @@ var EmojiPicker = ({
|
|
|
4583
4627
|
ref: assignRef2 ? (el) => {
|
|
4584
4628
|
categoryRefs.current[category.id] = el;
|
|
4585
4629
|
} : void 0,
|
|
4630
|
+
className: "scroll-mt-3 mb-2",
|
|
4586
4631
|
children: [
|
|
4587
|
-
/* @__PURE__ */
|
|
4588
|
-
|
|
4632
|
+
/* @__PURE__ */ jsxs7("div", { className: "sticky top-0 z-10 bg-card/85 backdrop-blur-md py-1.5 px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90 border-b border-border/5 mb-2 flex items-center gap-1.5 rounded-lg select-none", children: [
|
|
4633
|
+
/* @__PURE__ */ jsx13("span", { className: "w-1.5 h-1.5 rounded-full bg-primary/70 animate-pulse" }),
|
|
4634
|
+
category.name
|
|
4635
|
+
] }),
|
|
4636
|
+
/* @__PURE__ */ jsx13("div", { className: "grid gap-1.5 p-1", style: gridStyle, children: category.emojis.map((emoji) => /* @__PURE__ */ jsx13(
|
|
4589
4637
|
EmojiGridButton,
|
|
4590
4638
|
{
|
|
4591
4639
|
emoji: emoji.emoji,
|
|
@@ -4599,10 +4647,10 @@ var EmojiPicker = ({
|
|
|
4599
4647
|
},
|
|
4600
4648
|
category.id
|
|
4601
4649
|
);
|
|
4602
|
-
const searchResultContent = filteredCategories.length > 0 ? filteredCategories.map((category) => /* @__PURE__ */ jsx13("div", { className: "mb-4", children: renderEmojiCategory(category) }, category.id)) : /* @__PURE__ */ jsxs7("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
|
|
4603
|
-
/* @__PURE__ */ jsx13("div", { className: "mb-
|
|
4604
|
-
/* @__PURE__ */ jsx13("div", { className: "text-sm font-
|
|
4605
|
-
/* @__PURE__ */ jsx13("div", { className: "mt-1 text-xs text-muted-foreground", children: resolvedEmptyHint })
|
|
4650
|
+
const searchResultContent = filteredCategories.length > 0 ? filteredCategories.map((category) => /* @__PURE__ */ jsx13("div", { className: "mb-4 animate-fade-in", children: renderEmojiCategory(category) }, category.id)) : /* @__PURE__ */ jsxs7("div", { className: "flex h-full flex-col items-center justify-center text-center py-12 animate-fade-in", children: [
|
|
4651
|
+
/* @__PURE__ */ jsx13("div", { className: "mb-3 text-4xl animate-bounce", children: "\u{1F50D}" }),
|
|
4652
|
+
/* @__PURE__ */ jsx13("div", { className: "text-sm font-semibold text-muted-foreground", children: resolvedEmptyText }),
|
|
4653
|
+
/* @__PURE__ */ jsx13("div", { className: "mt-1 text-xs text-muted-foreground/80", children: resolvedEmptyHint })
|
|
4606
4654
|
] });
|
|
4607
4655
|
const handleEmojiClick = (emoji) => {
|
|
4608
4656
|
onEmojiSelect(emoji);
|
|
@@ -4622,13 +4670,13 @@ var EmojiPicker = ({
|
|
|
4622
4670
|
"div",
|
|
4623
4671
|
{
|
|
4624
4672
|
className: cn(
|
|
4625
|
-
"flex max-h-128 w-96 flex-col overflow-hidden",
|
|
4626
|
-
isEmbedded ? "bg-transparent" : "rounded-
|
|
4673
|
+
"flex max-h-128 w-96 flex-col overflow-hidden transition-all duration-300",
|
|
4674
|
+
isEmbedded ? "bg-transparent" : "rounded-3xl border border-border/10 bg-gradient-to-b from-card/98 to-card/95 backdrop-blur-2xl shadow-[0_20px_50px_rgba(0,0,0,0.18)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.45)] shadow-primary/2",
|
|
4627
4675
|
className
|
|
4628
4676
|
),
|
|
4629
4677
|
children: [
|
|
4630
|
-
showSearch && /* @__PURE__ */ jsx13("div", { className: "shrink-0 border-b p-3 bg-
|
|
4631
|
-
/* @__PURE__ */ jsx13(Search2, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
|
|
4678
|
+
showSearch && /* @__PURE__ */ jsx13("div", { className: "shrink-0 border-b border-border/10 p-3.5 bg-card/10", children: /* @__PURE__ */ jsxs7("div", { className: "relative group", children: [
|
|
4679
|
+
/* @__PURE__ */ jsx13(Search2, { className: "absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60 transition-colors group-focus-within:text-primary" }),
|
|
4632
4680
|
/* @__PURE__ */ jsx13(
|
|
4633
4681
|
"input",
|
|
4634
4682
|
{
|
|
@@ -4637,8 +4685,9 @@ var EmojiPicker = ({
|
|
|
4637
4685
|
value: search,
|
|
4638
4686
|
onChange: (e) => setSearch(e.target.value),
|
|
4639
4687
|
className: cn(
|
|
4640
|
-
"w-full rounded-
|
|
4641
|
-
"placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
4688
|
+
"w-full rounded-2xl border border-border/10 bg-muted/20 py-2 pl-9.5 pr-9 text-sm transition-all duration-300",
|
|
4689
|
+
"placeholder:text-muted-foreground/60 focus:outline-none focus:ring-2 focus:ring-primary/15 focus:border-primary/20",
|
|
4690
|
+
"focus:bg-background/90 focus:shadow-[0_0_12px_rgba(var(--color-primary-rgb),0.04)]"
|
|
4642
4691
|
)
|
|
4643
4692
|
}
|
|
4644
4693
|
),
|
|
@@ -4647,13 +4696,21 @@ var EmojiPicker = ({
|
|
|
4647
4696
|
{
|
|
4648
4697
|
type: "button",
|
|
4649
4698
|
onClick: () => setSearch(""),
|
|
4650
|
-
className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
|
|
4699
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground/60 hover:text-foreground transition-colors",
|
|
4651
4700
|
children: /* @__PURE__ */ jsx13(X2, { className: "h-4 w-4" })
|
|
4652
4701
|
}
|
|
4653
4702
|
)
|
|
4654
4703
|
] }) }),
|
|
4655
|
-
/* @__PURE__ */ jsx13(
|
|
4656
|
-
|
|
4704
|
+
/* @__PURE__ */ jsx13(
|
|
4705
|
+
"div",
|
|
4706
|
+
{
|
|
4707
|
+
ref: scrollContainerRef,
|
|
4708
|
+
className: "shrink overflow-y-auto px-4 py-3 scrollbar-thin scrollbar-thumb-muted-foreground/15 hover:scrollbar-thumb-muted-foreground/25 scrollbar-track-transparent transition-all duration-200",
|
|
4709
|
+
style: { height: maxHeight },
|
|
4710
|
+
children: search ? searchResultContent : /* @__PURE__ */ jsx13("div", { className: "space-y-3", children: EMOJI_LIST.map((category) => renderEmojiCategory(category, true)) })
|
|
4711
|
+
}
|
|
4712
|
+
),
|
|
4713
|
+
!search && showCategoryNav && /* @__PURE__ */ jsx13("div", { className: cn("flex shrink-0 items-center justify-around border-t border-border/10 px-3 py-2 backdrop-blur-md bg-muted/5"), children: EMOJI_LIST.map((category) => {
|
|
4657
4714
|
const IconComponent = CATEGORY_ICONS[category.id] || Smile;
|
|
4658
4715
|
return /* @__PURE__ */ jsx13(
|
|
4659
4716
|
"button",
|
|
@@ -4661,10 +4718,10 @@ var EmojiPicker = ({
|
|
|
4661
4718
|
type: "button",
|
|
4662
4719
|
onClick: () => handleCategoryClick(category.id),
|
|
4663
4720
|
className: cn(
|
|
4664
|
-
"rounded-
|
|
4665
|
-
activeCategory === category.id ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-
|
|
4721
|
+
"rounded-2xl p-2.5 transition-all duration-300",
|
|
4722
|
+
activeCategory === category.id ? "bg-primary/10 text-primary scale-115 shadow-sm shadow-primary/5" : "text-muted-foreground/60 hover:bg-muted/40 hover:text-foreground hover:scale-105"
|
|
4666
4723
|
),
|
|
4667
|
-
children: /* @__PURE__ */ jsx13(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx13("span", { className: "text-xs font-
|
|
4724
|
+
children: /* @__PURE__ */ jsx13(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx13("span", { className: "text-xs font-semibold", children: category.name }), children: /* @__PURE__ */ jsx13("span", { className: "inline-flex", children: /* @__PURE__ */ jsx13(IconComponent, { className: "h-4 w-4" }) }) })
|
|
4668
4725
|
},
|
|
4669
4726
|
category.id
|
|
4670
4727
|
);
|
|
@@ -4971,7 +5028,7 @@ TagInput.displayName = "TagInput";
|
|
|
4971
5028
|
var TagInput_default = TagInput;
|
|
4972
5029
|
|
|
4973
5030
|
// src/components/Switch.tsx
|
|
4974
|
-
import * as
|
|
5031
|
+
import * as React14 from "react";
|
|
4975
5032
|
import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4976
5033
|
var Switch = ({
|
|
4977
5034
|
checked,
|
|
@@ -4984,7 +5041,7 @@ var Switch = ({
|
|
|
4984
5041
|
className,
|
|
4985
5042
|
...props
|
|
4986
5043
|
}) => {
|
|
4987
|
-
const [isPressed, setIsPressed] =
|
|
5044
|
+
const [isPressed, setIsPressed] = React14.useState(false);
|
|
4988
5045
|
const sizeClasses2 = {
|
|
4989
5046
|
sm: {
|
|
4990
5047
|
track: "w-8 h-4",
|
|
@@ -5079,13 +5136,13 @@ Switch.displayName = "Switch";
|
|
|
5079
5136
|
var Switch_default = Switch;
|
|
5080
5137
|
|
|
5081
5138
|
// src/components/label.tsx
|
|
5082
|
-
import * as
|
|
5139
|
+
import * as React15 from "react";
|
|
5083
5140
|
import { cva } from "class-variance-authority";
|
|
5084
5141
|
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
5085
5142
|
var labelVariants = cva(
|
|
5086
5143
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
5087
5144
|
);
|
|
5088
|
-
var Label =
|
|
5145
|
+
var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
|
|
5089
5146
|
"label",
|
|
5090
5147
|
{
|
|
5091
5148
|
ref,
|
|
@@ -5096,11 +5153,11 @@ var Label = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
5096
5153
|
Label.displayName = "Label";
|
|
5097
5154
|
|
|
5098
5155
|
// src/components/Avatar.tsx
|
|
5099
|
-
import * as
|
|
5156
|
+
import * as React17 from "react";
|
|
5100
5157
|
|
|
5101
5158
|
// src/components/SmartImage.tsx
|
|
5102
5159
|
import Image2 from "next/image";
|
|
5103
|
-
import
|
|
5160
|
+
import React16 from "react";
|
|
5104
5161
|
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
5105
5162
|
var DEFAULT_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Crect fill='%23f3f4f6' width='400' height='400'/%3E%3Cpath fill='%239ca3af' d='M160 150h80v60h-80z'/%3E%3Ccircle fill='%239ca3af' cx='180' cy='130' r='20'/%3E%3Cpath fill='%239ca3af' d='M120 240l60-60 40 40 40-30 60 50v40H120z'/%3E%3C/svg%3E";
|
|
5106
5163
|
var FAILED_SRCS = /* @__PURE__ */ new Set();
|
|
@@ -5123,7 +5180,7 @@ function SmartImage({
|
|
|
5123
5180
|
transition = false,
|
|
5124
5181
|
unoptimized = false
|
|
5125
5182
|
}) {
|
|
5126
|
-
const normalize2 =
|
|
5183
|
+
const normalize2 = React16.useCallback(
|
|
5127
5184
|
(input) => {
|
|
5128
5185
|
if (!input || input.length === 0) return fallbackSrc;
|
|
5129
5186
|
const raw = input.trim();
|
|
@@ -5144,8 +5201,8 @@ function SmartImage({
|
|
|
5144
5201
|
},
|
|
5145
5202
|
[fallbackSrc]
|
|
5146
5203
|
);
|
|
5147
|
-
const [resolvedSrc, setResolvedSrc] =
|
|
5148
|
-
|
|
5204
|
+
const [resolvedSrc, setResolvedSrc] = React16.useState(() => normalize2(src));
|
|
5205
|
+
React16.useEffect(() => {
|
|
5149
5206
|
const next = normalize2(src);
|
|
5150
5207
|
setResolvedSrc((current) => current === next ? current : next);
|
|
5151
5208
|
}, [normalize2, src]);
|
|
@@ -5233,7 +5290,7 @@ var statusDotSizes = {
|
|
|
5233
5290
|
lg: "w-4 h-4 border-2",
|
|
5234
5291
|
xl: "w-5 h-5 border-[3px]"
|
|
5235
5292
|
};
|
|
5236
|
-
var Avatar =
|
|
5293
|
+
var Avatar = React17.memo(function Avatar2({
|
|
5237
5294
|
src,
|
|
5238
5295
|
alt = "avatar",
|
|
5239
5296
|
fallback = "?",
|
|
@@ -5444,7 +5501,7 @@ var SkeletonTable = ({ rows = 5, columns = 4, className }) => {
|
|
|
5444
5501
|
var Skeleton_default = Skeleton;
|
|
5445
5502
|
|
|
5446
5503
|
// src/components/Progress.tsx
|
|
5447
|
-
import
|
|
5504
|
+
import React18 from "react";
|
|
5448
5505
|
import { Check as Check2, X as X4, Clock } from "lucide-react";
|
|
5449
5506
|
import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
5450
5507
|
var variantStyles3 = {
|
|
@@ -5478,8 +5535,8 @@ var Progress = ({
|
|
|
5478
5535
|
const percentage = Math.min(Math.max(value / max * 100, 0), 100);
|
|
5479
5536
|
const isComplete = status === "complete" || percentage >= 100;
|
|
5480
5537
|
const isError = status === "error";
|
|
5481
|
-
const labelId =
|
|
5482
|
-
const descId =
|
|
5538
|
+
const labelId = React18.useId();
|
|
5539
|
+
const descId = React18.useId();
|
|
5483
5540
|
const getStatusIcon = () => {
|
|
5484
5541
|
if (isComplete) return /* @__PURE__ */ jsx20(Check2, { className: "w-4 h-4 text-success" });
|
|
5485
5542
|
if (isError) return /* @__PURE__ */ jsx20(X4, { className: "w-4 h-4 text-destructive" });
|
|
@@ -5812,7 +5869,7 @@ var LoadingProgress = ({
|
|
|
5812
5869
|
};
|
|
5813
5870
|
|
|
5814
5871
|
// src/components/Modal.tsx
|
|
5815
|
-
import * as
|
|
5872
|
+
import * as React19 from "react";
|
|
5816
5873
|
import { createPortal as createPortal2 } from "react-dom";
|
|
5817
5874
|
import { X as X5 } from "lucide-react";
|
|
5818
5875
|
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
@@ -5842,17 +5899,17 @@ var Modal = ({
|
|
|
5842
5899
|
height
|
|
5843
5900
|
}) => {
|
|
5844
5901
|
const gi18n = useGlobalI18n();
|
|
5845
|
-
const [isMounted, setIsMounted] =
|
|
5846
|
-
const [isVisible, setIsVisible] =
|
|
5847
|
-
const [isAnimating, setIsAnimating] =
|
|
5848
|
-
const mouseDownTarget =
|
|
5849
|
-
const modalContentRef =
|
|
5850
|
-
|
|
5902
|
+
const [isMounted, setIsMounted] = React19.useState(false);
|
|
5903
|
+
const [isVisible, setIsVisible] = React19.useState(false);
|
|
5904
|
+
const [isAnimating, setIsAnimating] = React19.useState(true);
|
|
5905
|
+
const mouseDownTarget = React19.useRef(null);
|
|
5906
|
+
const modalContentRef = React19.useRef(null);
|
|
5907
|
+
React19.useEffect(() => {
|
|
5851
5908
|
setIsMounted(true);
|
|
5852
5909
|
return () => setIsMounted(false);
|
|
5853
5910
|
}, []);
|
|
5854
|
-
const animationRef =
|
|
5855
|
-
|
|
5911
|
+
const animationRef = React19.useRef(false);
|
|
5912
|
+
React19.useEffect(() => {
|
|
5856
5913
|
if (isOpen) {
|
|
5857
5914
|
if (animationRef.current) return;
|
|
5858
5915
|
animationRef.current = true;
|
|
@@ -5872,7 +5929,7 @@ var Modal = ({
|
|
|
5872
5929
|
}
|
|
5873
5930
|
}
|
|
5874
5931
|
}, [isOpen, isVisible]);
|
|
5875
|
-
|
|
5932
|
+
React19.useEffect(() => {
|
|
5876
5933
|
if (!isOpen || !closeOnEsc) return;
|
|
5877
5934
|
const handleEscape = (event) => {
|
|
5878
5935
|
if (event.key === "Escape") {
|
|
@@ -5882,7 +5939,7 @@ var Modal = ({
|
|
|
5882
5939
|
document.addEventListener("keydown", handleEscape);
|
|
5883
5940
|
return () => document.removeEventListener("keydown", handleEscape);
|
|
5884
5941
|
}, [isOpen, closeOnEsc, onClose]);
|
|
5885
|
-
|
|
5942
|
+
React19.useEffect(() => {
|
|
5886
5943
|
if (isOpen) {
|
|
5887
5944
|
document.body.style.overflow = "hidden";
|
|
5888
5945
|
} else {
|
|
@@ -6168,7 +6225,7 @@ var ToastComponent = ({ toast, onRemove }) => {
|
|
|
6168
6225
|
var Toast_default = ToastProvider;
|
|
6169
6226
|
|
|
6170
6227
|
// src/components/Popover.tsx
|
|
6171
|
-
import * as
|
|
6228
|
+
import * as React21 from "react";
|
|
6172
6229
|
import { createPortal as createPortal3 } from "react-dom";
|
|
6173
6230
|
|
|
6174
6231
|
// src/utils/animations.ts
|
|
@@ -6458,14 +6515,14 @@ var Popover = ({
|
|
|
6458
6515
|
contentWidth
|
|
6459
6516
|
}) => {
|
|
6460
6517
|
const isControlled = open !== void 0;
|
|
6461
|
-
const [internalOpen, setInternalOpen] =
|
|
6462
|
-
const triggerRef =
|
|
6463
|
-
const positionerRef =
|
|
6464
|
-
const panelRef =
|
|
6465
|
-
const lastAppliedRef =
|
|
6518
|
+
const [internalOpen, setInternalOpen] = React21.useState(false);
|
|
6519
|
+
const triggerRef = React21.useRef(null);
|
|
6520
|
+
const positionerRef = React21.useRef(null);
|
|
6521
|
+
const panelRef = React21.useRef(null);
|
|
6522
|
+
const lastAppliedRef = React21.useRef(null);
|
|
6466
6523
|
useShadCNAnimations();
|
|
6467
6524
|
const isOpen = isControlled ? open : internalOpen;
|
|
6468
|
-
const setIsOpen =
|
|
6525
|
+
const setIsOpen = React21.useCallback(
|
|
6469
6526
|
(next) => {
|
|
6470
6527
|
if (!isControlled) setInternalOpen(next);
|
|
6471
6528
|
onOpenChange?.(next);
|
|
@@ -6474,16 +6531,16 @@ var Popover = ({
|
|
|
6474
6531
|
);
|
|
6475
6532
|
const offset = 4;
|
|
6476
6533
|
const padding = 8;
|
|
6477
|
-
const triggerSelector =
|
|
6478
|
-
const initialPlacement =
|
|
6479
|
-
|
|
6534
|
+
const triggerSelector = React21.useId();
|
|
6535
|
+
const initialPlacement = React21.useMemo(() => normalizePlacement(placement), [placement]);
|
|
6536
|
+
React21.useLayoutEffect(() => {
|
|
6480
6537
|
if (typeof document === "undefined") return;
|
|
6481
6538
|
const triggerEl = document.querySelector(`[data-underverse-popover-trigger="${triggerSelector}"]`);
|
|
6482
6539
|
if (triggerEl) {
|
|
6483
6540
|
triggerRef.current = triggerEl;
|
|
6484
6541
|
}
|
|
6485
6542
|
}, [triggerSelector, trigger]);
|
|
6486
|
-
const updatePosition =
|
|
6543
|
+
const updatePosition = React21.useCallback(() => {
|
|
6487
6544
|
const triggerEl = triggerRef.current;
|
|
6488
6545
|
const positionerEl = positionerRef.current;
|
|
6489
6546
|
const panelEl = panelRef.current;
|
|
@@ -6520,7 +6577,7 @@ var Popover = ({
|
|
|
6520
6577
|
if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
|
|
6521
6578
|
if (positionerEl.style.pointerEvents !== "auto") positionerEl.style.pointerEvents = "auto";
|
|
6522
6579
|
}, [placement, matchTriggerWidth, contentWidth]);
|
|
6523
|
-
|
|
6580
|
+
React21.useLayoutEffect(() => {
|
|
6524
6581
|
if (!isOpen) return;
|
|
6525
6582
|
updatePosition();
|
|
6526
6583
|
let raf1 = 0;
|
|
@@ -6534,7 +6591,7 @@ var Popover = ({
|
|
|
6534
6591
|
cancelAnimationFrame(raf2);
|
|
6535
6592
|
};
|
|
6536
6593
|
}, [isOpen, updatePosition]);
|
|
6537
|
-
|
|
6594
|
+
React21.useEffect(() => {
|
|
6538
6595
|
if (!isOpen) return;
|
|
6539
6596
|
let raf = 0;
|
|
6540
6597
|
const tick = () => {
|
|
@@ -6544,7 +6601,7 @@ var Popover = ({
|
|
|
6544
6601
|
raf = window.requestAnimationFrame(tick);
|
|
6545
6602
|
return () => window.cancelAnimationFrame(raf);
|
|
6546
6603
|
}, [isOpen, updatePosition]);
|
|
6547
|
-
|
|
6604
|
+
React21.useEffect(() => {
|
|
6548
6605
|
if (!isOpen) return;
|
|
6549
6606
|
let raf = 0;
|
|
6550
6607
|
const handler = () => {
|
|
@@ -6562,7 +6619,7 @@ var Popover = ({
|
|
|
6562
6619
|
document.removeEventListener("scroll", handler, true);
|
|
6563
6620
|
};
|
|
6564
6621
|
}, [isOpen, updatePosition]);
|
|
6565
|
-
|
|
6622
|
+
React21.useEffect(() => {
|
|
6566
6623
|
if (!isOpen) return;
|
|
6567
6624
|
if (typeof ResizeObserver === "undefined") return;
|
|
6568
6625
|
const ro = new ResizeObserver(() => updatePosition());
|
|
@@ -6570,13 +6627,13 @@ var Popover = ({
|
|
|
6570
6627
|
if (triggerRef.current) ro.observe(triggerRef.current);
|
|
6571
6628
|
return () => ro.disconnect();
|
|
6572
6629
|
}, [isOpen, updatePosition]);
|
|
6573
|
-
|
|
6630
|
+
React21.useLayoutEffect(() => {
|
|
6574
6631
|
if (!isOpen) {
|
|
6575
6632
|
lastAppliedRef.current = null;
|
|
6576
6633
|
return;
|
|
6577
6634
|
}
|
|
6578
6635
|
}, [isOpen]);
|
|
6579
|
-
|
|
6636
|
+
React21.useEffect(() => {
|
|
6580
6637
|
if (!isOpen) return;
|
|
6581
6638
|
const handleClickOutside = (event) => {
|
|
6582
6639
|
const target = event.target;
|
|
@@ -6663,7 +6720,7 @@ var Popover = ({
|
|
|
6663
6720
|
(() => {
|
|
6664
6721
|
const triggerProps = trigger.props;
|
|
6665
6722
|
const childRef = triggerProps.ref;
|
|
6666
|
-
return
|
|
6723
|
+
return React21.cloneElement(trigger, {
|
|
6667
6724
|
...triggerProps,
|
|
6668
6725
|
ref: mergeRefs(childRef, (node) => {
|
|
6669
6726
|
triggerRef.current = node;
|
|
@@ -6693,7 +6750,7 @@ var Popover = ({
|
|
|
6693
6750
|
};
|
|
6694
6751
|
|
|
6695
6752
|
// src/components/Sheet.tsx
|
|
6696
|
-
import * as
|
|
6753
|
+
import * as React22 from "react";
|
|
6697
6754
|
import { createPortal as createPortal4 } from "react-dom";
|
|
6698
6755
|
import { X as X7 } from "lucide-react";
|
|
6699
6756
|
import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
@@ -6779,19 +6836,19 @@ var Sheet = ({
|
|
|
6779
6836
|
onResize
|
|
6780
6837
|
}) => {
|
|
6781
6838
|
const gi18n = useGlobalI18n();
|
|
6782
|
-
const [mounted, setMounted] =
|
|
6783
|
-
const [isAnimating, setIsAnimating] =
|
|
6784
|
-
const [isVisible, setIsVisible] =
|
|
6785
|
-
const [isResizing, setIsResizing] =
|
|
6786
|
-
const [sheetSize, setSheetSize] =
|
|
6787
|
-
const sheetRef =
|
|
6788
|
-
const resizeStateRef =
|
|
6839
|
+
const [mounted, setMounted] = React22.useState(false);
|
|
6840
|
+
const [isAnimating, setIsAnimating] = React22.useState(true);
|
|
6841
|
+
const [isVisible, setIsVisible] = React22.useState(false);
|
|
6842
|
+
const [isResizing, setIsResizing] = React22.useState(false);
|
|
6843
|
+
const [sheetSize, setSheetSize] = React22.useState(null);
|
|
6844
|
+
const sheetRef = React22.useRef(null);
|
|
6845
|
+
const resizeStateRef = React22.useRef(null);
|
|
6789
6846
|
const isHorizontalSheet = side === "left" || side === "right";
|
|
6790
6847
|
const canResize = resizable && size !== "full";
|
|
6791
|
-
|
|
6848
|
+
React22.useEffect(() => {
|
|
6792
6849
|
setMounted(true);
|
|
6793
6850
|
}, []);
|
|
6794
|
-
|
|
6851
|
+
React22.useEffect(() => {
|
|
6795
6852
|
if (!closeOnEscape) return;
|
|
6796
6853
|
const handleEscape = (e) => {
|
|
6797
6854
|
if (e.key === "Escape" && open) {
|
|
@@ -6801,7 +6858,7 @@ var Sheet = ({
|
|
|
6801
6858
|
document.addEventListener("keydown", handleEscape);
|
|
6802
6859
|
return () => document.removeEventListener("keydown", handleEscape);
|
|
6803
6860
|
}, [open, closeOnEscape, onOpenChange]);
|
|
6804
|
-
|
|
6861
|
+
React22.useEffect(() => {
|
|
6805
6862
|
if (open) {
|
|
6806
6863
|
document.body.style.overflow = "hidden";
|
|
6807
6864
|
} else {
|
|
@@ -6811,7 +6868,7 @@ var Sheet = ({
|
|
|
6811
6868
|
document.body.style.overflow = "unset";
|
|
6812
6869
|
};
|
|
6813
6870
|
}, [open]);
|
|
6814
|
-
|
|
6871
|
+
React22.useEffect(() => {
|
|
6815
6872
|
if (open) {
|
|
6816
6873
|
setIsVisible(true);
|
|
6817
6874
|
setIsAnimating(true);
|
|
@@ -6834,19 +6891,19 @@ var Sheet = ({
|
|
|
6834
6891
|
const handleClose = () => {
|
|
6835
6892
|
onOpenChange(false);
|
|
6836
6893
|
};
|
|
6837
|
-
const clampResizeSize =
|
|
6894
|
+
const clampResizeSize = React22.useCallback((nextSize) => {
|
|
6838
6895
|
const viewportSize = isHorizontalSheet ? window.innerWidth : window.innerHeight;
|
|
6839
6896
|
const resolvedMaxSize = maxSize ?? Math.round(viewportSize * 0.9);
|
|
6840
6897
|
return Math.min(Math.max(nextSize, minSize), resolvedMaxSize);
|
|
6841
6898
|
}, [isHorizontalSheet, maxSize, minSize]);
|
|
6842
|
-
const endResize =
|
|
6899
|
+
const endResize = React22.useCallback(() => {
|
|
6843
6900
|
if (!resizeStateRef.current) return;
|
|
6844
6901
|
resizeStateRef.current = null;
|
|
6845
6902
|
setIsResizing(false);
|
|
6846
6903
|
document.body.style.cursor = "";
|
|
6847
6904
|
document.body.style.userSelect = "";
|
|
6848
6905
|
}, []);
|
|
6849
|
-
const handleResizePointerMove =
|
|
6906
|
+
const handleResizePointerMove = React22.useCallback((event) => {
|
|
6850
6907
|
const resizeState = resizeStateRef.current;
|
|
6851
6908
|
if (!resizeState || event.pointerId !== resizeState.pointerId) return;
|
|
6852
6909
|
const delta = isHorizontalSheet ? side === "right" ? resizeState.startClientX - event.clientX : event.clientX - resizeState.startClientX : side === "bottom" ? resizeState.startClientY - event.clientY : event.clientY - resizeState.startClientY;
|
|
@@ -6854,12 +6911,12 @@ var Sheet = ({
|
|
|
6854
6911
|
setSheetSize(nextSize);
|
|
6855
6912
|
onResize?.(nextSize);
|
|
6856
6913
|
}, [clampResizeSize, isHorizontalSheet, onResize, side]);
|
|
6857
|
-
const handleResizePointerUp =
|
|
6914
|
+
const handleResizePointerUp = React22.useCallback((event) => {
|
|
6858
6915
|
const resizeState = resizeStateRef.current;
|
|
6859
6916
|
if (!resizeState || event.pointerId !== resizeState.pointerId) return;
|
|
6860
6917
|
endResize();
|
|
6861
6918
|
}, [endResize]);
|
|
6862
|
-
|
|
6919
|
+
React22.useEffect(() => {
|
|
6863
6920
|
if (!isResizing) return void 0;
|
|
6864
6921
|
window.addEventListener("pointermove", handleResizePointerMove);
|
|
6865
6922
|
window.addEventListener("pointerup", handleResizePointerUp);
|
|
@@ -6870,10 +6927,10 @@ var Sheet = ({
|
|
|
6870
6927
|
window.removeEventListener("pointercancel", handleResizePointerUp);
|
|
6871
6928
|
};
|
|
6872
6929
|
}, [handleResizePointerMove, handleResizePointerUp, isResizing]);
|
|
6873
|
-
|
|
6930
|
+
React22.useEffect(() => {
|
|
6874
6931
|
if (!open) endResize();
|
|
6875
6932
|
}, [endResize, open]);
|
|
6876
|
-
|
|
6933
|
+
React22.useEffect(() => endResize, [endResize]);
|
|
6877
6934
|
const handleResizePointerDown = (event) => {
|
|
6878
6935
|
if (!canResize || !sheetRef.current) return;
|
|
6879
6936
|
const rect = sheetRef.current.getBoundingClientRect();
|
|
@@ -7091,7 +7148,7 @@ var Alert = ({
|
|
|
7091
7148
|
var Alert_default = Alert;
|
|
7092
7149
|
|
|
7093
7150
|
// src/components/GlobalLoading.tsx
|
|
7094
|
-
import
|
|
7151
|
+
import React23, { useEffect as useEffect10, useState as useState14 } from "react";
|
|
7095
7152
|
import { Activity as Activity2 } from "lucide-react";
|
|
7096
7153
|
|
|
7097
7154
|
// src/utils/loading.ts
|
|
@@ -7197,7 +7254,7 @@ var InlineLoading = ({ isLoading, text, className, size = "md" }) => {
|
|
|
7197
7254
|
] });
|
|
7198
7255
|
};
|
|
7199
7256
|
var ButtonLoading = ({ isLoading, children, className, disabled, loadingText }) => {
|
|
7200
|
-
const child =
|
|
7257
|
+
const child = React23.isValidElement(children) ? React23.cloneElement(children, {
|
|
7201
7258
|
disabled: (children.props?.disabled ?? false) || disabled || isLoading,
|
|
7202
7259
|
"aria-busy": isLoading || void 0
|
|
7203
7260
|
}) : children;
|
|
@@ -7211,7 +7268,7 @@ var ButtonLoading = ({ isLoading, children, className, disabled, loadingText })
|
|
|
7211
7268
|
};
|
|
7212
7269
|
|
|
7213
7270
|
// src/components/Breadcrumb.tsx
|
|
7214
|
-
import * as
|
|
7271
|
+
import * as React24 from "react";
|
|
7215
7272
|
import { ChevronRight, Home, MoreHorizontal } from "lucide-react";
|
|
7216
7273
|
import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
7217
7274
|
var NextLink = null;
|
|
@@ -7259,8 +7316,8 @@ var Breadcrumb = ({
|
|
|
7259
7316
|
collapsible = true
|
|
7260
7317
|
}) => {
|
|
7261
7318
|
const gi18n = useGlobalI18n();
|
|
7262
|
-
const [isCollapsed, setIsCollapsed] =
|
|
7263
|
-
|
|
7319
|
+
const [isCollapsed, setIsCollapsed] = React24.useState(false);
|
|
7320
|
+
React24.useEffect(() => {
|
|
7264
7321
|
if (collapsible && items.length > maxItems) {
|
|
7265
7322
|
setIsCollapsed(true);
|
|
7266
7323
|
}
|
|
@@ -7278,7 +7335,7 @@ var Breadcrumb = ({
|
|
|
7278
7335
|
const SeparatorComponent = separator;
|
|
7279
7336
|
return /* @__PURE__ */ jsx27(SeparatorComponent, { className: cn("text-muted-foreground", sizeStyles5[size].icon) });
|
|
7280
7337
|
};
|
|
7281
|
-
const processedItems =
|
|
7338
|
+
const processedItems = React24.useMemo(() => {
|
|
7282
7339
|
let finalItems = [...items];
|
|
7283
7340
|
if (showHome && finalItems[0]?.href !== homeHref) {
|
|
7284
7341
|
finalItems.unshift({
|
|
@@ -7351,7 +7408,7 @@ var Breadcrumb = ({
|
|
|
7351
7408
|
var Breadcrumb_default = Breadcrumb;
|
|
7352
7409
|
|
|
7353
7410
|
// src/components/Tab.tsx
|
|
7354
|
-
import * as
|
|
7411
|
+
import * as React25 from "react";
|
|
7355
7412
|
import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
7356
7413
|
var sizeStyles6 = {
|
|
7357
7414
|
sm: {
|
|
@@ -7449,11 +7506,11 @@ var Tabs = ({
|
|
|
7449
7506
|
noContentPadding = false,
|
|
7450
7507
|
animateContent = true
|
|
7451
7508
|
}) => {
|
|
7452
|
-
const [active, setActive] =
|
|
7453
|
-
const [underlineStyle, setUnderlineStyle] =
|
|
7454
|
-
const tabRefs =
|
|
7455
|
-
const autoId =
|
|
7456
|
-
const baseId =
|
|
7509
|
+
const [active, setActive] = React25.useState(defaultValue || tabs[0]?.value);
|
|
7510
|
+
const [underlineStyle, setUnderlineStyle] = React25.useState({});
|
|
7511
|
+
const tabRefs = React25.useRef([]);
|
|
7512
|
+
const autoId = React25.useId();
|
|
7513
|
+
const baseId = React25.useMemo(() => getTabsBaseId(tabs, id, autoId), [autoId, id, tabs]);
|
|
7457
7514
|
const handleTabChange = (value) => {
|
|
7458
7515
|
setActive(value);
|
|
7459
7516
|
onTabChange?.(value);
|
|
@@ -7480,7 +7537,7 @@ var Tabs = ({
|
|
|
7480
7537
|
tabRefs.current[next]?.focus();
|
|
7481
7538
|
}
|
|
7482
7539
|
};
|
|
7483
|
-
|
|
7540
|
+
React25.useEffect(() => {
|
|
7484
7541
|
if (variant === "underline" && orientation === "horizontal") {
|
|
7485
7542
|
const activeIndex2 = tabs.findIndex((tab) => tab.value === active);
|
|
7486
7543
|
const activeTab2 = tabRefs.current[activeIndex2];
|
|
@@ -7493,7 +7550,7 @@ var Tabs = ({
|
|
|
7493
7550
|
}
|
|
7494
7551
|
}
|
|
7495
7552
|
}, [active, variant, orientation, tabs]);
|
|
7496
|
-
|
|
7553
|
+
React25.useEffect(() => {
|
|
7497
7554
|
if (typeof window === "undefined") return;
|
|
7498
7555
|
const syncFromHash = () => {
|
|
7499
7556
|
const nextValue = resolveTabValueFromHash(window.location.hash, tabs, baseId);
|
|
@@ -7623,18 +7680,18 @@ var VerticalTabs = ({ sidebarWidth = "w-48", className, ...props }) => {
|
|
|
7623
7680
|
};
|
|
7624
7681
|
|
|
7625
7682
|
// src/components/DropdownMenu.tsx
|
|
7626
|
-
import
|
|
7683
|
+
import React26, { useState as useState17 } from "react";
|
|
7627
7684
|
import { ChevronRight as ChevronRight2 } from "lucide-react";
|
|
7628
7685
|
import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
7629
|
-
var DropdownMenuContext =
|
|
7686
|
+
var DropdownMenuContext = React26.createContext(null);
|
|
7630
7687
|
function useDropdownMenuClose() {
|
|
7631
|
-
return
|
|
7688
|
+
return React26.useContext(DropdownMenuContext)?.closeMenu ?? (() => {
|
|
7632
7689
|
});
|
|
7633
7690
|
}
|
|
7634
7691
|
function useResettingIndex(resetToken) {
|
|
7635
|
-
const [state, setState] =
|
|
7692
|
+
const [state, setState] = React26.useState({ resetToken, index: -1 });
|
|
7636
7693
|
const activeIndex = Object.is(state.resetToken, resetToken) ? state.index : -1;
|
|
7637
|
-
const setActiveIndex =
|
|
7694
|
+
const setActiveIndex = React26.useCallback((nextIndex) => {
|
|
7638
7695
|
setState((prev) => {
|
|
7639
7696
|
const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : -1;
|
|
7640
7697
|
return {
|
|
@@ -7659,7 +7716,7 @@ var DropdownMenu = ({
|
|
|
7659
7716
|
}) => {
|
|
7660
7717
|
const [internalOpen, setInternalOpen] = useState17(false);
|
|
7661
7718
|
const open = isOpen !== void 0 ? isOpen : internalOpen;
|
|
7662
|
-
const setOpen =
|
|
7719
|
+
const setOpen = React26.useCallback(
|
|
7663
7720
|
(nextOpen) => {
|
|
7664
7721
|
if (isOpen === void 0) {
|
|
7665
7722
|
setInternalOpen(nextOpen);
|
|
@@ -7668,21 +7725,21 @@ var DropdownMenu = ({
|
|
|
7668
7725
|
},
|
|
7669
7726
|
[isOpen, onOpenChange]
|
|
7670
7727
|
);
|
|
7671
|
-
const triggerRef =
|
|
7672
|
-
const menuRef =
|
|
7673
|
-
const itemsRef =
|
|
7728
|
+
const triggerRef = React26.useRef(null);
|
|
7729
|
+
const menuRef = React26.useRef(null);
|
|
7730
|
+
const itemsRef = React26.useRef([]);
|
|
7674
7731
|
const [activeIndex, setActiveIndex] = useResettingIndex(open);
|
|
7675
|
-
const parentMenu =
|
|
7676
|
-
const closeMenu =
|
|
7732
|
+
const parentMenu = React26.useContext(DropdownMenuContext);
|
|
7733
|
+
const closeMenu = React26.useCallback(() => {
|
|
7677
7734
|
setOpen(false);
|
|
7678
7735
|
parentMenu?.closeMenu();
|
|
7679
7736
|
}, [parentMenu, setOpen]);
|
|
7680
|
-
const getEnabledMenuItems =
|
|
7737
|
+
const getEnabledMenuItems = React26.useCallback(() => {
|
|
7681
7738
|
const menuEl = menuRef.current;
|
|
7682
7739
|
if (!menuEl) return [];
|
|
7683
7740
|
return Array.from(menuEl.querySelectorAll("[data-dropdown-menu-item]")).filter((el) => !el.disabled);
|
|
7684
7741
|
}, []);
|
|
7685
|
-
const focusMenuItem =
|
|
7742
|
+
const focusMenuItem = React26.useCallback((index) => {
|
|
7686
7743
|
const enabled = getEnabledMenuItems();
|
|
7687
7744
|
const item = enabled[index];
|
|
7688
7745
|
if (!item) return;
|
|
@@ -7691,7 +7748,7 @@ var DropdownMenu = ({
|
|
|
7691
7748
|
item.scrollIntoView({ block: "nearest" });
|
|
7692
7749
|
}, [getEnabledMenuItems, setActiveIndex]);
|
|
7693
7750
|
useShadCNAnimations();
|
|
7694
|
-
|
|
7751
|
+
React26.useEffect(() => {
|
|
7695
7752
|
if (!open) return;
|
|
7696
7753
|
const handleKeyNav = (e) => {
|
|
7697
7754
|
const active = document.activeElement;
|
|
@@ -7728,7 +7785,7 @@ var DropdownMenu = ({
|
|
|
7728
7785
|
document.removeEventListener("keydown", handleKeyNav, true);
|
|
7729
7786
|
};
|
|
7730
7787
|
}, [open, activeIndex, closeMenu, focusMenuItem, getEnabledMenuItems]);
|
|
7731
|
-
const menuContext =
|
|
7788
|
+
const menuContext = React26.useMemo(
|
|
7732
7789
|
() => ({
|
|
7733
7790
|
closeMenu,
|
|
7734
7791
|
closeOnSelect
|
|
@@ -7775,7 +7832,7 @@ var DropdownMenu = ({
|
|
|
7775
7832
|
}) : children }) });
|
|
7776
7833
|
const triggerProps = trigger.props;
|
|
7777
7834
|
const childRef = triggerProps.ref;
|
|
7778
|
-
const enhancedTrigger =
|
|
7835
|
+
const enhancedTrigger = React26.cloneElement(trigger, {
|
|
7779
7836
|
...triggerProps,
|
|
7780
7837
|
ref: mergeRefs(childRef, (node) => {
|
|
7781
7838
|
triggerRef.current = node;
|
|
@@ -7832,7 +7889,7 @@ var DropdownMenuItem = ({
|
|
|
7832
7889
|
className,
|
|
7833
7890
|
closeOnSelect
|
|
7834
7891
|
}) => {
|
|
7835
|
-
const menu =
|
|
7892
|
+
const menu = React26.useContext(DropdownMenuContext);
|
|
7836
7893
|
const shouldCloseOnSelect = closeOnSelect ?? menu?.closeOnSelect ?? false;
|
|
7837
7894
|
return /* @__PURE__ */ jsxs21(
|
|
7838
7895
|
"button",
|
|
@@ -7923,11 +7980,11 @@ var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", cla
|
|
|
7923
7980
|
var DropdownMenu_default = DropdownMenu;
|
|
7924
7981
|
|
|
7925
7982
|
// src/components/Pagination.tsx
|
|
7926
|
-
import * as
|
|
7983
|
+
import * as React28 from "react";
|
|
7927
7984
|
import { ChevronLeft, ChevronRight as ChevronRight3, ChevronsLeft, ChevronsRight } from "lucide-react";
|
|
7928
7985
|
|
|
7929
7986
|
// src/components/Combobox.tsx
|
|
7930
|
-
import * as
|
|
7987
|
+
import * as React27 from "react";
|
|
7931
7988
|
import { useId as useId6 } from "react";
|
|
7932
7989
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
7933
7990
|
import { ChevronDown, Search as Search4, SearchX, Check as Check3, X as X9 } from "lucide-react";
|
|
@@ -8009,13 +8066,13 @@ var Combobox = ({
|
|
|
8009
8066
|
const searchPlaceholder = searchPlaceholderProp ?? gi18n.searchPlaceholder ?? "Search\u2026";
|
|
8010
8067
|
const emptyText = emptyTextProp ?? gi18n.noResults ?? "No results found";
|
|
8011
8068
|
const loadingText = loadingTextProp ?? gi18n.loading ?? "Loading...";
|
|
8012
|
-
const [open, setOpen] =
|
|
8013
|
-
const [query, setQuery] =
|
|
8014
|
-
const [activeIndex, setActiveIndex] =
|
|
8015
|
-
const [localRequiredError, setLocalRequiredError] =
|
|
8069
|
+
const [open, setOpen] = React27.useState(false);
|
|
8070
|
+
const [query, setQuery] = React27.useState("");
|
|
8071
|
+
const [activeIndex, setActiveIndex] = React27.useState(null);
|
|
8072
|
+
const [localRequiredError, setLocalRequiredError] = React27.useState();
|
|
8016
8073
|
useShadCNAnimations();
|
|
8017
|
-
const inputRef =
|
|
8018
|
-
const optionsViewportRef =
|
|
8074
|
+
const inputRef = React27.useRef(null);
|
|
8075
|
+
const optionsViewportRef = React27.useRef(null);
|
|
8019
8076
|
useOverlayScrollbarTarget(optionsViewportRef, { enabled: open && useOverlayScrollbar && !virtualized });
|
|
8020
8077
|
const autoId = useId6();
|
|
8021
8078
|
const resolvedId = id ? String(id) : `combobox-${autoId}`;
|
|
@@ -8024,7 +8081,7 @@ var Combobox = ({
|
|
|
8024
8081
|
const trimmedQuery = query.trim();
|
|
8025
8082
|
const queryMeetsMinimum = trimmedQuery.length >= minSearchLength;
|
|
8026
8083
|
const shouldPromptForSearch = minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
|
|
8027
|
-
const filteredOptions =
|
|
8084
|
+
const filteredOptions = React27.useMemo(
|
|
8028
8085
|
() => {
|
|
8029
8086
|
if (shouldPromptForSearch) return [];
|
|
8030
8087
|
if (!enableSearch || searchMode === "manual") return options;
|
|
@@ -8034,7 +8091,7 @@ var Combobox = ({
|
|
|
8034
8091
|
},
|
|
8035
8092
|
[enableSearch, options, searchMode, shouldPromptForSearch, trimmedQuery]
|
|
8036
8093
|
);
|
|
8037
|
-
const renderLimitedOptions =
|
|
8094
|
+
const renderLimitedOptions = React27.useMemo(
|
|
8038
8095
|
() => {
|
|
8039
8096
|
if (trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
|
|
8040
8097
|
return filteredOptions;
|
|
@@ -8053,15 +8110,15 @@ var Combobox = ({
|
|
|
8053
8110
|
enabled: canVirtualize
|
|
8054
8111
|
});
|
|
8055
8112
|
const virtualItems = canVirtualize ? optionVirtualizer.getVirtualItems() : [];
|
|
8056
|
-
const triggerRef =
|
|
8057
|
-
const scrollVirtualListToIndex =
|
|
8113
|
+
const triggerRef = React27.useRef(null);
|
|
8114
|
+
const scrollVirtualListToIndex = React27.useCallback((index) => {
|
|
8058
8115
|
if (!canVirtualize || renderLimitedOptions.length === 0) return;
|
|
8059
8116
|
optionVirtualizer.scrollToIndex(index, { align: "auto" });
|
|
8060
8117
|
}, [canVirtualize, optionVirtualizer, renderLimitedOptions.length]);
|
|
8061
|
-
const scrollVirtualListToStart =
|
|
8118
|
+
const scrollVirtualListToStart = React27.useCallback(() => {
|
|
8062
8119
|
scrollVirtualListToIndex(0);
|
|
8063
8120
|
}, [scrollVirtualListToIndex]);
|
|
8064
|
-
const moveActiveIndex =
|
|
8121
|
+
const moveActiveIndex = React27.useCallback((direction) => {
|
|
8065
8122
|
if (renderLimitedOptions.length === 0) return;
|
|
8066
8123
|
const next = activeIndex === null ? direction === 1 ? 0 : renderLimitedOptions.length - 1 : (activeIndex + direction + renderLimitedOptions.length) % renderLimitedOptions.length;
|
|
8067
8124
|
setActiveIndex(next);
|
|
@@ -8085,7 +8142,7 @@ var Combobox = ({
|
|
|
8085
8142
|
onChange(null);
|
|
8086
8143
|
setOpen(false);
|
|
8087
8144
|
};
|
|
8088
|
-
|
|
8145
|
+
React27.useEffect(() => {
|
|
8089
8146
|
if (!open) {
|
|
8090
8147
|
setQuery("");
|
|
8091
8148
|
setActiveIndex(null);
|
|
@@ -8096,12 +8153,12 @@ var Combobox = ({
|
|
|
8096
8153
|
}, 100);
|
|
8097
8154
|
}
|
|
8098
8155
|
}, [enableSearch, open, scrollVirtualListToStart]);
|
|
8099
|
-
|
|
8156
|
+
React27.useEffect(() => {
|
|
8100
8157
|
if (!onSearchChange) return void 0;
|
|
8101
8158
|
const timeoutId = window.setTimeout(() => onSearchChange(query), searchDebounceMs);
|
|
8102
8159
|
return () => window.clearTimeout(timeoutId);
|
|
8103
8160
|
}, [onSearchChange, query, searchDebounceMs]);
|
|
8104
|
-
|
|
8161
|
+
React27.useEffect(() => {
|
|
8105
8162
|
if (process.env.NODE_ENV !== "production" && options.length > 300 && !virtualized && searchMode !== "manual" && maxInitialOptions === void 0) {
|
|
8106
8163
|
console.warn(
|
|
8107
8164
|
'[Underverse UI] Combobox received more than 300 options without virtualization, manual search, or maxInitialOptions. Use virtualized, searchMode="manual", or maxInitialOptions to avoid rendering a large dropdown.'
|
|
@@ -8113,12 +8170,12 @@ var Combobox = ({
|
|
|
8113
8170
|
const selectedIcon = selectedOption ? getOptionIcon(selectedOption) : void 0;
|
|
8114
8171
|
const hasValue = value !== void 0 && value !== null && value !== "";
|
|
8115
8172
|
const effectiveError = error ?? localRequiredError;
|
|
8116
|
-
|
|
8173
|
+
React27.useEffect(() => {
|
|
8117
8174
|
if (disabled || !required || hasValue) {
|
|
8118
8175
|
setLocalRequiredError(void 0);
|
|
8119
8176
|
}
|
|
8120
8177
|
}, [disabled, hasValue, required]);
|
|
8121
|
-
const groupedOptions =
|
|
8178
|
+
const groupedOptions = React27.useMemo(() => {
|
|
8122
8179
|
if (!groupBy) return null;
|
|
8123
8180
|
const groups = {};
|
|
8124
8181
|
renderLimitedOptions.forEach((opt) => {
|
|
@@ -8535,7 +8592,7 @@ var Pagination = ({
|
|
|
8535
8592
|
labels
|
|
8536
8593
|
}) => {
|
|
8537
8594
|
const t = useSmartTranslations("Pagination");
|
|
8538
|
-
|
|
8595
|
+
React28.useEffect(() => {
|
|
8539
8596
|
if (disabled) return;
|
|
8540
8597
|
const handleKey = (e) => {
|
|
8541
8598
|
if (e.target && e.target.tagName === "INPUT") return;
|
|
@@ -8840,7 +8897,7 @@ var CompactPagination = ({ page, totalPages, onChange, className, disabled = fal
|
|
|
8840
8897
|
};
|
|
8841
8898
|
|
|
8842
8899
|
// src/components/Section.tsx
|
|
8843
|
-
import
|
|
8900
|
+
import React29 from "react";
|
|
8844
8901
|
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
8845
8902
|
var gradientDirectionMap = {
|
|
8846
8903
|
"to-r": "to right",
|
|
@@ -8873,7 +8930,7 @@ var variantClasses = {
|
|
|
8873
8930
|
accent: "bg-accent/10",
|
|
8874
8931
|
gradient: ""
|
|
8875
8932
|
};
|
|
8876
|
-
var Section =
|
|
8933
|
+
var Section = React29.forwardRef(
|
|
8877
8934
|
({
|
|
8878
8935
|
children,
|
|
8879
8936
|
className,
|
|
@@ -9225,7 +9282,7 @@ function parseDateString(str, locale = "en") {
|
|
|
9225
9282
|
|
|
9226
9283
|
// src/components/DatePicker.tsx
|
|
9227
9284
|
import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight4, Sparkles, X as XIcon } from "lucide-react";
|
|
9228
|
-
import * as
|
|
9285
|
+
import * as React31 from "react";
|
|
9229
9286
|
import { useId as useId7 } from "react";
|
|
9230
9287
|
import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
9231
9288
|
var DatePicker = ({
|
|
@@ -9249,17 +9306,17 @@ var DatePicker = ({
|
|
|
9249
9306
|
const t = useSmartTranslations("DatePicker");
|
|
9250
9307
|
const tv = useSmartTranslations("ValidationInput");
|
|
9251
9308
|
const locale = useSmartLocale();
|
|
9252
|
-
const [isOpen, setIsOpen] =
|
|
9253
|
-
const [viewDate, setViewDate] =
|
|
9254
|
-
const [viewMode, setViewMode] =
|
|
9255
|
-
const [localRequiredError, setLocalRequiredError] =
|
|
9256
|
-
const triggerRef =
|
|
9257
|
-
const inputRef =
|
|
9258
|
-
const wheelContainerRef =
|
|
9259
|
-
const wheelDeltaRef =
|
|
9260
|
-
const [isFocused, setIsFocused] =
|
|
9261
|
-
const [inputValue, setInputValue] =
|
|
9262
|
-
|
|
9309
|
+
const [isOpen, setIsOpen] = React31.useState(false);
|
|
9310
|
+
const [viewDate, setViewDate] = React31.useState(value || /* @__PURE__ */ new Date());
|
|
9311
|
+
const [viewMode, setViewMode] = React31.useState("calendar");
|
|
9312
|
+
const [localRequiredError, setLocalRequiredError] = React31.useState();
|
|
9313
|
+
const triggerRef = React31.useRef(null);
|
|
9314
|
+
const inputRef = React31.useRef(null);
|
|
9315
|
+
const wheelContainerRef = React31.useRef(null);
|
|
9316
|
+
const wheelDeltaRef = React31.useRef(0);
|
|
9317
|
+
const [isFocused, setIsFocused] = React31.useState(false);
|
|
9318
|
+
const [inputValue, setInputValue] = React31.useState("");
|
|
9319
|
+
React31.useEffect(() => {
|
|
9263
9320
|
if (value) {
|
|
9264
9321
|
const parsed = parseDateString(inputValue, locale);
|
|
9265
9322
|
const isSame = parsed && parsed.getTime() === value.getTime();
|
|
@@ -9331,13 +9388,13 @@ var DatePicker = ({
|
|
|
9331
9388
|
setIsOpen(false);
|
|
9332
9389
|
}
|
|
9333
9390
|
};
|
|
9334
|
-
const normalizeToLocalDay =
|
|
9391
|
+
const normalizeToLocalDay = React31.useCallback((date) => {
|
|
9335
9392
|
if (!date) return null;
|
|
9336
9393
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
9337
9394
|
}, []);
|
|
9338
|
-
const minDay =
|
|
9339
|
-
const maxDay =
|
|
9340
|
-
const isDateDisabled =
|
|
9395
|
+
const minDay = React31.useMemo(() => normalizeToLocalDay(minDate), [minDate, normalizeToLocalDay]);
|
|
9396
|
+
const maxDay = React31.useMemo(() => normalizeToLocalDay(maxDate), [maxDate, normalizeToLocalDay]);
|
|
9397
|
+
const isDateDisabled = React31.useCallback(
|
|
9341
9398
|
(date) => {
|
|
9342
9399
|
const day = normalizeToLocalDay(date);
|
|
9343
9400
|
if (!day) return false;
|
|
@@ -9406,19 +9463,19 @@ var DatePicker = ({
|
|
|
9406
9463
|
footerMargin: "mt-5 pt-4 gap-2.5"
|
|
9407
9464
|
}
|
|
9408
9465
|
};
|
|
9409
|
-
|
|
9466
|
+
React31.useEffect(() => {
|
|
9410
9467
|
if (value) {
|
|
9411
9468
|
setViewDate(value);
|
|
9412
9469
|
} else {
|
|
9413
9470
|
setViewDate(/* @__PURE__ */ new Date());
|
|
9414
9471
|
}
|
|
9415
9472
|
}, [value]);
|
|
9416
|
-
|
|
9473
|
+
React31.useEffect(() => {
|
|
9417
9474
|
if (disabled || !required || value) {
|
|
9418
9475
|
setLocalRequiredError(void 0);
|
|
9419
9476
|
}
|
|
9420
9477
|
}, [disabled, required, value]);
|
|
9421
|
-
|
|
9478
|
+
React31.useEffect(() => {
|
|
9422
9479
|
if (!isOpen) {
|
|
9423
9480
|
setViewMode("calendar");
|
|
9424
9481
|
}
|
|
@@ -9448,7 +9505,7 @@ var DatePicker = ({
|
|
|
9448
9505
|
const getFirstDayOfMonth = (date) => {
|
|
9449
9506
|
return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
|
|
9450
9507
|
};
|
|
9451
|
-
const navigateMonth =
|
|
9508
|
+
const navigateMonth = React31.useCallback((direction) => {
|
|
9452
9509
|
setViewDate((prev) => {
|
|
9453
9510
|
const newDate = new Date(prev);
|
|
9454
9511
|
newDate.setMonth(prev.getMonth() + (direction === "next" ? 1 : -1));
|
|
@@ -9462,7 +9519,7 @@ var DatePicker = ({
|
|
|
9462
9519
|
const node = el;
|
|
9463
9520
|
return node.scrollHeight > node.clientHeight + 1;
|
|
9464
9521
|
};
|
|
9465
|
-
|
|
9522
|
+
React31.useEffect(() => {
|
|
9466
9523
|
if (!isOpen) return;
|
|
9467
9524
|
const container = wheelContainerRef.current;
|
|
9468
9525
|
if (!container) return;
|
|
@@ -9896,26 +9953,26 @@ var DateRangePicker = ({
|
|
|
9896
9953
|
const locale = useSmartLocale();
|
|
9897
9954
|
const t = useSmartTranslations("DatePicker");
|
|
9898
9955
|
const tv = useSmartTranslations("ValidationInput");
|
|
9899
|
-
const [isOpen, setIsOpen] =
|
|
9900
|
-
const [viewMode, setViewMode] =
|
|
9901
|
-
const [localRequiredError, setLocalRequiredError] =
|
|
9902
|
-
const wheelContainerRef =
|
|
9903
|
-
const wheelDeltaRef =
|
|
9904
|
-
const triggerRef =
|
|
9905
|
-
const inputRef =
|
|
9906
|
-
const [isFocused, setIsFocused] =
|
|
9907
|
-
const [inputValue, setInputValue] =
|
|
9908
|
-
const todayDate =
|
|
9956
|
+
const [isOpen, setIsOpen] = React31.useState(false);
|
|
9957
|
+
const [viewMode, setViewMode] = React31.useState("calendar");
|
|
9958
|
+
const [localRequiredError, setLocalRequiredError] = React31.useState();
|
|
9959
|
+
const wheelContainerRef = React31.useRef(null);
|
|
9960
|
+
const wheelDeltaRef = React31.useRef(0);
|
|
9961
|
+
const triggerRef = React31.useRef(null);
|
|
9962
|
+
const inputRef = React31.useRef(null);
|
|
9963
|
+
const [isFocused, setIsFocused] = React31.useState(false);
|
|
9964
|
+
const [inputValue, setInputValue] = React31.useState("");
|
|
9965
|
+
const todayDate = React31.useMemo(() => {
|
|
9909
9966
|
const today = /* @__PURE__ */ new Date();
|
|
9910
9967
|
return new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
9911
9968
|
}, []);
|
|
9912
|
-
const getRangeString =
|
|
9969
|
+
const getRangeString = React31.useCallback((s, e) => {
|
|
9913
9970
|
if (!s) return "";
|
|
9914
9971
|
const startStr = formatDateShort(s, locale);
|
|
9915
9972
|
if (!e) return `${startStr} - `;
|
|
9916
9973
|
return `${startStr} - ${formatDateShort(e, locale)}`;
|
|
9917
9974
|
}, [locale]);
|
|
9918
|
-
|
|
9975
|
+
React31.useEffect(() => {
|
|
9919
9976
|
if (startDate) {
|
|
9920
9977
|
const parts = inputValue.split(/\s*-\s*/);
|
|
9921
9978
|
const inputStart = parts[0] ? parseDateString(parts[0], locale) : null;
|
|
@@ -10117,24 +10174,24 @@ var DateRangePicker = ({
|
|
|
10117
10174
|
if (!date) return null;
|
|
10118
10175
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
10119
10176
|
};
|
|
10120
|
-
const minDay =
|
|
10121
|
-
const maxDay =
|
|
10122
|
-
const [viewDate, setViewDate] =
|
|
10123
|
-
const [tempStart, setTempStart] =
|
|
10124
|
-
const [tempEnd, setTempEnd] =
|
|
10125
|
-
const [hoveredDate, setHoveredDate] =
|
|
10126
|
-
|
|
10177
|
+
const minDay = React31.useMemo(() => normalizeToLocal(minDate), [minDate]);
|
|
10178
|
+
const maxDay = React31.useMemo(() => normalizeToLocal(maxDate), [maxDate]);
|
|
10179
|
+
const [viewDate, setViewDate] = React31.useState(startDate || /* @__PURE__ */ new Date());
|
|
10180
|
+
const [tempStart, setTempStart] = React31.useState(normalizeToLocal(startDate));
|
|
10181
|
+
const [tempEnd, setTempEnd] = React31.useState(normalizeToLocal(endDate));
|
|
10182
|
+
const [hoveredDate, setHoveredDate] = React31.useState(null);
|
|
10183
|
+
React31.useEffect(() => {
|
|
10127
10184
|
setTempStart(normalizeToLocal(startDate));
|
|
10128
10185
|
}, [startDate]);
|
|
10129
|
-
|
|
10186
|
+
React31.useEffect(() => {
|
|
10130
10187
|
setTempEnd(normalizeToLocal(endDate));
|
|
10131
10188
|
}, [endDate]);
|
|
10132
|
-
|
|
10189
|
+
React31.useEffect(() => {
|
|
10133
10190
|
if (!isOpen) {
|
|
10134
10191
|
setViewMode("calendar");
|
|
10135
10192
|
}
|
|
10136
10193
|
}, [isOpen]);
|
|
10137
|
-
|
|
10194
|
+
React31.useEffect(() => {
|
|
10138
10195
|
if (!required || startDate && endDate) {
|
|
10139
10196
|
setLocalRequiredError(void 0);
|
|
10140
10197
|
}
|
|
@@ -10146,10 +10203,10 @@ var DateRangePicker = ({
|
|
|
10146
10203
|
const inRange = (d, s, e) => d > s && d < e;
|
|
10147
10204
|
const getDaysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
|
|
10148
10205
|
const getFirstDayOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1).getDay();
|
|
10149
|
-
const navigateMonth =
|
|
10206
|
+
const navigateMonth = React31.useCallback((direction) => {
|
|
10150
10207
|
setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
|
|
10151
10208
|
}, []);
|
|
10152
|
-
const navigateYearRange =
|
|
10209
|
+
const navigateYearRange = React31.useCallback((direction) => {
|
|
10153
10210
|
setViewDate((prev) => new Date(prev.getFullYear() + (direction === "next" ? 12 : -12), prev.getMonth(), 1));
|
|
10154
10211
|
}, []);
|
|
10155
10212
|
const isElementVerticallyScrollable = (el) => {
|
|
@@ -10159,7 +10216,7 @@ var DateRangePicker = ({
|
|
|
10159
10216
|
const node = el;
|
|
10160
10217
|
return node.scrollHeight > node.clientHeight + 1;
|
|
10161
10218
|
};
|
|
10162
|
-
|
|
10219
|
+
React31.useEffect(() => {
|
|
10163
10220
|
if (!isOpen) return;
|
|
10164
10221
|
const container = wheelContainerRef.current;
|
|
10165
10222
|
if (!container) return;
|
|
@@ -10602,15 +10659,15 @@ var CompactDatePicker = ({ value, onChange, className }) => {
|
|
|
10602
10659
|
};
|
|
10603
10660
|
|
|
10604
10661
|
// src/components/DateTimePicker.tsx
|
|
10605
|
-
import * as
|
|
10662
|
+
import * as React35 from "react";
|
|
10606
10663
|
import { Calendar as CalendarIcon, X as X12 } from "lucide-react";
|
|
10607
10664
|
|
|
10608
10665
|
// src/components/Calendar.tsx
|
|
10609
10666
|
import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight5 } from "lucide-react";
|
|
10610
|
-
import * as
|
|
10667
|
+
import * as React33 from "react";
|
|
10611
10668
|
|
|
10612
10669
|
// src/components/MonthYearPicker.tsx
|
|
10613
|
-
import * as
|
|
10670
|
+
import * as React32 from "react";
|
|
10614
10671
|
import { Calendar as Calendar2, X as X10, Check as Check4, ChevronDown as ChevronDown2 } from "lucide-react";
|
|
10615
10672
|
import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
10616
10673
|
var DEFAULT_MONTH_NAMES = [
|
|
@@ -10653,20 +10710,20 @@ function WheelColumn({
|
|
|
10653
10710
|
}) {
|
|
10654
10711
|
const height = itemHeight * WHEEL_VISIBLE_ITEMS;
|
|
10655
10712
|
const paddingY = (height - itemHeight) / 2;
|
|
10656
|
-
const rafRef =
|
|
10657
|
-
const lastVirtualIndexRef =
|
|
10658
|
-
const wheelDeltaRef =
|
|
10659
|
-
const scrollEndTimeoutRef =
|
|
10660
|
-
const suppressScrollSelectUntilRef =
|
|
10661
|
-
const suppressItemClickUntilRef =
|
|
10662
|
-
const dragRef =
|
|
10663
|
-
const draggingRef =
|
|
10664
|
-
const inertialRef =
|
|
10665
|
-
const inertiaRafRef =
|
|
10666
|
-
const inertiaVelocityRef =
|
|
10667
|
-
const inertiaLastTimeRef =
|
|
10668
|
-
const moveSamplesRef =
|
|
10669
|
-
const ui =
|
|
10713
|
+
const rafRef = React32.useRef(0);
|
|
10714
|
+
const lastVirtualIndexRef = React32.useRef(null);
|
|
10715
|
+
const wheelDeltaRef = React32.useRef(0);
|
|
10716
|
+
const scrollEndTimeoutRef = React32.useRef(null);
|
|
10717
|
+
const suppressScrollSelectUntilRef = React32.useRef(0);
|
|
10718
|
+
const suppressItemClickUntilRef = React32.useRef(0);
|
|
10719
|
+
const dragRef = React32.useRef(null);
|
|
10720
|
+
const draggingRef = React32.useRef(false);
|
|
10721
|
+
const inertialRef = React32.useRef(false);
|
|
10722
|
+
const inertiaRafRef = React32.useRef(null);
|
|
10723
|
+
const inertiaVelocityRef = React32.useRef(0);
|
|
10724
|
+
const inertiaLastTimeRef = React32.useRef(0);
|
|
10725
|
+
const moveSamplesRef = React32.useRef([]);
|
|
10726
|
+
const ui = React32.useMemo(() => {
|
|
10670
10727
|
if (size === "sm") {
|
|
10671
10728
|
return {
|
|
10672
10729
|
columnWidth: column === "month" ? "min-w-24 max-w-32" : "min-w-16 max-w-20",
|
|
@@ -10693,9 +10750,9 @@ function WheelColumn({
|
|
|
10693
10750
|
fadeHeight: "h-12"
|
|
10694
10751
|
};
|
|
10695
10752
|
}, [size, column]);
|
|
10696
|
-
const baseOffset =
|
|
10697
|
-
const extendedItems =
|
|
10698
|
-
const getNearestVirtualIndex =
|
|
10753
|
+
const baseOffset = React32.useMemo(() => loop ? items.length : 0, [items.length, loop]);
|
|
10754
|
+
const extendedItems = React32.useMemo(() => loop ? [...items, ...items, ...items] : items, [items, loop]);
|
|
10755
|
+
const getNearestVirtualIndex = React32.useCallback(
|
|
10699
10756
|
(realIndex, fromVirtual) => {
|
|
10700
10757
|
const len = items.length;
|
|
10701
10758
|
if (len <= 0) return 0;
|
|
@@ -10714,7 +10771,7 @@ function WheelColumn({
|
|
|
10714
10771
|
},
|
|
10715
10772
|
[items.length, loop]
|
|
10716
10773
|
);
|
|
10717
|
-
|
|
10774
|
+
React32.useLayoutEffect(() => {
|
|
10718
10775
|
const el = scrollRef.current;
|
|
10719
10776
|
if (!el) return;
|
|
10720
10777
|
const maxVirtual = Math.max(0, extendedItems.length - 1);
|
|
@@ -10742,7 +10799,7 @@ function WheelColumn({
|
|
|
10742
10799
|
cancelAnimationFrame(rafRef.current);
|
|
10743
10800
|
};
|
|
10744
10801
|
}, [animate, baseOffset, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
|
|
10745
|
-
|
|
10802
|
+
React32.useEffect(() => {
|
|
10746
10803
|
const el = scrollRef.current;
|
|
10747
10804
|
if (!el) return;
|
|
10748
10805
|
const lastWheelSignRef = { current: 0 };
|
|
@@ -10830,11 +10887,11 @@ function WheelColumn({
|
|
|
10830
10887
|
}, 120);
|
|
10831
10888
|
});
|
|
10832
10889
|
};
|
|
10833
|
-
const currentVirtual =
|
|
10890
|
+
const currentVirtual = React32.useMemo(() => {
|
|
10834
10891
|
if (!loop || items.length <= 0) return valueIndex;
|
|
10835
10892
|
return baseOffset + valueIndex;
|
|
10836
10893
|
}, [baseOffset, items.length, loop, valueIndex]);
|
|
10837
|
-
const commitFromScrollTop =
|
|
10894
|
+
const commitFromScrollTop = React32.useCallback(
|
|
10838
10895
|
(behavior) => {
|
|
10839
10896
|
const el = scrollRef.current;
|
|
10840
10897
|
if (!el) return;
|
|
@@ -10912,7 +10969,7 @@ function WheelColumn({
|
|
|
10912
10969
|
if (dt > 0) inertiaVelocityRef.current = (el.scrollTop - oldest.top) / dt;
|
|
10913
10970
|
}
|
|
10914
10971
|
};
|
|
10915
|
-
const startInertia =
|
|
10972
|
+
const startInertia = React32.useCallback(() => {
|
|
10916
10973
|
const el = scrollRef.current;
|
|
10917
10974
|
if (!el) return;
|
|
10918
10975
|
if (items.length <= 0) return;
|
|
@@ -11097,36 +11154,36 @@ function MonthYearPicker({
|
|
|
11097
11154
|
};
|
|
11098
11155
|
const isControlled = value !== void 0;
|
|
11099
11156
|
const initial = parseValue(isControlled ? value : defaultValue) ?? { month: now.getMonth(), year: currentYear };
|
|
11100
|
-
const [open, setOpen] =
|
|
11101
|
-
const [parts, setParts] =
|
|
11102
|
-
const [focusedColumn, setFocusedColumn] =
|
|
11103
|
-
const [localRequiredError, setLocalRequiredError] =
|
|
11104
|
-
const [hasCommittedValue, setHasCommittedValue] =
|
|
11105
|
-
const monthScrollRef =
|
|
11106
|
-
const yearScrollRef =
|
|
11107
|
-
|
|
11157
|
+
const [open, setOpen] = React32.useState(false);
|
|
11158
|
+
const [parts, setParts] = React32.useState(initial);
|
|
11159
|
+
const [focusedColumn, setFocusedColumn] = React32.useState(null);
|
|
11160
|
+
const [localRequiredError, setLocalRequiredError] = React32.useState();
|
|
11161
|
+
const [hasCommittedValue, setHasCommittedValue] = React32.useState(Boolean(parseValue(isControlled ? value : defaultValue)));
|
|
11162
|
+
const monthScrollRef = React32.useRef(null);
|
|
11163
|
+
const yearScrollRef = React32.useRef(null);
|
|
11164
|
+
React32.useEffect(() => {
|
|
11108
11165
|
if (isControlled) {
|
|
11109
11166
|
const parsed = parseValue(value);
|
|
11110
11167
|
if (parsed) setParts(parsed);
|
|
11111
11168
|
}
|
|
11112
11169
|
}, [value, isControlled]);
|
|
11113
|
-
|
|
11170
|
+
React32.useEffect(() => {
|
|
11114
11171
|
if (isControlled) {
|
|
11115
11172
|
setHasCommittedValue(Boolean(parseValue(value)));
|
|
11116
11173
|
}
|
|
11117
11174
|
}, [isControlled, value]);
|
|
11118
11175
|
const hasValue = hasCommittedValue;
|
|
11119
11176
|
const effectiveError = error ?? localRequiredError;
|
|
11120
|
-
|
|
11177
|
+
React32.useEffect(() => {
|
|
11121
11178
|
if (disabled || !required || hasValue) {
|
|
11122
11179
|
setLocalRequiredError(void 0);
|
|
11123
11180
|
}
|
|
11124
11181
|
}, [disabled, hasValue, required]);
|
|
11125
|
-
const years =
|
|
11182
|
+
const years = React32.useMemo(() => {
|
|
11126
11183
|
return Array.from({ length: resolvedMaxYear - resolvedMinYear + 1 }, (_, i) => resolvedMinYear + i);
|
|
11127
11184
|
}, [resolvedMinYear, resolvedMaxYear]);
|
|
11128
|
-
const months =
|
|
11129
|
-
const isDateInRange =
|
|
11185
|
+
const months = React32.useMemo(() => Array.from({ length: 12 }, (_, i) => i), []);
|
|
11186
|
+
const isDateInRange = React32.useCallback(
|
|
11130
11187
|
(month, year) => {
|
|
11131
11188
|
if (minDate) {
|
|
11132
11189
|
const minMonth = minDate.getMonth();
|
|
@@ -11142,7 +11199,7 @@ function MonthYearPicker({
|
|
|
11142
11199
|
},
|
|
11143
11200
|
[minDate, maxDate]
|
|
11144
11201
|
);
|
|
11145
|
-
const emit =
|
|
11202
|
+
const emit = React32.useCallback(
|
|
11146
11203
|
(next) => {
|
|
11147
11204
|
if (!next) {
|
|
11148
11205
|
setLocalRequiredError(void 0);
|
|
@@ -11158,7 +11215,7 @@ function MonthYearPicker({
|
|
|
11158
11215
|
},
|
|
11159
11216
|
[isControlled, isDateInRange, onChange]
|
|
11160
11217
|
);
|
|
11161
|
-
const tryUpdate =
|
|
11218
|
+
const tryUpdate = React32.useCallback(
|
|
11162
11219
|
(next) => {
|
|
11163
11220
|
if (!isDateInRange(next.month, next.year)) return false;
|
|
11164
11221
|
setParts(next);
|
|
@@ -11594,12 +11651,12 @@ function Calendar3({
|
|
|
11594
11651
|
...rest
|
|
11595
11652
|
}) {
|
|
11596
11653
|
const isControlledMonth = month != null;
|
|
11597
|
-
const [view, setView] =
|
|
11598
|
-
|
|
11654
|
+
const [view, setView] = React33.useState(() => month ?? defaultMonth ?? /* @__PURE__ */ new Date());
|
|
11655
|
+
React33.useEffect(() => {
|
|
11599
11656
|
if (isControlledMonth && month) setView(month);
|
|
11600
11657
|
}, [isControlledMonth, month]);
|
|
11601
11658
|
const isControlledValue = value !== void 0;
|
|
11602
|
-
const [internal, setInternal] =
|
|
11659
|
+
const [internal, setInternal] = React33.useState(defaultValue);
|
|
11603
11660
|
const selected = isControlledValue ? value : internal;
|
|
11604
11661
|
const goByView = (delta) => {
|
|
11605
11662
|
const next = display === "week" ? addDays(view, delta * 7) : addMonths(view, delta);
|
|
@@ -11611,7 +11668,7 @@ function Calendar3({
|
|
|
11611
11668
|
const weekdays = rotate(weekNames, weekStartsOn);
|
|
11612
11669
|
const days = getMonthGrid(view, weekStartsOn);
|
|
11613
11670
|
const today = /* @__PURE__ */ new Date();
|
|
11614
|
-
const byDay =
|
|
11671
|
+
const byDay = React33.useMemo(() => {
|
|
11615
11672
|
const map = /* @__PURE__ */ new Map();
|
|
11616
11673
|
for (const e of events) {
|
|
11617
11674
|
const d = toDate(e.date);
|
|
@@ -11623,11 +11680,11 @@ function Calendar3({
|
|
|
11623
11680
|
}, [events]);
|
|
11624
11681
|
const effectiveEnableEventSheet = enableEventSheet ?? !!renderEventSheet;
|
|
11625
11682
|
const isEventSheetOpenControlled = eventSheetOpen !== void 0;
|
|
11626
|
-
const [internalEventSheetOpen, setInternalEventSheetOpen] =
|
|
11683
|
+
const [internalEventSheetOpen, setInternalEventSheetOpen] = React33.useState(false);
|
|
11627
11684
|
const activeEventSheetOpen = isEventSheetOpenControlled ? !!eventSheetOpen : internalEventSheetOpen;
|
|
11628
11685
|
const isSelectedEventControlled = selectedEventId !== void 0;
|
|
11629
|
-
const [internalSelectedEventRef, setInternalSelectedEventRef] =
|
|
11630
|
-
const setEventSheetOpen =
|
|
11686
|
+
const [internalSelectedEventRef, setInternalSelectedEventRef] = React33.useState(null);
|
|
11687
|
+
const setEventSheetOpen = React33.useCallback(
|
|
11631
11688
|
(open) => {
|
|
11632
11689
|
if (!isEventSheetOpenControlled) setInternalEventSheetOpen(open);
|
|
11633
11690
|
onEventSheetOpenChange?.(open);
|
|
@@ -11638,7 +11695,7 @@ function Calendar3({
|
|
|
11638
11695
|
},
|
|
11639
11696
|
[isEventSheetOpenControlled, isSelectedEventControlled, onEventSheetOpenChange, onSelectedEventIdChange]
|
|
11640
11697
|
);
|
|
11641
|
-
const selectedEventRef =
|
|
11698
|
+
const selectedEventRef = React33.useMemo(() => {
|
|
11642
11699
|
if (isSelectedEventControlled && selectedEventId != null) {
|
|
11643
11700
|
const ev = events.find((e) => e.id === selectedEventId);
|
|
11644
11701
|
if (!ev) return null;
|
|
@@ -11648,7 +11705,7 @@ function Calendar3({
|
|
|
11648
11705
|
}
|
|
11649
11706
|
return internalSelectedEventRef;
|
|
11650
11707
|
}, [events, internalSelectedEventRef, isSelectedEventControlled, selectedEventId]);
|
|
11651
|
-
const selectedEvent =
|
|
11708
|
+
const selectedEvent = React33.useMemo(() => {
|
|
11652
11709
|
if (!selectedEventRef) return null;
|
|
11653
11710
|
const list = byDay.get(selectedEventRef.dayKey) || [];
|
|
11654
11711
|
if (selectedEventRef.eventId != null) {
|
|
@@ -11657,13 +11714,13 @@ function Calendar3({
|
|
|
11657
11714
|
const idx = selectedEventRef.index ?? -1;
|
|
11658
11715
|
return idx >= 0 && idx < list.length ? list[idx] : null;
|
|
11659
11716
|
}, [byDay, selectedEventRef]);
|
|
11660
|
-
const selectedEventDate =
|
|
11717
|
+
const selectedEventDate = React33.useMemo(() => {
|
|
11661
11718
|
if (!selectedEventRef) return null;
|
|
11662
11719
|
const [y, m, d] = selectedEventRef.dayKey.split("-").map((x) => Number(x));
|
|
11663
11720
|
if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null;
|
|
11664
11721
|
return new Date(y, m, d);
|
|
11665
11722
|
}, [selectedEventRef]);
|
|
11666
|
-
const handleEventActivate =
|
|
11723
|
+
const handleEventActivate = React33.useCallback(
|
|
11667
11724
|
(event, date, dayKey, index) => {
|
|
11668
11725
|
onEventClick?.(event, date);
|
|
11669
11726
|
onSelectedEventIdChange?.(event.id ?? void 0);
|
|
@@ -11716,7 +11773,7 @@ function Calendar3({
|
|
|
11716
11773
|
}
|
|
11717
11774
|
}
|
|
11718
11775
|
};
|
|
11719
|
-
const isDateDisabled =
|
|
11776
|
+
const isDateDisabled = React33.useCallback(
|
|
11720
11777
|
(d) => {
|
|
11721
11778
|
if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
|
|
11722
11779
|
if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
|
|
@@ -11750,7 +11807,7 @@ function Calendar3({
|
|
|
11750
11807
|
card: "border border-border/50 rounded-3xl bg-linear-to-br from-card via-background/95 to-card shadow-lg hover:shadow-xl transition-shadow duration-300 backdrop-blur-md",
|
|
11751
11808
|
minimal: "bg-transparent"
|
|
11752
11809
|
};
|
|
11753
|
-
const weekDays =
|
|
11810
|
+
const weekDays = React33.useMemo(() => {
|
|
11754
11811
|
const s = startOfWeek(view, weekStartsOn);
|
|
11755
11812
|
return Array.from({ length: 7 }, (_, i) => addDays(s, i));
|
|
11756
11813
|
}, [view, weekStartsOn]);
|
|
@@ -11771,7 +11828,7 @@ function Calendar3({
|
|
|
11771
11828
|
const holidayMatch = isHoliday(d, holidays);
|
|
11772
11829
|
const isHolidayDay = highlightHolidays && !!holidayMatch;
|
|
11773
11830
|
const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
|
|
11774
|
-
if (customDay) return /* @__PURE__ */ jsx37(
|
|
11831
|
+
if (customDay) return /* @__PURE__ */ jsx37(React33.Fragment, { children: customDay }, `${monthLabel}-${idx}`);
|
|
11775
11832
|
if (cellMode === "events") {
|
|
11776
11833
|
const limit = Math.max(0, maxEventsPerDay);
|
|
11777
11834
|
const visibleEvents = dayEvents.slice(0, limit);
|
|
@@ -11890,9 +11947,9 @@ function Calendar3({
|
|
|
11890
11947
|
}) })
|
|
11891
11948
|
] });
|
|
11892
11949
|
};
|
|
11893
|
-
const minBound =
|
|
11894
|
-
const maxBound =
|
|
11895
|
-
const prevDisabled =
|
|
11950
|
+
const minBound = React33.useMemo(() => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()) : void 0, [minDate]);
|
|
11951
|
+
const maxBound = React33.useMemo(() => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()) : void 0, [maxDate]);
|
|
11952
|
+
const prevDisabled = React33.useMemo(() => {
|
|
11896
11953
|
if (!minBound) return false;
|
|
11897
11954
|
if (display === "week") {
|
|
11898
11955
|
const start = startOfWeek(view, weekStartsOn);
|
|
@@ -11902,7 +11959,7 @@ function Calendar3({
|
|
|
11902
11959
|
const prevEnd = endOfMonth(addMonths(view, -1));
|
|
11903
11960
|
return prevEnd < minBound;
|
|
11904
11961
|
}, [display, view, weekStartsOn, minBound]);
|
|
11905
|
-
const nextDisabled =
|
|
11962
|
+
const nextDisabled = React33.useMemo(() => {
|
|
11906
11963
|
if (!maxBound) return false;
|
|
11907
11964
|
if (display === "week") {
|
|
11908
11965
|
const start = startOfWeek(view, weekStartsOn);
|
|
@@ -11979,7 +12036,7 @@ function Calendar3({
|
|
|
11979
12036
|
const holidayMatch = isHoliday(d, holidays);
|
|
11980
12037
|
const isHolidayDay = highlightHolidays && !!holidayMatch;
|
|
11981
12038
|
const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
|
|
11982
|
-
if (customDay) return /* @__PURE__ */ jsx37(
|
|
12039
|
+
if (customDay) return /* @__PURE__ */ jsx37(React33.Fragment, { children: customDay }, `wd-${idx}`);
|
|
11983
12040
|
if (cellMode === "events") {
|
|
11984
12041
|
const limit = Math.max(0, maxEventsPerDay);
|
|
11985
12042
|
const visibleEvents = dayEvents.slice(0, limit);
|
|
@@ -12090,7 +12147,7 @@ function Calendar3({
|
|
|
12090
12147
|
`wd-${idx}`
|
|
12091
12148
|
);
|
|
12092
12149
|
}) })
|
|
12093
|
-
] }) : /* @__PURE__ */ jsx37("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ jsx37(
|
|
12150
|
+
] }) : /* @__PURE__ */ jsx37("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ jsx37(React33.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) }),
|
|
12094
12151
|
effectiveEnableEventSheet && selectedEvent && selectedEventDate ? /* @__PURE__ */ jsx37(
|
|
12095
12152
|
Sheet,
|
|
12096
12153
|
{
|
|
@@ -12120,7 +12177,7 @@ function Calendar3({
|
|
|
12120
12177
|
}
|
|
12121
12178
|
|
|
12122
12179
|
// src/components/TimePicker.tsx
|
|
12123
|
-
import * as
|
|
12180
|
+
import * as React34 from "react";
|
|
12124
12181
|
import { Clock as Clock2, X as X11, Check as Check5, Sun, Moon, Sunset, Coffee } from "lucide-react";
|
|
12125
12182
|
import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
12126
12183
|
var pad = (n) => n.toString().padStart(2, "0");
|
|
@@ -12147,21 +12204,21 @@ function WheelColumn2({
|
|
|
12147
12204
|
}) {
|
|
12148
12205
|
const height = itemHeight * WHEEL_VISIBLE_ITEMS2;
|
|
12149
12206
|
const paddingY = (height - itemHeight) / 2;
|
|
12150
|
-
const rafRef =
|
|
12151
|
-
const lastVirtualIndexRef =
|
|
12152
|
-
const wheelDeltaRef =
|
|
12153
|
-
const scrollEndTimeoutRef =
|
|
12154
|
-
const suppressScrollSelectUntilRef =
|
|
12155
|
-
const suppressItemClickUntilRef =
|
|
12156
|
-
const dragRef =
|
|
12157
|
-
const draggingRef =
|
|
12158
|
-
const inertialRef =
|
|
12159
|
-
const inertiaRafRef =
|
|
12160
|
-
const inertiaVelocityRef =
|
|
12161
|
-
const inertiaLastTimeRef =
|
|
12162
|
-
const moveSamplesRef =
|
|
12207
|
+
const rafRef = React34.useRef(0);
|
|
12208
|
+
const lastVirtualIndexRef = React34.useRef(null);
|
|
12209
|
+
const wheelDeltaRef = React34.useRef(0);
|
|
12210
|
+
const scrollEndTimeoutRef = React34.useRef(null);
|
|
12211
|
+
const suppressScrollSelectUntilRef = React34.useRef(0);
|
|
12212
|
+
const suppressItemClickUntilRef = React34.useRef(0);
|
|
12213
|
+
const dragRef = React34.useRef(null);
|
|
12214
|
+
const draggingRef = React34.useRef(false);
|
|
12215
|
+
const inertialRef = React34.useRef(false);
|
|
12216
|
+
const inertiaRafRef = React34.useRef(null);
|
|
12217
|
+
const inertiaVelocityRef = React34.useRef(0);
|
|
12218
|
+
const inertiaLastTimeRef = React34.useRef(0);
|
|
12219
|
+
const moveSamplesRef = React34.useRef([]);
|
|
12163
12220
|
const loop = true;
|
|
12164
|
-
const ui =
|
|
12221
|
+
const ui = React34.useMemo(() => {
|
|
12165
12222
|
if (size === "sm") {
|
|
12166
12223
|
return {
|
|
12167
12224
|
columnWidth: "min-w-16 max-w-21",
|
|
@@ -12188,9 +12245,9 @@ function WheelColumn2({
|
|
|
12188
12245
|
fadeHeight: "h-12"
|
|
12189
12246
|
};
|
|
12190
12247
|
}, [size]);
|
|
12191
|
-
const baseOffset =
|
|
12192
|
-
const extendedItems =
|
|
12193
|
-
const getNearestVirtualIndex =
|
|
12248
|
+
const baseOffset = React34.useMemo(() => loop ? items.length : 0, [items.length, loop]);
|
|
12249
|
+
const extendedItems = React34.useMemo(() => loop ? [...items, ...items, ...items] : items, [items, loop]);
|
|
12250
|
+
const getNearestVirtualIndex = React34.useCallback(
|
|
12194
12251
|
(realIndex, fromVirtual) => {
|
|
12195
12252
|
const len = items.length;
|
|
12196
12253
|
if (len <= 0) return 0;
|
|
@@ -12209,7 +12266,7 @@ function WheelColumn2({
|
|
|
12209
12266
|
},
|
|
12210
12267
|
[items.length, loop]
|
|
12211
12268
|
);
|
|
12212
|
-
|
|
12269
|
+
React34.useLayoutEffect(() => {
|
|
12213
12270
|
const el = scrollRef.current;
|
|
12214
12271
|
if (!el) return;
|
|
12215
12272
|
const maxVirtual = Math.max(0, extendedItems.length - 1);
|
|
@@ -12237,7 +12294,7 @@ function WheelColumn2({
|
|
|
12237
12294
|
cancelAnimationFrame(rafRef.current);
|
|
12238
12295
|
};
|
|
12239
12296
|
}, [animate, baseOffset, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
|
|
12240
|
-
|
|
12297
|
+
React34.useEffect(() => {
|
|
12241
12298
|
const el = scrollRef.current;
|
|
12242
12299
|
if (!el) return;
|
|
12243
12300
|
const lastWheelSignRef = { current: 0 };
|
|
@@ -12325,11 +12382,11 @@ function WheelColumn2({
|
|
|
12325
12382
|
}, 120);
|
|
12326
12383
|
});
|
|
12327
12384
|
};
|
|
12328
|
-
const currentVirtual =
|
|
12385
|
+
const currentVirtual = React34.useMemo(() => {
|
|
12329
12386
|
if (!loop || items.length <= 0) return valueIndex;
|
|
12330
12387
|
return baseOffset + valueIndex;
|
|
12331
12388
|
}, [baseOffset, items.length, loop, valueIndex]);
|
|
12332
|
-
const commitFromScrollTop =
|
|
12389
|
+
const commitFromScrollTop = React34.useCallback(
|
|
12333
12390
|
(behavior) => {
|
|
12334
12391
|
const el = scrollRef.current;
|
|
12335
12392
|
if (!el) return;
|
|
@@ -12407,7 +12464,7 @@ function WheelColumn2({
|
|
|
12407
12464
|
if (dt > 0) inertiaVelocityRef.current = (el.scrollTop - oldest.top) / dt;
|
|
12408
12465
|
}
|
|
12409
12466
|
};
|
|
12410
|
-
const startInertia =
|
|
12467
|
+
const startInertia = React34.useCallback(() => {
|
|
12411
12468
|
const el = scrollRef.current;
|
|
12412
12469
|
if (!el) return;
|
|
12413
12470
|
if (items.length <= 0) return;
|
|
@@ -12608,44 +12665,44 @@ function TimePicker({
|
|
|
12608
12665
|
}) {
|
|
12609
12666
|
const tv = useSmartTranslations("ValidationInput");
|
|
12610
12667
|
const gi18n = useGlobalI18n();
|
|
12611
|
-
const autoId =
|
|
12668
|
+
const autoId = React34.useId();
|
|
12612
12669
|
const isControlled = value !== void 0;
|
|
12613
12670
|
const now = /* @__PURE__ */ new Date();
|
|
12614
12671
|
const initial = parseTime(isControlled ? value : defaultValue, format, includeSeconds) || (format === "12" ? { h: now.getHours() % 12 || 12, m: now.getMinutes(), s: now.getSeconds(), p: now.getHours() >= 12 ? "PM" : "AM" } : { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() });
|
|
12615
|
-
const [open, setOpen] =
|
|
12616
|
-
const [parts, setParts] =
|
|
12617
|
-
const [manualInput, setManualInput] =
|
|
12618
|
-
const [isDirectEditing, setIsDirectEditing] =
|
|
12619
|
-
const [focusedColumn, setFocusedColumn] =
|
|
12620
|
-
const [localRequiredError, setLocalRequiredError] =
|
|
12621
|
-
const [hasCommittedValue, setHasCommittedValue] =
|
|
12622
|
-
const hourScrollRef =
|
|
12623
|
-
const minuteScrollRef =
|
|
12624
|
-
const secondScrollRef =
|
|
12625
|
-
const periodRef =
|
|
12626
|
-
const directEditInputRef =
|
|
12672
|
+
const [open, setOpen] = React34.useState(false);
|
|
12673
|
+
const [parts, setParts] = React34.useState(initial);
|
|
12674
|
+
const [manualInput, setManualInput] = React34.useState(formatTime2(initial, format, includeSeconds));
|
|
12675
|
+
const [isDirectEditing, setIsDirectEditing] = React34.useState(false);
|
|
12676
|
+
const [focusedColumn, setFocusedColumn] = React34.useState(null);
|
|
12677
|
+
const [localRequiredError, setLocalRequiredError] = React34.useState();
|
|
12678
|
+
const [hasCommittedValue, setHasCommittedValue] = React34.useState(Boolean(isControlled ? value : defaultValue));
|
|
12679
|
+
const hourScrollRef = React34.useRef(null);
|
|
12680
|
+
const minuteScrollRef = React34.useRef(null);
|
|
12681
|
+
const secondScrollRef = React34.useRef(null);
|
|
12682
|
+
const periodRef = React34.useRef(null);
|
|
12683
|
+
const directEditInputRef = React34.useRef(null);
|
|
12627
12684
|
const triggerId = `time-picker-trigger-${autoId}`;
|
|
12628
12685
|
const labelId = label ? `time-picker-label-${autoId}` : void 0;
|
|
12629
|
-
|
|
12686
|
+
React34.useEffect(() => {
|
|
12630
12687
|
if (isControlled) {
|
|
12631
12688
|
const parsed = parseTime(value, format, includeSeconds);
|
|
12632
12689
|
if (parsed) setParts(parsed);
|
|
12633
12690
|
}
|
|
12634
12691
|
}, [value, isControlled, format, includeSeconds]);
|
|
12635
|
-
|
|
12692
|
+
React34.useEffect(() => {
|
|
12636
12693
|
setManualInput(formatTime2(parts, format, includeSeconds));
|
|
12637
12694
|
}, [format, includeSeconds, parts]);
|
|
12638
|
-
|
|
12695
|
+
React34.useEffect(() => {
|
|
12639
12696
|
if (!isDirectEditing) return;
|
|
12640
12697
|
directEditInputRef.current?.focus();
|
|
12641
12698
|
directEditInputRef.current?.select();
|
|
12642
12699
|
}, [isDirectEditing]);
|
|
12643
|
-
|
|
12700
|
+
React34.useEffect(() => {
|
|
12644
12701
|
if (isControlled) {
|
|
12645
12702
|
setHasCommittedValue(Boolean(value));
|
|
12646
12703
|
}
|
|
12647
12704
|
}, [isControlled, value]);
|
|
12648
|
-
const isTimeDisabled =
|
|
12705
|
+
const isTimeDisabled = React34.useCallback(
|
|
12649
12706
|
(timeStr) => {
|
|
12650
12707
|
if (!disabledTimes) return false;
|
|
12651
12708
|
if (typeof disabledTimes === "function") return disabledTimes(timeStr);
|
|
@@ -12655,7 +12712,7 @@ function TimePicker({
|
|
|
12655
12712
|
);
|
|
12656
12713
|
const resolvedMinTime = minTime ?? min;
|
|
12657
12714
|
const resolvedMaxTime = maxTime ?? max;
|
|
12658
|
-
const toSeconds =
|
|
12715
|
+
const toSeconds = React34.useCallback(
|
|
12659
12716
|
(p) => {
|
|
12660
12717
|
let h = p.h;
|
|
12661
12718
|
if (format === "12") {
|
|
@@ -12667,7 +12724,7 @@ function TimePicker({
|
|
|
12667
12724
|
},
|
|
12668
12725
|
[format, includeSeconds]
|
|
12669
12726
|
);
|
|
12670
|
-
const isTimeInRange =
|
|
12727
|
+
const isTimeInRange = React34.useCallback(
|
|
12671
12728
|
(timeStr) => {
|
|
12672
12729
|
if (!resolvedMinTime && !resolvedMaxTime) return true;
|
|
12673
12730
|
const parsed = parseTime(timeStr, format, includeSeconds);
|
|
@@ -12685,7 +12742,7 @@ function TimePicker({
|
|
|
12685
12742
|
},
|
|
12686
12743
|
[format, includeSeconds, resolvedMaxTime, resolvedMinTime, toSeconds]
|
|
12687
12744
|
);
|
|
12688
|
-
const canEmit =
|
|
12745
|
+
const canEmit = React34.useCallback(
|
|
12689
12746
|
(next) => {
|
|
12690
12747
|
const timeStr = next ? formatTime2(next, format, includeSeconds) : void 0;
|
|
12691
12748
|
if (!timeStr) return true;
|
|
@@ -12695,7 +12752,7 @@ function TimePicker({
|
|
|
12695
12752
|
},
|
|
12696
12753
|
[format, includeSeconds, isTimeDisabled, isTimeInRange]
|
|
12697
12754
|
);
|
|
12698
|
-
const emit =
|
|
12755
|
+
const emit = React34.useCallback(
|
|
12699
12756
|
(next) => {
|
|
12700
12757
|
const timeStr = next ? formatTime2(next, format, includeSeconds) : void 0;
|
|
12701
12758
|
if (!canEmit(next)) return;
|
|
@@ -12707,7 +12764,7 @@ function TimePicker({
|
|
|
12707
12764
|
},
|
|
12708
12765
|
[canEmit, format, includeSeconds, isControlled, onChange]
|
|
12709
12766
|
);
|
|
12710
|
-
const tryUpdate =
|
|
12767
|
+
const tryUpdate = React34.useCallback(
|
|
12711
12768
|
(next) => {
|
|
12712
12769
|
if (!canEmit(next)) return false;
|
|
12713
12770
|
setParts(next);
|
|
@@ -12725,17 +12782,17 @@ function TimePicker({
|
|
|
12725
12782
|
setFocusedColumn(null);
|
|
12726
12783
|
}
|
|
12727
12784
|
};
|
|
12728
|
-
|
|
12785
|
+
React34.useEffect(() => {
|
|
12729
12786
|
if (disabled || !required || hasCommittedValue) {
|
|
12730
12787
|
setLocalRequiredError(void 0);
|
|
12731
12788
|
}
|
|
12732
12789
|
}, [disabled, hasCommittedValue, required]);
|
|
12733
|
-
const focusColumn =
|
|
12790
|
+
const focusColumn = React34.useCallback((column) => {
|
|
12734
12791
|
if (!column) return;
|
|
12735
12792
|
const target = column === "hour" ? hourScrollRef.current : column === "minute" ? minuteScrollRef.current : column === "second" ? secondScrollRef.current : periodRef.current;
|
|
12736
12793
|
target?.focus({ preventScroll: true });
|
|
12737
12794
|
}, []);
|
|
12738
|
-
|
|
12795
|
+
React34.useEffect(() => {
|
|
12739
12796
|
if (variant !== "inline" && !open) return;
|
|
12740
12797
|
focusColumn(focusedColumn);
|
|
12741
12798
|
}, [focusColumn, focusedColumn, open, variant]);
|
|
@@ -12817,7 +12874,7 @@ function TimePicker({
|
|
|
12817
12874
|
}
|
|
12818
12875
|
}
|
|
12819
12876
|
};
|
|
12820
|
-
const commitManualInput =
|
|
12877
|
+
const commitManualInput = React34.useCallback(
|
|
12821
12878
|
(input) => {
|
|
12822
12879
|
const trimmed = input.trim();
|
|
12823
12880
|
if (!trimmed) {
|
|
@@ -12848,12 +12905,12 @@ function TimePicker({
|
|
|
12848
12905
|
},
|
|
12849
12906
|
[display, format, includeSeconds, isTimeDisabled, isTimeInRange, tryUpdate]
|
|
12850
12907
|
);
|
|
12851
|
-
const startDirectEdit =
|
|
12908
|
+
const startDirectEdit = React34.useCallback(() => {
|
|
12852
12909
|
if (disabled) return;
|
|
12853
12910
|
setManualInput(display);
|
|
12854
12911
|
setIsDirectEditing(true);
|
|
12855
12912
|
}, [disabled, display]);
|
|
12856
|
-
const stopDirectEdit =
|
|
12913
|
+
const stopDirectEdit = React34.useCallback(
|
|
12857
12914
|
(mode) => {
|
|
12858
12915
|
if (mode === "commit") {
|
|
12859
12916
|
commitManualInput(manualInput);
|
|
@@ -13429,8 +13486,8 @@ var DateTimePicker = ({
|
|
|
13429
13486
|
const t = useSmartTranslations("DateTimePicker");
|
|
13430
13487
|
const tv = useSmartTranslations("ValidationInput");
|
|
13431
13488
|
const locale = useSmartLocale();
|
|
13432
|
-
const [open, setOpen] =
|
|
13433
|
-
const [localRequiredError, setLocalRequiredError] =
|
|
13489
|
+
const [open, setOpen] = React35.useState(false);
|
|
13490
|
+
const [localRequiredError, setLocalRequiredError] = React35.useState();
|
|
13434
13491
|
const sizeStyles8 = {
|
|
13435
13492
|
sm: {
|
|
13436
13493
|
trigger: "h-8 px-2.5 py-1.5 text-sm md:h-7 md:text-xs",
|
|
@@ -13463,13 +13520,13 @@ var DateTimePicker = ({
|
|
|
13463
13520
|
gap: "gap-4"
|
|
13464
13521
|
}
|
|
13465
13522
|
};
|
|
13466
|
-
const [tempDate, setTempDate] =
|
|
13467
|
-
const [calendarMonth, setCalendarMonth] =
|
|
13468
|
-
|
|
13523
|
+
const [tempDate, setTempDate] = React35.useState(value);
|
|
13524
|
+
const [calendarMonth, setCalendarMonth] = React35.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
13525
|
+
React35.useEffect(() => {
|
|
13469
13526
|
setTempDate(value);
|
|
13470
13527
|
setCalendarMonth(value ?? /* @__PURE__ */ new Date());
|
|
13471
13528
|
}, [value, open]);
|
|
13472
|
-
|
|
13529
|
+
React35.useEffect(() => {
|
|
13473
13530
|
if (disabled || !required || value) {
|
|
13474
13531
|
setLocalRequiredError(void 0);
|
|
13475
13532
|
}
|
|
@@ -13688,7 +13745,7 @@ var DateTimePicker = ({
|
|
|
13688
13745
|
};
|
|
13689
13746
|
|
|
13690
13747
|
// src/components/CalendarTimeline/CalendarTimeline.tsx
|
|
13691
|
-
import * as
|
|
13748
|
+
import * as React41 from "react";
|
|
13692
13749
|
import { Plus as Plus2 } from "lucide-react";
|
|
13693
13750
|
|
|
13694
13751
|
// src/components/CalendarTimeline/date.ts
|
|
@@ -13928,10 +13985,10 @@ function intervalPack(items) {
|
|
|
13928
13985
|
}
|
|
13929
13986
|
|
|
13930
13987
|
// src/components/CalendarTimeline/hooks.ts
|
|
13931
|
-
import * as
|
|
13988
|
+
import * as React36 from "react";
|
|
13932
13989
|
function useHorizontalScrollSync(args) {
|
|
13933
13990
|
const { bodyRef, headerRef, leftRef } = args;
|
|
13934
|
-
|
|
13991
|
+
React36.useEffect(() => {
|
|
13935
13992
|
const body = bodyRef.current;
|
|
13936
13993
|
const header = headerRef.current;
|
|
13937
13994
|
const left = leftRef?.current ?? null;
|
|
@@ -13989,9 +14046,9 @@ function lowerBound(arr, target) {
|
|
|
13989
14046
|
function useVirtualVariableRows(args) {
|
|
13990
14047
|
const { enabled, overscan, rowHeights, scrollRef } = args;
|
|
13991
14048
|
const itemCount = rowHeights.length;
|
|
13992
|
-
const [viewportHeight, setViewportHeight] =
|
|
13993
|
-
const [scrollTop, setScrollTop] =
|
|
13994
|
-
|
|
14049
|
+
const [viewportHeight, setViewportHeight] = React36.useState(0);
|
|
14050
|
+
const [scrollTop, setScrollTop] = React36.useState(0);
|
|
14051
|
+
React36.useEffect(() => {
|
|
13995
14052
|
if (!enabled) {
|
|
13996
14053
|
setViewportHeight(0);
|
|
13997
14054
|
return;
|
|
@@ -14004,7 +14061,7 @@ function useVirtualVariableRows(args) {
|
|
|
14004
14061
|
ro.observe(el);
|
|
14005
14062
|
return () => ro.disconnect();
|
|
14006
14063
|
}, [enabled, scrollRef]);
|
|
14007
|
-
|
|
14064
|
+
React36.useEffect(() => {
|
|
14008
14065
|
if (!enabled) {
|
|
14009
14066
|
setScrollTop(0);
|
|
14010
14067
|
return;
|
|
@@ -14029,7 +14086,7 @@ function useVirtualVariableRows(args) {
|
|
|
14029
14086
|
el.removeEventListener("scroll", onScroll);
|
|
14030
14087
|
};
|
|
14031
14088
|
}, [enabled, scrollRef]);
|
|
14032
|
-
const prefix =
|
|
14089
|
+
const prefix = React36.useMemo(() => {
|
|
14033
14090
|
const out = new Array(itemCount + 1);
|
|
14034
14091
|
out[0] = 0;
|
|
14035
14092
|
for (let i = 0; i < itemCount; i++) {
|
|
@@ -14037,7 +14094,7 @@ function useVirtualVariableRows(args) {
|
|
|
14037
14094
|
}
|
|
14038
14095
|
return out;
|
|
14039
14096
|
}, [itemCount, rowHeights]);
|
|
14040
|
-
return
|
|
14097
|
+
return React36.useMemo(() => {
|
|
14041
14098
|
if (!enabled) {
|
|
14042
14099
|
return { startIndex: 0, endIndex: itemCount, topSpacer: 0, bottomSpacer: 0, totalHeight: prefix[itemCount] ?? 0 };
|
|
14043
14100
|
}
|
|
@@ -14053,8 +14110,8 @@ function useVirtualVariableRows(args) {
|
|
|
14053
14110
|
}, [enabled, itemCount, overscan, prefix, scrollTop, viewportHeight]);
|
|
14054
14111
|
}
|
|
14055
14112
|
function useClientWidth(ref) {
|
|
14056
|
-
const [width, setWidth] =
|
|
14057
|
-
|
|
14113
|
+
const [width, setWidth] = React36.useState(0);
|
|
14114
|
+
React36.useEffect(() => {
|
|
14058
14115
|
const el = ref.current;
|
|
14059
14116
|
if (!el) return;
|
|
14060
14117
|
const update = () => setWidth(el.clientWidth);
|
|
@@ -14277,7 +14334,7 @@ function resourcesById(resources) {
|
|
|
14277
14334
|
}
|
|
14278
14335
|
|
|
14279
14336
|
// src/components/CalendarTimeline/CalendarTimelineHeader.tsx
|
|
14280
|
-
import * as
|
|
14337
|
+
import * as React37 from "react";
|
|
14281
14338
|
import { Calendar as Calendar4, CalendarDays, CalendarRange, ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight6, GripVertical, Plus } from "lucide-react";
|
|
14282
14339
|
import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
14283
14340
|
var VIEW_ICONS = {
|
|
@@ -14308,7 +14365,7 @@ function CalendarTimelineHeader(props) {
|
|
|
14308
14365
|
headerRef,
|
|
14309
14366
|
slotHeaderNodes
|
|
14310
14367
|
} = props;
|
|
14311
|
-
const resolvedAvailableViews =
|
|
14368
|
+
const resolvedAvailableViews = React37.useMemo(
|
|
14312
14369
|
() => availableViews?.length ? availableViews : ["month", "week", "day", "sprint"],
|
|
14313
14370
|
[availableViews]
|
|
14314
14371
|
);
|
|
@@ -14317,22 +14374,22 @@ function CalendarTimelineHeader(props) {
|
|
|
14317
14374
|
const gi18n = useGlobalI18n();
|
|
14318
14375
|
const dt = useSmartTranslations("DateTimePicker");
|
|
14319
14376
|
const locale = useSmartLocale();
|
|
14320
|
-
const [todayOpen, setTodayOpen] =
|
|
14321
|
-
const [tempDate, setTempDate] =
|
|
14322
|
-
const [calendarMonth, setCalendarMonth] =
|
|
14323
|
-
|
|
14377
|
+
const [todayOpen, setTodayOpen] = React37.useState(false);
|
|
14378
|
+
const [tempDate, setTempDate] = React37.useState(() => now);
|
|
14379
|
+
const [calendarMonth, setCalendarMonth] = React37.useState(() => now);
|
|
14380
|
+
React37.useEffect(() => {
|
|
14324
14381
|
if (!todayOpen) return;
|
|
14325
14382
|
setTempDate(now);
|
|
14326
14383
|
setCalendarMonth(now);
|
|
14327
14384
|
}, [now, todayOpen]);
|
|
14328
|
-
const monthLabel =
|
|
14385
|
+
const monthLabel = React37.useCallback(
|
|
14329
14386
|
(date) => date.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", {
|
|
14330
14387
|
month: "long",
|
|
14331
14388
|
year: "numeric"
|
|
14332
14389
|
}),
|
|
14333
14390
|
[locale]
|
|
14334
14391
|
);
|
|
14335
|
-
const weekdays =
|
|
14392
|
+
const weekdays = React37.useMemo(() => {
|
|
14336
14393
|
switch (locale) {
|
|
14337
14394
|
case "vi":
|
|
14338
14395
|
return ["CN", "T2", "T3", "T4", "T5", "T6", "T7"];
|
|
@@ -14344,12 +14401,12 @@ function CalendarTimelineHeader(props) {
|
|
|
14344
14401
|
return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
14345
14402
|
}
|
|
14346
14403
|
}, [locale]);
|
|
14347
|
-
const getTimeString =
|
|
14404
|
+
const getTimeString = React37.useCallback((date) => {
|
|
14348
14405
|
const h = date.getHours();
|
|
14349
14406
|
const m = date.getMinutes();
|
|
14350
14407
|
return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
|
|
14351
14408
|
}, []);
|
|
14352
|
-
const handleDateSelect =
|
|
14409
|
+
const handleDateSelect = React37.useCallback((date) => {
|
|
14353
14410
|
if (!(date instanceof Date)) return;
|
|
14354
14411
|
setTempDate((prev) => {
|
|
14355
14412
|
const next = new Date(date);
|
|
@@ -14357,7 +14414,7 @@ function CalendarTimelineHeader(props) {
|
|
|
14357
14414
|
return next;
|
|
14358
14415
|
});
|
|
14359
14416
|
}, []);
|
|
14360
|
-
const handleTimeChange =
|
|
14417
|
+
const handleTimeChange = React37.useCallback((timeStr) => {
|
|
14361
14418
|
if (!timeStr) return;
|
|
14362
14419
|
const [hStr, mStr] = timeStr.split(":");
|
|
14363
14420
|
const h = parseInt(hStr, 10);
|
|
@@ -14369,7 +14426,7 @@ function CalendarTimelineHeader(props) {
|
|
|
14369
14426
|
return next;
|
|
14370
14427
|
});
|
|
14371
14428
|
}, []);
|
|
14372
|
-
const applyDateTime =
|
|
14429
|
+
const applyDateTime = React37.useCallback(() => {
|
|
14373
14430
|
onApplyDateTime(tempDate);
|
|
14374
14431
|
setTodayOpen(false);
|
|
14375
14432
|
}, [onApplyDateTime, tempDate]);
|
|
@@ -14633,9 +14690,9 @@ function ResourceRowCell(props) {
|
|
|
14633
14690
|
}
|
|
14634
14691
|
|
|
14635
14692
|
// src/components/CalendarTimeline/CalendarTimelineGridOverlay.tsx
|
|
14636
|
-
import * as
|
|
14693
|
+
import * as React38 from "react";
|
|
14637
14694
|
import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
14638
|
-
var CalendarTimelineGridOverlay =
|
|
14695
|
+
var CalendarTimelineGridOverlay = React38.memo(function CalendarTimelineGridOverlay2(props) {
|
|
14639
14696
|
const {
|
|
14640
14697
|
gridWidth,
|
|
14641
14698
|
height,
|
|
@@ -14683,12 +14740,12 @@ var CalendarTimelineGridOverlay = React37.memo(function CalendarTimelineGridOver
|
|
|
14683
14740
|
});
|
|
14684
14741
|
|
|
14685
14742
|
// src/components/CalendarTimeline/CalendarTimelineSlotHeaderCell.tsx
|
|
14686
|
-
import * as
|
|
14743
|
+
import * as React39 from "react";
|
|
14687
14744
|
import { Dot } from "lucide-react";
|
|
14688
14745
|
import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
14689
|
-
var CalendarTimelineSlotHeaderCell =
|
|
14746
|
+
var CalendarTimelineSlotHeaderCell = React39.memo(function CalendarTimelineSlotHeaderCell2(props) {
|
|
14690
14747
|
const { width, activeView, isToday: isToday2, label, ariaLabel, borderClassName, dayHeaderMarks, idx, className } = props;
|
|
14691
|
-
const content =
|
|
14748
|
+
const content = React39.useMemo(() => {
|
|
14692
14749
|
if (activeView === "day" && dayHeaderMarks) {
|
|
14693
14750
|
if (dayHeaderMarks.showEllipsis[idx]) return /* @__PURE__ */ jsx44("span", { className: "text-xs text-muted-foreground/70 select-none", children: "\u2026" });
|
|
14694
14751
|
if (!dayHeaderMarks.showTime[idx]) return null;
|
|
@@ -14711,7 +14768,7 @@ var CalendarTimelineSlotHeaderCell = React38.memo(function CalendarTimelineSlotH
|
|
|
14711
14768
|
});
|
|
14712
14769
|
|
|
14713
14770
|
// src/components/CalendarTimeline/internal-hooks.ts
|
|
14714
|
-
import * as
|
|
14771
|
+
import * as React40 from "react";
|
|
14715
14772
|
function useTimelineSlots(args) {
|
|
14716
14773
|
const {
|
|
14717
14774
|
activeView,
|
|
@@ -14726,7 +14783,7 @@ function useTimelineSlots(args) {
|
|
|
14726
14783
|
formatters,
|
|
14727
14784
|
dueDateSprint
|
|
14728
14785
|
} = args;
|
|
14729
|
-
const { slots, range } =
|
|
14786
|
+
const { slots, range } = React40.useMemo(() => {
|
|
14730
14787
|
const { start, end, slotStarts: slotStarts2 } = computeSlotStarts({
|
|
14731
14788
|
view: activeView,
|
|
14732
14789
|
date: activeDate,
|
|
@@ -14781,18 +14838,18 @@ function useTimelineSlots(args) {
|
|
|
14781
14838
|
const match = matchSprintDef(s, idx);
|
|
14782
14839
|
if (match && sprintRangeText) {
|
|
14783
14840
|
const rangeText = sprintRangeText(match.startMs, match.endMs);
|
|
14784
|
-
return
|
|
14841
|
+
return React40.createElement(
|
|
14785
14842
|
"span",
|
|
14786
14843
|
{ className: "inline-flex flex-col items-center leading-tight" },
|
|
14787
|
-
|
|
14788
|
-
|
|
14844
|
+
React40.createElement("span", { className: "text-[11px] font-semibold text-foreground truncate max-w-32" }, match.title),
|
|
14845
|
+
React40.createElement("span", { className: "text-[10px] font-medium text-muted-foreground/70" }, rangeText)
|
|
14789
14846
|
);
|
|
14790
14847
|
}
|
|
14791
|
-
return
|
|
14848
|
+
return React40.createElement(
|
|
14792
14849
|
"span",
|
|
14793
14850
|
{ className: "inline-flex flex-col items-center leading-tight" },
|
|
14794
|
-
|
|
14795
|
-
|
|
14851
|
+
React40.createElement("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70" }, "S"),
|
|
14852
|
+
React40.createElement("span", { className: "text-sm font-semibold text-foreground" }, String(idx + 1).padStart(2, "0"))
|
|
14796
14853
|
);
|
|
14797
14854
|
})(),
|
|
14798
14855
|
isToday: (() => {
|
|
@@ -14820,9 +14877,9 @@ function useTimelineSlots(args) {
|
|
|
14820
14877
|
weekStartsOn,
|
|
14821
14878
|
workHours
|
|
14822
14879
|
]);
|
|
14823
|
-
const slotStarts =
|
|
14824
|
-
const todaySlotIdx =
|
|
14825
|
-
const weekendSlotIdxs =
|
|
14880
|
+
const slotStarts = React40.useMemo(() => slots.map((s) => s.start), [slots]);
|
|
14881
|
+
const todaySlotIdx = React40.useMemo(() => slots.findIndex((s) => s.isToday), [slots]);
|
|
14882
|
+
const weekendSlotIdxs = React40.useMemo(() => {
|
|
14826
14883
|
const out = [];
|
|
14827
14884
|
for (let i = 0; i < slots.length; i++) if (slots[i]?.isWeekend) out.push(i);
|
|
14828
14885
|
return out;
|
|
@@ -14831,16 +14888,16 @@ function useTimelineSlots(args) {
|
|
|
14831
14888
|
}
|
|
14832
14889
|
function useNormalizedEvents(args) {
|
|
14833
14890
|
const { events, range, activeView, resolvedTimeZone, resources } = args;
|
|
14834
|
-
const normalizedEvents =
|
|
14891
|
+
const normalizedEvents = React40.useMemo(() => {
|
|
14835
14892
|
return normalizeEvents({ events, range, view: activeView, timeZone: resolvedTimeZone });
|
|
14836
14893
|
}, [activeView, events, range, resolvedTimeZone]);
|
|
14837
|
-
const eventsByResource =
|
|
14838
|
-
const resourceById =
|
|
14894
|
+
const eventsByResource = React40.useMemo(() => eventsByResourceId(normalizedEvents), [normalizedEvents]);
|
|
14895
|
+
const resourceById = React40.useMemo(() => resourcesById(resources), [resources]);
|
|
14839
14896
|
return { normalizedEvents, eventsByResource, resourceById };
|
|
14840
14897
|
}
|
|
14841
14898
|
function useDayHeaderMarks(args) {
|
|
14842
14899
|
const { enabled, activeView, normalizedEvents, slotStarts, slotCount } = args;
|
|
14843
|
-
return
|
|
14900
|
+
return React40.useMemo(() => {
|
|
14844
14901
|
if (!enabled) return null;
|
|
14845
14902
|
if (activeView !== "day") return null;
|
|
14846
14903
|
const n = slotCount;
|
|
@@ -14875,14 +14932,14 @@ function useSlotMetrics(args) {
|
|
|
14875
14932
|
dayHeaderSmart,
|
|
14876
14933
|
daySlotCompression
|
|
14877
14934
|
} = args;
|
|
14878
|
-
const fixedSlotWidth =
|
|
14935
|
+
const fixedSlotWidth = React40.useMemo(() => {
|
|
14879
14936
|
const baseSlotWidth = activeView === "month" || activeView === "day" ? effectiveSlotMinWidth * 3 : effectiveSlotMinWidth;
|
|
14880
14937
|
if (activeView !== "week") return baseSlotWidth;
|
|
14881
14938
|
if (bodyClientWidth <= 0) return baseSlotWidth;
|
|
14882
14939
|
if (slotsLength <= 0) return baseSlotWidth;
|
|
14883
14940
|
return Math.max(baseSlotWidth, bodyClientWidth / slotsLength);
|
|
14884
14941
|
}, [activeView, bodyClientWidth, effectiveSlotMinWidth, slotsLength]);
|
|
14885
|
-
const slotMetrics =
|
|
14942
|
+
const slotMetrics = React40.useMemo(() => {
|
|
14886
14943
|
const n = slotsLength;
|
|
14887
14944
|
const widths = new Array(n).fill(fixedSlotWidth);
|
|
14888
14945
|
const isAdaptiveView = activeView === "month" || activeView === "day";
|
|
@@ -15013,7 +15070,7 @@ function useSlotMetrics(args) {
|
|
|
15013
15070
|
}
|
|
15014
15071
|
function useLayoutsByResource(args) {
|
|
15015
15072
|
const { eventsByResource, preview, slotStarts, slotsLength, slotLefts, getResourceRowHeight, laneGap, lanePaddingY, effectiveMaxLanesPerRow, eventHeight } = args;
|
|
15016
|
-
return
|
|
15073
|
+
return React40.useMemo(() => {
|
|
15017
15074
|
const map = /* @__PURE__ */ new Map();
|
|
15018
15075
|
for (const [resourceId, list] of eventsByResource.entries()) {
|
|
15019
15076
|
const mapped = list.map((ev) => {
|
|
@@ -15060,9 +15117,9 @@ function lowerBound2(arr, target) {
|
|
|
15060
15117
|
}
|
|
15061
15118
|
function useVisibleSlotRange(args) {
|
|
15062
15119
|
const { enabled, overscan, scrollRef, slotLefts, slotCount } = args;
|
|
15063
|
-
const [scrollLeft, setScrollLeft] =
|
|
15064
|
-
const [viewportWidth, setViewportWidth] =
|
|
15065
|
-
|
|
15120
|
+
const [scrollLeft, setScrollLeft] = React40.useState(0);
|
|
15121
|
+
const [viewportWidth, setViewportWidth] = React40.useState(0);
|
|
15122
|
+
React40.useEffect(() => {
|
|
15066
15123
|
if (!enabled) return;
|
|
15067
15124
|
const el = scrollRef.current;
|
|
15068
15125
|
if (!el) return;
|
|
@@ -15089,7 +15146,7 @@ function useVisibleSlotRange(args) {
|
|
|
15089
15146
|
el.removeEventListener("scroll", onScroll);
|
|
15090
15147
|
};
|
|
15091
15148
|
}, [enabled, scrollRef]);
|
|
15092
|
-
return
|
|
15149
|
+
return React40.useMemo(() => {
|
|
15093
15150
|
if (!enabled) return { startIdx: 0, endIdx: slotCount };
|
|
15094
15151
|
if (slotCount <= 0) return { startIdx: 0, endIdx: 0 };
|
|
15095
15152
|
if (viewportWidth <= 0) return { startIdx: 0, endIdx: slotCount };
|
|
@@ -15188,14 +15245,14 @@ function CalendarTimeline({
|
|
|
15188
15245
|
}) {
|
|
15189
15246
|
const t = useSmartTranslations("CalendarTimeline");
|
|
15190
15247
|
const detectedLocale = useSmartLocale();
|
|
15191
|
-
const resolvedLocale =
|
|
15192
|
-
const resolvedTimeZone =
|
|
15248
|
+
const resolvedLocale = React41.useMemo(() => localeToBCP47(locale ?? detectedLocale), [locale, detectedLocale]);
|
|
15249
|
+
const resolvedTimeZone = React41.useMemo(() => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC", [timeZone]);
|
|
15193
15250
|
const effectiveEnableEventSheet = enableEventSheet ?? Boolean(renderEventSheet);
|
|
15194
15251
|
const isViewOnly = interactions?.mode === "view";
|
|
15195
15252
|
const isControlledSelectedEventId = selectedEventId !== void 0;
|
|
15196
|
-
const [internalSelectedEventId, setInternalSelectedEventId] =
|
|
15253
|
+
const [internalSelectedEventId, setInternalSelectedEventId] = React41.useState(defaultSelectedEventId ?? null);
|
|
15197
15254
|
const activeSelectedEventId = isControlledSelectedEventId ? selectedEventId : internalSelectedEventId;
|
|
15198
|
-
const setSelectedEventId =
|
|
15255
|
+
const setSelectedEventId = React41.useCallback(
|
|
15199
15256
|
(next) => {
|
|
15200
15257
|
if (!isControlledSelectedEventId) setInternalSelectedEventId(next);
|
|
15201
15258
|
onSelectedEventIdChange?.(next);
|
|
@@ -15203,9 +15260,9 @@ function CalendarTimeline({
|
|
|
15203
15260
|
[isControlledSelectedEventId, onSelectedEventIdChange]
|
|
15204
15261
|
);
|
|
15205
15262
|
const isControlledEventSheetOpen = eventSheetOpen !== void 0;
|
|
15206
|
-
const [internalEventSheetOpen, setInternalEventSheetOpen] =
|
|
15263
|
+
const [internalEventSheetOpen, setInternalEventSheetOpen] = React41.useState(defaultEventSheetOpen ?? false);
|
|
15207
15264
|
const activeEventSheetOpen = isControlledEventSheetOpen ? Boolean(eventSheetOpen) : internalEventSheetOpen;
|
|
15208
|
-
const setEventSheetOpen =
|
|
15265
|
+
const setEventSheetOpen = React41.useCallback(
|
|
15209
15266
|
(next) => {
|
|
15210
15267
|
if (!isControlledEventSheetOpen) setInternalEventSheetOpen(next);
|
|
15211
15268
|
onEventSheetOpenChange?.(next);
|
|
@@ -15214,12 +15271,12 @@ function CalendarTimeline({
|
|
|
15214
15271
|
[isControlledEventSheetOpen, onEventSheetOpenChange, setSelectedEventId]
|
|
15215
15272
|
);
|
|
15216
15273
|
const showResourceColumn = !hideResourceColumn;
|
|
15217
|
-
const sizeConfig =
|
|
15274
|
+
const sizeConfig = React41.useMemo(() => getSizeConfig(size), [size]);
|
|
15218
15275
|
const densityClass = sizeConfig.densityClass;
|
|
15219
15276
|
const eventHeight = sizeConfig.eventHeight;
|
|
15220
15277
|
const laneGap = sizeConfig.laneGap;
|
|
15221
15278
|
const lanePaddingY = sizeConfig.lanePaddingY;
|
|
15222
|
-
const canResizeColumn =
|
|
15279
|
+
const canResizeColumn = React41.useMemo(() => {
|
|
15223
15280
|
const cfg = enableLayoutResize;
|
|
15224
15281
|
if (!cfg) return false;
|
|
15225
15282
|
if (isViewOnly) return false;
|
|
@@ -15227,7 +15284,7 @@ function CalendarTimeline({
|
|
|
15227
15284
|
if (cfg === true) return true;
|
|
15228
15285
|
return cfg.column !== false;
|
|
15229
15286
|
}, [enableLayoutResize, isViewOnly, showResourceColumn]);
|
|
15230
|
-
const canResizeRow =
|
|
15287
|
+
const canResizeRow = React41.useMemo(() => {
|
|
15231
15288
|
const cfg = enableLayoutResize;
|
|
15232
15289
|
if (!cfg) return false;
|
|
15233
15290
|
if (isViewOnly) return false;
|
|
@@ -15236,19 +15293,19 @@ function CalendarTimeline({
|
|
|
15236
15293
|
return cfg.row !== false;
|
|
15237
15294
|
}, [enableLayoutResize, isViewOnly, showResourceColumn]);
|
|
15238
15295
|
const isControlledResourceColumnWidth = resourceColumnWidth !== void 0;
|
|
15239
|
-
const [internalResourceColumnWidth, setInternalResourceColumnWidth] =
|
|
15296
|
+
const [internalResourceColumnWidth, setInternalResourceColumnWidth] = React41.useState(() => {
|
|
15240
15297
|
const init = defaultResourceColumnWidth ?? sizeConfig.resourceColumnWidth;
|
|
15241
15298
|
return typeof init === "number" ? init : sizeConfig.resourceColumnWidth;
|
|
15242
15299
|
});
|
|
15243
|
-
|
|
15300
|
+
React41.useEffect(() => {
|
|
15244
15301
|
if (isControlledResourceColumnWidth) return;
|
|
15245
15302
|
if (defaultResourceColumnWidth == null) return;
|
|
15246
15303
|
setInternalResourceColumnWidth(defaultResourceColumnWidth);
|
|
15247
15304
|
}, [defaultResourceColumnWidth, isControlledResourceColumnWidth]);
|
|
15248
15305
|
const effectiveResourceColumnWidth = showResourceColumn ? isControlledResourceColumnWidth ? resourceColumnWidth : internalResourceColumnWidth : 0;
|
|
15249
15306
|
const isControlledRowHeight = rowHeight !== void 0;
|
|
15250
|
-
const [internalRowHeight, setInternalRowHeight] =
|
|
15251
|
-
|
|
15307
|
+
const [internalRowHeight, setInternalRowHeight] = React41.useState(() => defaultRowHeight ?? sizeConfig.rowHeight);
|
|
15308
|
+
React41.useEffect(() => {
|
|
15252
15309
|
if (isControlledRowHeight) return;
|
|
15253
15310
|
if (defaultRowHeight == null) return;
|
|
15254
15311
|
setInternalRowHeight(defaultRowHeight);
|
|
@@ -15259,14 +15316,14 @@ function CalendarTimeline({
|
|
|
15259
15316
|
const colMax = maxResourceColumnWidth ?? 520;
|
|
15260
15317
|
const rowMin = minRowHeight ?? 36;
|
|
15261
15318
|
const rowMax = maxRowHeight ?? 120;
|
|
15262
|
-
const viewList =
|
|
15263
|
-
const availableViews =
|
|
15319
|
+
const viewList = React41.useMemo(() => Array.isArray(view) ? view : void 0, [view]);
|
|
15320
|
+
const availableViews = React41.useMemo(() => {
|
|
15264
15321
|
if (onlyView) return [onlyView];
|
|
15265
15322
|
if (viewList?.length) return viewList;
|
|
15266
15323
|
return ["month", "week", "day", "sprint"];
|
|
15267
15324
|
}, [onlyView, viewList]);
|
|
15268
15325
|
const isControlledView = view !== void 0 && !Array.isArray(view);
|
|
15269
|
-
const [internalView, setInternalView] =
|
|
15326
|
+
const [internalView, setInternalView] = React41.useState(() => {
|
|
15270
15327
|
if (onlyView) return onlyView;
|
|
15271
15328
|
if (viewList?.length) {
|
|
15272
15329
|
if (defaultView && viewList.includes(defaultView)) return defaultView;
|
|
@@ -15275,13 +15332,13 @@ function CalendarTimeline({
|
|
|
15275
15332
|
return defaultView ?? "month";
|
|
15276
15333
|
});
|
|
15277
15334
|
const activeView = onlyView ? onlyView : isControlledView ? view : internalView;
|
|
15278
|
-
|
|
15335
|
+
React41.useEffect(() => {
|
|
15279
15336
|
if (onlyView || isControlledView) return;
|
|
15280
15337
|
if (!availableViews.includes(internalView)) {
|
|
15281
15338
|
setInternalView(availableViews[0] ?? "month");
|
|
15282
15339
|
}
|
|
15283
15340
|
}, [availableViews, internalView, isControlledView, onlyView]);
|
|
15284
|
-
const effectiveSlotMinWidth =
|
|
15341
|
+
const effectiveSlotMinWidth = React41.useMemo(() => {
|
|
15285
15342
|
if (slotMinWidth == null) {
|
|
15286
15343
|
if (activeView === "month" && monthEventStyle === "compact") {
|
|
15287
15344
|
return clamp5(Math.round(sizeConfig.slotMinWidth * 0.55), 32, sizeConfig.slotMinWidth);
|
|
@@ -15293,17 +15350,17 @@ function CalendarTimeline({
|
|
|
15293
15350
|
return baseSlotMinWidth;
|
|
15294
15351
|
}, [activeView, baseSlotMinWidth, monthEventStyle, sizeConfig.slotMinWidth, slotMinWidth]);
|
|
15295
15352
|
const isControlledDate = date !== void 0;
|
|
15296
|
-
const [internalDate, setInternalDate] =
|
|
15353
|
+
const [internalDate, setInternalDate] = React41.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
|
|
15297
15354
|
const activeDate = isControlledDate ? date : internalDate;
|
|
15298
|
-
const resolvedNow =
|
|
15299
|
-
const formatToken =
|
|
15355
|
+
const resolvedNow = React41.useMemo(() => now ?? /* @__PURE__ */ new Date(), [now]);
|
|
15356
|
+
const formatToken = React41.useCallback((key, params) => {
|
|
15300
15357
|
let message = t(key);
|
|
15301
15358
|
for (const [name, value] of Object.entries(params)) {
|
|
15302
15359
|
message = message.replaceAll(`{${name}}`, String(value));
|
|
15303
15360
|
}
|
|
15304
15361
|
return message;
|
|
15305
15362
|
}, [t]);
|
|
15306
|
-
const l =
|
|
15363
|
+
const l = React41.useMemo(
|
|
15307
15364
|
() => ({
|
|
15308
15365
|
today: labels?.today ?? t("today"),
|
|
15309
15366
|
prev: labels?.prev ?? t("prev"),
|
|
@@ -15326,7 +15383,7 @@ function CalendarTimeline({
|
|
|
15326
15383
|
}),
|
|
15327
15384
|
[formatToken, labels, t]
|
|
15328
15385
|
);
|
|
15329
|
-
const setView =
|
|
15386
|
+
const setView = React41.useCallback(
|
|
15330
15387
|
(next) => {
|
|
15331
15388
|
if (onlyView) return;
|
|
15332
15389
|
if (!availableViews.includes(next)) return;
|
|
@@ -15335,14 +15392,14 @@ function CalendarTimeline({
|
|
|
15335
15392
|
},
|
|
15336
15393
|
[availableViews, isControlledView, onViewChange, onlyView]
|
|
15337
15394
|
);
|
|
15338
|
-
const setDate =
|
|
15395
|
+
const setDate = React41.useCallback(
|
|
15339
15396
|
(next) => {
|
|
15340
15397
|
if (!isControlledDate) setInternalDate(next);
|
|
15341
15398
|
onDateChange?.(next);
|
|
15342
15399
|
},
|
|
15343
15400
|
[isControlledDate, onDateChange]
|
|
15344
15401
|
);
|
|
15345
|
-
const navigate =
|
|
15402
|
+
const navigate = React41.useCallback(
|
|
15346
15403
|
(dir) => {
|
|
15347
15404
|
const base2 = activeDate;
|
|
15348
15405
|
if (activeView === "month") {
|
|
@@ -15361,17 +15418,17 @@ function CalendarTimeline({
|
|
|
15361
15418
|
},
|
|
15362
15419
|
[activeDate, activeView, resolvedTimeZone, setDate]
|
|
15363
15420
|
);
|
|
15364
|
-
const [internalCollapsed, setInternalCollapsed] =
|
|
15421
|
+
const [internalCollapsed, setInternalCollapsed] = React41.useState(() => defaultGroupCollapsed ?? {});
|
|
15365
15422
|
const collapsed = groupCollapsed ?? internalCollapsed;
|
|
15366
|
-
const setCollapsed =
|
|
15423
|
+
const setCollapsed = React41.useCallback(
|
|
15367
15424
|
(next) => {
|
|
15368
15425
|
if (!groupCollapsed) setInternalCollapsed(next);
|
|
15369
15426
|
onGroupCollapsedChange?.(next);
|
|
15370
15427
|
},
|
|
15371
15428
|
[groupCollapsed, onGroupCollapsedChange]
|
|
15372
15429
|
);
|
|
15373
|
-
const rows =
|
|
15374
|
-
const groupResourceCounts =
|
|
15430
|
+
const rows = React41.useMemo(() => buildRows({ resources, groups, collapsed }), [resources, groups, collapsed]);
|
|
15431
|
+
const groupResourceCounts = React41.useMemo(() => getGroupResourceCounts(resources), [resources]);
|
|
15375
15432
|
const { slots, range, slotStarts, todaySlotIdx, weekendSlotIdxs } = useTimelineSlots({
|
|
15376
15433
|
activeView,
|
|
15377
15434
|
activeDate,
|
|
@@ -15385,12 +15442,12 @@ function CalendarTimeline({
|
|
|
15385
15442
|
formatters,
|
|
15386
15443
|
dueDateSprint
|
|
15387
15444
|
});
|
|
15388
|
-
|
|
15445
|
+
React41.useEffect(() => {
|
|
15389
15446
|
onRangeChange?.(range);
|
|
15390
15447
|
}, [range, onRangeChange]);
|
|
15391
|
-
const leftRef =
|
|
15392
|
-
const bodyRef =
|
|
15393
|
-
const headerRef =
|
|
15448
|
+
const leftRef = React41.useRef(null);
|
|
15449
|
+
const bodyRef = React41.useRef(null);
|
|
15450
|
+
const headerRef = React41.useRef(null);
|
|
15394
15451
|
const bodyClientWidth = useClientWidth(bodyRef);
|
|
15395
15452
|
const { normalizedEvents, eventsByResource, resourceById } = useNormalizedEvents({
|
|
15396
15453
|
events,
|
|
@@ -15422,16 +15479,16 @@ function CalendarTimeline({
|
|
|
15422
15479
|
slotLefts,
|
|
15423
15480
|
slotCount: slots.length
|
|
15424
15481
|
});
|
|
15425
|
-
const selectedEvent =
|
|
15482
|
+
const selectedEvent = React41.useMemo(() => {
|
|
15426
15483
|
if (!activeSelectedEventId) return null;
|
|
15427
15484
|
const found2 = normalizedEvents.find((e) => e.id === activeSelectedEventId);
|
|
15428
15485
|
return found2 ?? null;
|
|
15429
15486
|
}, [activeSelectedEventId, normalizedEvents]);
|
|
15430
|
-
const selectedResource =
|
|
15487
|
+
const selectedResource = React41.useMemo(() => {
|
|
15431
15488
|
if (!selectedEvent) return void 0;
|
|
15432
15489
|
return resourceById.get(selectedEvent.resourceId);
|
|
15433
15490
|
}, [resourceById, selectedEvent]);
|
|
15434
|
-
const selectedTimeText =
|
|
15491
|
+
const selectedTimeText = React41.useMemo(() => {
|
|
15435
15492
|
if (!selectedEvent) return "";
|
|
15436
15493
|
return formatters?.eventTime?.({
|
|
15437
15494
|
start: selectedEvent._start,
|
|
@@ -15441,7 +15498,7 @@ function CalendarTimeline({
|
|
|
15441
15498
|
view: activeView
|
|
15442
15499
|
}) ?? defaultEventTime({ start: selectedEvent._start, end: selectedEvent._end, locale: resolvedLocale, timeZone: resolvedTimeZone, view: activeView });
|
|
15443
15500
|
}, [activeView, formatters, resolvedLocale, resolvedTimeZone, selectedEvent]);
|
|
15444
|
-
|
|
15501
|
+
React41.useEffect(() => {
|
|
15445
15502
|
if (!effectiveEnableEventSheet) return;
|
|
15446
15503
|
if (activeEventSheetOpen && activeSelectedEventId && !selectedEvent) {
|
|
15447
15504
|
setEventSheetOpen(false);
|
|
@@ -15451,24 +15508,24 @@ function CalendarTimeline({
|
|
|
15451
15508
|
const virt = virtualization == null ? rows.length > 60 : Boolean(virtualization.enabled);
|
|
15452
15509
|
const overscan = virtualization?.overscan ?? 8;
|
|
15453
15510
|
const isControlledRowHeights = rowHeights !== void 0;
|
|
15454
|
-
const [internalRowHeights, setInternalRowHeights] =
|
|
15455
|
-
|
|
15511
|
+
const [internalRowHeights, setInternalRowHeights] = React41.useState(() => defaultRowHeights ?? {});
|
|
15512
|
+
React41.useEffect(() => {
|
|
15456
15513
|
if (isControlledRowHeights) return;
|
|
15457
15514
|
if (!defaultRowHeights) return;
|
|
15458
15515
|
setInternalRowHeights(defaultRowHeights);
|
|
15459
15516
|
}, [defaultRowHeights, isControlledRowHeights]);
|
|
15460
15517
|
const activeRowHeights = isControlledRowHeights ? rowHeights : internalRowHeights;
|
|
15461
|
-
const autoRowHeightCfg =
|
|
15518
|
+
const autoRowHeightCfg = React41.useMemo(() => {
|
|
15462
15519
|
if (!autoRowHeight) return null;
|
|
15463
15520
|
return autoRowHeight === true ? {} : autoRowHeight;
|
|
15464
15521
|
}, [autoRowHeight]);
|
|
15465
|
-
const effectiveMaxLanesPerRow =
|
|
15522
|
+
const effectiveMaxLanesPerRow = React41.useMemo(() => {
|
|
15466
15523
|
if (!autoRowHeightCfg) return maxLanesPerRow;
|
|
15467
15524
|
const maxLanes = autoRowHeightCfg.maxLanesPerRow;
|
|
15468
15525
|
if (typeof maxLanes === "number" && Number.isFinite(maxLanes) && maxLanes > 0) return Math.floor(maxLanes);
|
|
15469
15526
|
return Number.POSITIVE_INFINITY;
|
|
15470
15527
|
}, [autoRowHeightCfg, maxLanesPerRow]);
|
|
15471
|
-
const autoRowHeightsByResource =
|
|
15528
|
+
const autoRowHeightsByResource = React41.useMemo(() => {
|
|
15472
15529
|
if (!autoRowHeightCfg) return null;
|
|
15473
15530
|
const maxRowHeight2 = autoRowHeightCfg.maxRowHeight;
|
|
15474
15531
|
const out = /* @__PURE__ */ new Map();
|
|
@@ -15486,7 +15543,7 @@ function CalendarTimeline({
|
|
|
15486
15543
|
}
|
|
15487
15544
|
return out;
|
|
15488
15545
|
}, [autoRowHeightCfg, eventHeight, eventsByResource, laneGap, lanePaddingY, slotStarts, slots.length, effectiveMaxLanesPerRow]);
|
|
15489
|
-
const getResourceRowHeight =
|
|
15546
|
+
const getResourceRowHeight = React41.useCallback(
|
|
15490
15547
|
(resourceId) => {
|
|
15491
15548
|
const h = activeRowHeights[resourceId];
|
|
15492
15549
|
const base2 = typeof h === "number" && Number.isFinite(h) && h > 0 ? h : effectiveRowHeight;
|
|
@@ -15496,7 +15553,7 @@ function CalendarTimeline({
|
|
|
15496
15553
|
},
|
|
15497
15554
|
[activeRowHeights, autoRowHeightsByResource, effectiveRowHeight]
|
|
15498
15555
|
);
|
|
15499
|
-
const setRowHeightForResource =
|
|
15556
|
+
const setRowHeightForResource = React41.useCallback(
|
|
15500
15557
|
(resourceId, height) => {
|
|
15501
15558
|
const clamped = clamp5(Math.round(height), rowMin, rowMax);
|
|
15502
15559
|
onRowHeightChange?.(clamped);
|
|
@@ -15513,7 +15570,7 @@ function CalendarTimeline({
|
|
|
15513
15570
|
},
|
|
15514
15571
|
[activeRowHeights, isControlledRowHeights, onRowHeightChange, onRowHeightsChange, rowMax, rowMin]
|
|
15515
15572
|
);
|
|
15516
|
-
const rowHeightsArray =
|
|
15573
|
+
const rowHeightsArray = React41.useMemo(() => {
|
|
15517
15574
|
return rows.map((r) => {
|
|
15518
15575
|
if (r.kind === "resource") return getResourceRowHeight(r.resource.id);
|
|
15519
15576
|
return sizeConfig.groupRowHeight;
|
|
@@ -15529,13 +15586,13 @@ function CalendarTimeline({
|
|
|
15529
15586
|
const endRow = virt ? virtualResult.endIndex : rows.length;
|
|
15530
15587
|
const topSpacer = virt ? virtualResult.topSpacer : 0;
|
|
15531
15588
|
const bottomSpacer = virt ? virtualResult.bottomSpacer : 0;
|
|
15532
|
-
const renderedRowsHeight =
|
|
15589
|
+
const renderedRowsHeight = React41.useMemo(() => {
|
|
15533
15590
|
let h = 0;
|
|
15534
15591
|
for (let i = startRow; i < endRow; i++) h += rowHeightsArray[i] ?? effectiveRowHeight;
|
|
15535
15592
|
return h;
|
|
15536
15593
|
}, [effectiveRowHeight, endRow, rowHeightsArray, startRow]);
|
|
15537
|
-
const resizeRef =
|
|
15538
|
-
const setResourceColumnWidth =
|
|
15594
|
+
const resizeRef = React41.useRef(null);
|
|
15595
|
+
const setResourceColumnWidth = React41.useCallback(
|
|
15539
15596
|
(next) => {
|
|
15540
15597
|
const clamped = clamp5(Math.round(next), colMin, colMax);
|
|
15541
15598
|
if (!isControlledResourceColumnWidth) setInternalResourceColumnWidth(clamped);
|
|
@@ -15543,7 +15600,7 @@ function CalendarTimeline({
|
|
|
15543
15600
|
},
|
|
15544
15601
|
[colMax, colMin, isControlledResourceColumnWidth, onResourceColumnWidthChange]
|
|
15545
15602
|
);
|
|
15546
|
-
const startResize =
|
|
15603
|
+
const startResize = React41.useCallback(
|
|
15547
15604
|
(mode, e, args) => {
|
|
15548
15605
|
if (e.button !== 0 || e.ctrlKey) return;
|
|
15549
15606
|
resizeRef.current = {
|
|
@@ -15586,7 +15643,7 @@ function CalendarTimeline({
|
|
|
15586
15643
|
},
|
|
15587
15644
|
[setResourceColumnWidth, setRowHeightForResource]
|
|
15588
15645
|
);
|
|
15589
|
-
|
|
15646
|
+
React41.useEffect(() => {
|
|
15590
15647
|
return () => {
|
|
15591
15648
|
if (!resizeRef.current) return;
|
|
15592
15649
|
resizeRef.current = null;
|
|
@@ -15594,7 +15651,7 @@ function CalendarTimeline({
|
|
|
15594
15651
|
document.body.style.userSelect = "";
|
|
15595
15652
|
};
|
|
15596
15653
|
}, []);
|
|
15597
|
-
const beginResizeColumn =
|
|
15654
|
+
const beginResizeColumn = React41.useCallback(
|
|
15598
15655
|
(e) => {
|
|
15599
15656
|
if (!canResizeColumn) return;
|
|
15600
15657
|
if (typeof effectiveResourceColumnWidth !== "number") return;
|
|
@@ -15602,7 +15659,7 @@ function CalendarTimeline({
|
|
|
15602
15659
|
},
|
|
15603
15660
|
[canResizeColumn, effectiveResourceColumnWidth, effectiveRowHeight, startResize]
|
|
15604
15661
|
);
|
|
15605
|
-
const beginResizeResourceRow =
|
|
15662
|
+
const beginResizeResourceRow = React41.useCallback(
|
|
15606
15663
|
(resourceId) => (e) => {
|
|
15607
15664
|
if (!canResizeRow) return;
|
|
15608
15665
|
startResize("row", e, {
|
|
@@ -15613,7 +15670,7 @@ function CalendarTimeline({
|
|
|
15613
15670
|
},
|
|
15614
15671
|
[canResizeRow, effectiveResourceColumnWidth, getResourceRowHeight, startResize]
|
|
15615
15672
|
);
|
|
15616
|
-
const title =
|
|
15673
|
+
const title = React41.useMemo(() => {
|
|
15617
15674
|
if (activeView === "month") {
|
|
15618
15675
|
return formatters?.monthTitle?.(activeDate, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultMonthTitle(activeDate, resolvedLocale, resolvedTimeZone);
|
|
15619
15676
|
}
|
|
@@ -15640,11 +15697,11 @@ function CalendarTimeline({
|
|
|
15640
15697
|
}, [activeDate, activeView, formatToken, formatters, l.sprint, l.week, range.end, range.start, resolvedLocale, resolvedTimeZone, slots.length]);
|
|
15641
15698
|
const createMode = interactions?.createMode ?? "drag";
|
|
15642
15699
|
const canCreate = !isViewOnly && (interactions?.creatable ?? false) && !!onCreateEvent;
|
|
15643
|
-
const [createOpen, setCreateOpen] =
|
|
15644
|
-
const [createResourceId, setCreateResourceId] =
|
|
15645
|
-
const [createStartIdx, setCreateStartIdx] =
|
|
15646
|
-
const [createEndIdx, setCreateEndIdx] =
|
|
15647
|
-
const resourceOptions =
|
|
15700
|
+
const [createOpen, setCreateOpen] = React41.useState(false);
|
|
15701
|
+
const [createResourceId, setCreateResourceId] = React41.useState(null);
|
|
15702
|
+
const [createStartIdx, setCreateStartIdx] = React41.useState(0);
|
|
15703
|
+
const [createEndIdx, setCreateEndIdx] = React41.useState(1);
|
|
15704
|
+
const resourceOptions = React41.useMemo(() => {
|
|
15648
15705
|
return resources.map((r) => ({
|
|
15649
15706
|
label: typeof r.label === "string" ? r.label : r.id,
|
|
15650
15707
|
value: r.id,
|
|
@@ -15652,7 +15709,7 @@ function CalendarTimeline({
|
|
|
15652
15709
|
disabled: r.disabled ?? false
|
|
15653
15710
|
}));
|
|
15654
15711
|
}, [resources]);
|
|
15655
|
-
const formatCreateBoundaryLabel =
|
|
15712
|
+
const formatCreateBoundaryLabel = React41.useMemo(() => {
|
|
15656
15713
|
const timeFmt = getDtf(resolvedLocale, resolvedTimeZone, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
|
|
15657
15714
|
const dayFmt = getDtf(resolvedLocale, resolvedTimeZone, { weekday: "short", month: "short", day: "numeric" });
|
|
15658
15715
|
const yearFmt = getDtf(resolvedLocale, resolvedTimeZone, { year: "numeric" });
|
|
@@ -15700,7 +15757,7 @@ function CalendarTimeline({
|
|
|
15700
15757
|
return dayFmt.format(d);
|
|
15701
15758
|
};
|
|
15702
15759
|
}, [activeView, dueDateSprint, l.sprint, resolvedLocale, resolvedTimeZone, slotStarts]);
|
|
15703
|
-
const openCreate =
|
|
15760
|
+
const openCreate = React41.useCallback(() => {
|
|
15704
15761
|
if (!canCreate) return;
|
|
15705
15762
|
if (activeEventSheetOpen) setEventSheetOpen(false);
|
|
15706
15763
|
const firstResource = resources.find((r) => !r.disabled)?.id ?? resources[0]?.id ?? null;
|
|
@@ -15732,13 +15789,13 @@ function CalendarTimeline({
|
|
|
15732
15789
|
slotStarts,
|
|
15733
15790
|
slots.length
|
|
15734
15791
|
]);
|
|
15735
|
-
|
|
15792
|
+
React41.useEffect(() => {
|
|
15736
15793
|
setCreateEndIdx((prev) => Math.min(slots.length, Math.max(prev, createStartIdx + 1)));
|
|
15737
15794
|
}, [createStartIdx, slots.length]);
|
|
15738
|
-
const createStartOptions =
|
|
15795
|
+
const createStartOptions = React41.useMemo(() => {
|
|
15739
15796
|
return slotStarts.map((d, idx) => ({ label: formatCreateBoundaryLabel(d, { kind: "start", boundaryIdx: idx }), value: idx }));
|
|
15740
15797
|
}, [formatCreateBoundaryLabel, slotStarts]);
|
|
15741
|
-
const createEndOptions =
|
|
15798
|
+
const createEndOptions = React41.useMemo(() => {
|
|
15742
15799
|
const out = [];
|
|
15743
15800
|
for (let idx = createStartIdx + 1; idx <= slotStarts.length; idx++) {
|
|
15744
15801
|
const boundary = idx >= slotStarts.length ? range.end : slotStarts[idx];
|
|
@@ -15746,7 +15803,7 @@ function CalendarTimeline({
|
|
|
15746
15803
|
}
|
|
15747
15804
|
return out;
|
|
15748
15805
|
}, [createStartIdx, formatCreateBoundaryLabel, range.end, slotStarts]);
|
|
15749
|
-
const commitCreate =
|
|
15806
|
+
const commitCreate = React41.useCallback(() => {
|
|
15750
15807
|
if (!onCreateEvent) return;
|
|
15751
15808
|
if (!createResourceId) return;
|
|
15752
15809
|
const start = slotStarts[clamp5(createStartIdx, 0, Math.max(0, slotStarts.length - 1))];
|
|
@@ -15757,38 +15814,38 @@ function CalendarTimeline({
|
|
|
15757
15814
|
onCreateEvent({ resourceId: createResourceId, start, end: endBoundary });
|
|
15758
15815
|
setCreateOpen(false);
|
|
15759
15816
|
}, [createEndIdx, createResourceId, createStartIdx, onCreateEvent, range.end, slotStarts]);
|
|
15760
|
-
const dragRef =
|
|
15761
|
-
const [preview, setPreviewState] =
|
|
15762
|
-
const previewRef =
|
|
15763
|
-
const setPreview =
|
|
15817
|
+
const dragRef = React41.useRef(null);
|
|
15818
|
+
const [preview, setPreviewState] = React41.useState(null);
|
|
15819
|
+
const previewRef = React41.useRef(null);
|
|
15820
|
+
const setPreview = React41.useCallback((next) => {
|
|
15764
15821
|
previewRef.current = next;
|
|
15765
15822
|
setPreviewState(next);
|
|
15766
15823
|
}, []);
|
|
15767
|
-
const suppressNextEventClickRef =
|
|
15768
|
-
const [hoverCell, setHoverCellState] =
|
|
15769
|
-
const hoverCellRef =
|
|
15770
|
-
const setHoverCell =
|
|
15824
|
+
const suppressNextEventClickRef = React41.useRef(false);
|
|
15825
|
+
const [hoverCell, setHoverCellState] = React41.useState(null);
|
|
15826
|
+
const hoverCellRef = React41.useRef(null);
|
|
15827
|
+
const setHoverCell = React41.useCallback((next) => {
|
|
15771
15828
|
hoverCellRef.current = next;
|
|
15772
15829
|
setHoverCellState(next);
|
|
15773
15830
|
}, []);
|
|
15774
|
-
const autoScrollStateRef =
|
|
15831
|
+
const autoScrollStateRef = React41.useRef({
|
|
15775
15832
|
dir: 0,
|
|
15776
15833
|
speed: 0,
|
|
15777
15834
|
lastClientX: 0,
|
|
15778
15835
|
lastClientY: 0
|
|
15779
15836
|
});
|
|
15780
|
-
const autoScrollRafRef =
|
|
15781
|
-
const dragPreviewRafRef =
|
|
15782
|
-
const dragPreviewPointRef =
|
|
15783
|
-
const hoverCellRafRef =
|
|
15784
|
-
const hoverCellPendingRef =
|
|
15785
|
-
const stopAutoScroll =
|
|
15837
|
+
const autoScrollRafRef = React41.useRef(null);
|
|
15838
|
+
const dragPreviewRafRef = React41.useRef(null);
|
|
15839
|
+
const dragPreviewPointRef = React41.useRef(null);
|
|
15840
|
+
const hoverCellRafRef = React41.useRef(null);
|
|
15841
|
+
const hoverCellPendingRef = React41.useRef(null);
|
|
15842
|
+
const stopAutoScroll = React41.useCallback(() => {
|
|
15786
15843
|
if (autoScrollRafRef.current != null) cancelAnimationFrame(autoScrollRafRef.current);
|
|
15787
15844
|
autoScrollRafRef.current = null;
|
|
15788
15845
|
autoScrollStateRef.current.dir = 0;
|
|
15789
15846
|
autoScrollStateRef.current.speed = 0;
|
|
15790
15847
|
}, []);
|
|
15791
|
-
const getPointerContext =
|
|
15848
|
+
const getPointerContext = React41.useCallback(
|
|
15792
15849
|
(clientX, clientY, opts) => {
|
|
15793
15850
|
const body = bodyRef.current;
|
|
15794
15851
|
if (!body) return null;
|
|
@@ -15806,7 +15863,7 @@ function CalendarTimeline({
|
|
|
15806
15863
|
},
|
|
15807
15864
|
[xToSlotIdx]
|
|
15808
15865
|
);
|
|
15809
|
-
const slotToDate =
|
|
15866
|
+
const slotToDate = React41.useCallback(
|
|
15810
15867
|
(slotIdx) => {
|
|
15811
15868
|
const start = slotStarts[clamp5(slotIdx, 0, slotStarts.length - 1)];
|
|
15812
15869
|
if (activeView === "day") {
|
|
@@ -15820,7 +15877,7 @@ function CalendarTimeline({
|
|
|
15820
15877
|
},
|
|
15821
15878
|
[activeView, dayTimeStepMinutes, resolvedTimeZone, slotStarts]
|
|
15822
15879
|
);
|
|
15823
|
-
const updateDragPreview =
|
|
15880
|
+
const updateDragPreview = React41.useCallback(
|
|
15824
15881
|
(clientX, clientY) => {
|
|
15825
15882
|
const drag = dragRef.current;
|
|
15826
15883
|
if (!drag) return;
|
|
@@ -15864,13 +15921,13 @@ function CalendarTimeline({
|
|
|
15864
15921
|
},
|
|
15865
15922
|
[getPointerContext, range.end, range.start, setPreview, slotToDate, slots.length]
|
|
15866
15923
|
);
|
|
15867
|
-
const flushDragPreview =
|
|
15924
|
+
const flushDragPreview = React41.useCallback(() => {
|
|
15868
15925
|
dragPreviewRafRef.current = null;
|
|
15869
15926
|
const point = dragPreviewPointRef.current;
|
|
15870
15927
|
if (!point) return;
|
|
15871
15928
|
updateDragPreview(point.x, point.y);
|
|
15872
15929
|
}, [updateDragPreview]);
|
|
15873
|
-
const scheduleDragPreview =
|
|
15930
|
+
const scheduleDragPreview = React41.useCallback(
|
|
15874
15931
|
(clientX, clientY) => {
|
|
15875
15932
|
dragPreviewPointRef.current = { x: clientX, y: clientY };
|
|
15876
15933
|
if (dragPreviewRafRef.current != null) return;
|
|
@@ -15878,7 +15935,7 @@ function CalendarTimeline({
|
|
|
15878
15935
|
},
|
|
15879
15936
|
[flushDragPreview]
|
|
15880
15937
|
);
|
|
15881
|
-
const applyHoverCell =
|
|
15938
|
+
const applyHoverCell = React41.useCallback(
|
|
15882
15939
|
(next) => {
|
|
15883
15940
|
const prev = hoverCellRef.current;
|
|
15884
15941
|
const same = prev == null && next == null || prev != null && next != null && prev.resourceId === next.resourceId && prev.slotIdx === next.slotIdx && Math.abs(prev.y - next.y) <= 0.5;
|
|
@@ -15887,11 +15944,11 @@ function CalendarTimeline({
|
|
|
15887
15944
|
},
|
|
15888
15945
|
[setHoverCell]
|
|
15889
15946
|
);
|
|
15890
|
-
const flushHoverCell =
|
|
15947
|
+
const flushHoverCell = React41.useCallback(() => {
|
|
15891
15948
|
hoverCellRafRef.current = null;
|
|
15892
15949
|
applyHoverCell(hoverCellPendingRef.current);
|
|
15893
15950
|
}, [applyHoverCell]);
|
|
15894
|
-
const scheduleHoverCell =
|
|
15951
|
+
const scheduleHoverCell = React41.useCallback(
|
|
15895
15952
|
(next) => {
|
|
15896
15953
|
hoverCellPendingRef.current = next;
|
|
15897
15954
|
if (hoverCellRafRef.current != null) return;
|
|
@@ -15899,7 +15956,7 @@ function CalendarTimeline({
|
|
|
15899
15956
|
},
|
|
15900
15957
|
[flushHoverCell]
|
|
15901
15958
|
);
|
|
15902
|
-
const autoScrollTick =
|
|
15959
|
+
const autoScrollTick = React41.useCallback(() => {
|
|
15903
15960
|
const drag = dragRef.current;
|
|
15904
15961
|
const body = bodyRef.current;
|
|
15905
15962
|
const st = autoScrollStateRef.current;
|
|
@@ -15918,7 +15975,7 @@ function CalendarTimeline({
|
|
|
15918
15975
|
updateDragPreview(st.lastClientX, st.lastClientY);
|
|
15919
15976
|
autoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
|
|
15920
15977
|
}, [stopAutoScroll, updateDragPreview]);
|
|
15921
|
-
const updateAutoScrollFromPointer =
|
|
15978
|
+
const updateAutoScrollFromPointer = React41.useCallback(
|
|
15922
15979
|
(clientX, clientY) => {
|
|
15923
15980
|
const body = bodyRef.current;
|
|
15924
15981
|
if (!body) return;
|
|
@@ -15949,8 +16006,8 @@ function CalendarTimeline({
|
|
|
15949
16006
|
},
|
|
15950
16007
|
[autoScrollTick, stopAutoScroll]
|
|
15951
16008
|
);
|
|
15952
|
-
|
|
15953
|
-
|
|
16009
|
+
React41.useEffect(() => stopAutoScroll, [stopAutoScroll]);
|
|
16010
|
+
React41.useEffect(() => {
|
|
15954
16011
|
return () => {
|
|
15955
16012
|
if (dragPreviewRafRef.current != null) cancelAnimationFrame(dragPreviewRafRef.current);
|
|
15956
16013
|
if (hoverCellRafRef.current != null) cancelAnimationFrame(hoverCellRafRef.current);
|
|
@@ -16097,7 +16154,7 @@ function CalendarTimeline({
|
|
|
16097
16154
|
}
|
|
16098
16155
|
setPreview(null);
|
|
16099
16156
|
};
|
|
16100
|
-
const onBodyPointerLeave =
|
|
16157
|
+
const onBodyPointerLeave = React41.useCallback(() => {
|
|
16101
16158
|
hoverCellPendingRef.current = null;
|
|
16102
16159
|
if (hoverCellRafRef.current != null) {
|
|
16103
16160
|
cancelAnimationFrame(hoverCellRafRef.current);
|
|
@@ -16124,7 +16181,7 @@ function CalendarTimeline({
|
|
|
16124
16181
|
}
|
|
16125
16182
|
);
|
|
16126
16183
|
};
|
|
16127
|
-
const slotHeaderNodes =
|
|
16184
|
+
const slotHeaderNodes = React41.useMemo(() => {
|
|
16128
16185
|
const startIdx = colVirtEnabled ? visibleSlots.startIdx : 0;
|
|
16129
16186
|
const endIdx = colVirtEnabled ? visibleSlots.endIdx : slots.length;
|
|
16130
16187
|
const leftSpacer = startIdx > 0 ? slotLefts[startIdx] ?? 0 : 0;
|
|
@@ -16450,7 +16507,7 @@ function CalendarTimeline({
|
|
|
16450
16507
|
]
|
|
16451
16508
|
}
|
|
16452
16509
|
);
|
|
16453
|
-
if (!enableEventTooltips) return /* @__PURE__ */ jsx45(
|
|
16510
|
+
if (!enableEventTooltips) return /* @__PURE__ */ jsx45(React41.Fragment, { children: block }, ev.id);
|
|
16454
16511
|
const tooltipContent = /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-0.5", children: [
|
|
16455
16512
|
/* @__PURE__ */ jsx45("div", { className: "font-semibold", children: tooltipTitle }),
|
|
16456
16513
|
/* @__PURE__ */ jsx45("div", { className: "text-xs opacity-80", children: timeText }),
|
|
@@ -16607,7 +16664,7 @@ function CalendarTimeline({
|
|
|
16607
16664
|
}
|
|
16608
16665
|
|
|
16609
16666
|
// src/components/MultiCombobox.tsx
|
|
16610
|
-
import * as
|
|
16667
|
+
import * as React42 from "react";
|
|
16611
16668
|
import { useId as useId9 } from "react";
|
|
16612
16669
|
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
16613
16670
|
import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader23, X as X13, Sparkles as Sparkles2 } from "lucide-react";
|
|
@@ -16675,17 +16732,17 @@ var MultiCombobox = ({
|
|
|
16675
16732
|
const searchPlaceholder = searchPlaceholderProp ?? gi18n.searchPlaceholder ?? "Search...";
|
|
16676
16733
|
const loadingText = loadingTextProp ?? gi18n.loading ?? "Loading...";
|
|
16677
16734
|
const emptyText = emptyTextProp ?? gi18n.noResults ?? "No results found";
|
|
16678
|
-
const [query, setQuery] =
|
|
16679
|
-
const [open, setOpen] =
|
|
16680
|
-
const [activeIndex, setActiveIndex] =
|
|
16681
|
-
const [localRequiredError, setLocalRequiredError] =
|
|
16682
|
-
const inputRef =
|
|
16683
|
-
const listRef =
|
|
16684
|
-
const optionsListRef =
|
|
16735
|
+
const [query, setQuery] = React42.useState("");
|
|
16736
|
+
const [open, setOpen] = React42.useState(false);
|
|
16737
|
+
const [activeIndex, setActiveIndex] = React42.useState(null);
|
|
16738
|
+
const [localRequiredError, setLocalRequiredError] = React42.useState();
|
|
16739
|
+
const inputRef = React42.useRef(null);
|
|
16740
|
+
const listRef = React42.useRef([]);
|
|
16741
|
+
const optionsListRef = React42.useRef(null);
|
|
16685
16742
|
useOverlayScrollbarTarget(optionsListRef, { enabled: open && useOverlayScrollbar && !virtualized });
|
|
16686
|
-
const triggerRef =
|
|
16743
|
+
const triggerRef = React42.useRef(null);
|
|
16687
16744
|
useShadCNAnimations();
|
|
16688
|
-
const normalizedOptions =
|
|
16745
|
+
const normalizedOptions = React42.useMemo(
|
|
16689
16746
|
() => options.map(
|
|
16690
16747
|
(o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label, icon: o.icon, description: o.description, disabled: o.disabled, group: o.group }
|
|
16691
16748
|
),
|
|
@@ -16695,7 +16752,7 @@ var MultiCombobox = ({
|
|
|
16695
16752
|
const trimmedQuery = query.trim();
|
|
16696
16753
|
const queryMeetsMinimum = trimmedQuery.length >= minSearchLength;
|
|
16697
16754
|
const shouldPromptForSearch = minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
|
|
16698
|
-
const filtered =
|
|
16755
|
+
const filtered = React42.useMemo(() => {
|
|
16699
16756
|
if (shouldPromptForSearch) return [];
|
|
16700
16757
|
if (!enableSearch || searchMode === "manual") return normalizedOptions;
|
|
16701
16758
|
const normalizedQuery = trimmedQuery.toLowerCase();
|
|
@@ -16704,7 +16761,7 @@ var MultiCombobox = ({
|
|
|
16704
16761
|
(opt) => opt.label.toLowerCase().includes(normalizedQuery) || opt.description?.toLowerCase().includes(normalizedQuery)
|
|
16705
16762
|
);
|
|
16706
16763
|
}, [enableSearch, normalizedOptions, searchMode, shouldPromptForSearch, trimmedQuery]);
|
|
16707
|
-
const renderLimitedOptions =
|
|
16764
|
+
const renderLimitedOptions = React42.useMemo(() => {
|
|
16708
16765
|
if (trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
|
|
16709
16766
|
return filtered;
|
|
16710
16767
|
}
|
|
@@ -16720,14 +16777,14 @@ var MultiCombobox = ({
|
|
|
16720
16777
|
enabled: canVirtualize
|
|
16721
16778
|
});
|
|
16722
16779
|
const virtualItems = canVirtualize ? optionVirtualizer.getVirtualItems() : [];
|
|
16723
|
-
const scrollVirtualListToIndex =
|
|
16780
|
+
const scrollVirtualListToIndex = React42.useCallback((index) => {
|
|
16724
16781
|
if (!canVirtualize || renderLimitedOptions.length === 0) return;
|
|
16725
16782
|
optionVirtualizer.scrollToIndex(index, { align: "auto" });
|
|
16726
16783
|
}, [canVirtualize, optionVirtualizer, renderLimitedOptions.length]);
|
|
16727
|
-
const scrollVirtualListToStart =
|
|
16784
|
+
const scrollVirtualListToStart = React42.useCallback(() => {
|
|
16728
16785
|
scrollVirtualListToIndex(0);
|
|
16729
16786
|
}, [scrollVirtualListToIndex]);
|
|
16730
|
-
const groupedOptions =
|
|
16787
|
+
const groupedOptions = React42.useMemo(() => {
|
|
16731
16788
|
if (!groupBy) return null;
|
|
16732
16789
|
const groups = /* @__PURE__ */ new Map();
|
|
16733
16790
|
renderLimitedOptions.forEach((opt) => {
|
|
@@ -16780,12 +16837,12 @@ var MultiCombobox = ({
|
|
|
16780
16837
|
onChange([]);
|
|
16781
16838
|
};
|
|
16782
16839
|
const effectiveError = error ?? localRequiredError;
|
|
16783
|
-
|
|
16840
|
+
React42.useEffect(() => {
|
|
16784
16841
|
if (disabled || !required || value.length > 0) {
|
|
16785
16842
|
setLocalRequiredError(void 0);
|
|
16786
16843
|
}
|
|
16787
16844
|
}, [disabled, required, value.length]);
|
|
16788
|
-
|
|
16845
|
+
React42.useEffect(() => {
|
|
16789
16846
|
if (open && enableSearch) {
|
|
16790
16847
|
setTimeout(() => {
|
|
16791
16848
|
inputRef.current?.focus();
|
|
@@ -16796,12 +16853,12 @@ var MultiCombobox = ({
|
|
|
16796
16853
|
scrollVirtualListToStart();
|
|
16797
16854
|
}
|
|
16798
16855
|
}, [enableSearch, open, scrollVirtualListToStart]);
|
|
16799
|
-
|
|
16856
|
+
React42.useEffect(() => {
|
|
16800
16857
|
if (!onSearchChange) return void 0;
|
|
16801
16858
|
const timeoutId = window.setTimeout(() => onSearchChange(query), searchDebounceMs);
|
|
16802
16859
|
return () => window.clearTimeout(timeoutId);
|
|
16803
16860
|
}, [onSearchChange, query, searchDebounceMs]);
|
|
16804
|
-
|
|
16861
|
+
React42.useEffect(() => {
|
|
16805
16862
|
if (process.env.NODE_ENV !== "production" && normalizedOptions.length > 300 && !virtualized && searchMode !== "manual" && maxInitialOptions === void 0) {
|
|
16806
16863
|
console.warn(
|
|
16807
16864
|
'[Underverse UI] MultiCombobox received more than 300 options without virtualization, manual search, or maxInitialOptions. Use virtualized, searchMode="manual", or maxInitialOptions to avoid rendering a large dropdown.'
|
|
@@ -17040,7 +17097,7 @@ var MultiCombobox = ({
|
|
|
17040
17097
|
}
|
|
17041
17098
|
)
|
|
17042
17099
|
] });
|
|
17043
|
-
const selectedOptionFallbackMap =
|
|
17100
|
+
const selectedOptionFallbackMap = React42.useMemo(
|
|
17044
17101
|
() => new Map((selectedOptionsProp ?? []).map((option) => [option.value, option])),
|
|
17045
17102
|
[selectedOptionsProp]
|
|
17046
17103
|
);
|
|
@@ -17074,7 +17131,7 @@ var MultiCombobox = ({
|
|
|
17074
17131
|
/* @__PURE__ */ jsx46("div", { className: cn("flex items-center gap-1.5 flex-1 overflow-hidden", size === "sm" ? "min-h-4" : size === "lg" ? "min-h-8" : "min-h-6"), children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs35(Fragment14, { children: [
|
|
17075
17132
|
visibleTags.map((option) => {
|
|
17076
17133
|
if (renderTag) {
|
|
17077
|
-
return /* @__PURE__ */ jsx46(
|
|
17134
|
+
return /* @__PURE__ */ jsx46(React42.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
|
|
17078
17135
|
}
|
|
17079
17136
|
return /* @__PURE__ */ jsxs35(
|
|
17080
17137
|
"span",
|
|
@@ -17236,17 +17293,17 @@ var MultiCombobox = ({
|
|
|
17236
17293
|
};
|
|
17237
17294
|
|
|
17238
17295
|
// src/components/RadioGroup.tsx
|
|
17239
|
-
import * as
|
|
17296
|
+
import * as React43 from "react";
|
|
17240
17297
|
import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
17241
|
-
var RadioGroupContext =
|
|
17298
|
+
var RadioGroupContext = React43.createContext(void 0);
|
|
17242
17299
|
var useRadioGroup = () => {
|
|
17243
|
-
const context =
|
|
17300
|
+
const context = React43.useContext(RadioGroupContext);
|
|
17244
17301
|
if (!context) {
|
|
17245
17302
|
throw new Error("RadioGroupItem must be used within a RadioGroup");
|
|
17246
17303
|
}
|
|
17247
17304
|
return context;
|
|
17248
17305
|
};
|
|
17249
|
-
var RadioGroup =
|
|
17306
|
+
var RadioGroup = React43.forwardRef(
|
|
17250
17307
|
({
|
|
17251
17308
|
value,
|
|
17252
17309
|
defaultValue,
|
|
@@ -17262,7 +17319,7 @@ var RadioGroup = React42.forwardRef(
|
|
|
17262
17319
|
error = false,
|
|
17263
17320
|
errorMessage
|
|
17264
17321
|
}, ref) => {
|
|
17265
|
-
const [internalValue, setInternalValue] =
|
|
17322
|
+
const [internalValue, setInternalValue] = React43.useState(defaultValue || "");
|
|
17266
17323
|
const isControlled = value !== void 0;
|
|
17267
17324
|
const currentValue = isControlled ? value : internalValue;
|
|
17268
17325
|
const handleValueChange = (newValue) => {
|
|
@@ -17273,7 +17330,7 @@ var RadioGroup = React42.forwardRef(
|
|
|
17273
17330
|
onValueChange?.(newValue);
|
|
17274
17331
|
}
|
|
17275
17332
|
};
|
|
17276
|
-
const uniqueId =
|
|
17333
|
+
const uniqueId = React43.useId();
|
|
17277
17334
|
const radioName = name || `radio-group-${uniqueId}`;
|
|
17278
17335
|
return /* @__PURE__ */ jsx47(
|
|
17279
17336
|
RadioGroupContext.Provider,
|
|
@@ -17331,7 +17388,7 @@ var sizeStyles7 = {
|
|
|
17331
17388
|
padding: "p-4"
|
|
17332
17389
|
}
|
|
17333
17390
|
};
|
|
17334
|
-
var RadioGroupItem =
|
|
17391
|
+
var RadioGroupItem = React43.forwardRef(
|
|
17335
17392
|
({ value, id, disabled, className, children, label, labelClassName, description, icon }, ref) => {
|
|
17336
17393
|
const { value: selectedValue, onValueChange, name, disabled: groupDisabled, size = "md", variant = "default" } = useRadioGroup();
|
|
17337
17394
|
const isDisabled = disabled || groupDisabled;
|
|
@@ -17509,7 +17566,7 @@ var RadioGroupItem = React42.forwardRef(
|
|
|
17509
17566
|
RadioGroupItem.displayName = "RadioGroupItem";
|
|
17510
17567
|
|
|
17511
17568
|
// src/components/Slider.tsx
|
|
17512
|
-
import * as
|
|
17569
|
+
import * as React44 from "react";
|
|
17513
17570
|
import { Fragment as Fragment15, jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
17514
17571
|
var SIZE_STYLES = {
|
|
17515
17572
|
sm: {
|
|
@@ -17562,7 +17619,7 @@ function SliderTooltip({
|
|
|
17562
17619
|
}
|
|
17563
17620
|
);
|
|
17564
17621
|
}
|
|
17565
|
-
var Slider =
|
|
17622
|
+
var Slider = React44.forwardRef(
|
|
17566
17623
|
({
|
|
17567
17624
|
className,
|
|
17568
17625
|
mode = "single",
|
|
@@ -17598,28 +17655,28 @@ var Slider = React43.forwardRef(
|
|
|
17598
17655
|
}, ref) => {
|
|
17599
17656
|
const gi18n = useGlobalI18n();
|
|
17600
17657
|
const isRange = mode === "range";
|
|
17601
|
-
const trackRef =
|
|
17602
|
-
const [internalValue, setInternalValue] =
|
|
17603
|
-
const [internalRange, setInternalRange] =
|
|
17658
|
+
const trackRef = React44.useRef(null);
|
|
17659
|
+
const [internalValue, setInternalValue] = React44.useState(defaultValue);
|
|
17660
|
+
const [internalRange, setInternalRange] = React44.useState(() => {
|
|
17604
17661
|
if (defaultRangeValue) return defaultRangeValue;
|
|
17605
17662
|
const v = clamp6(defaultValue, min, max);
|
|
17606
17663
|
return [min, v];
|
|
17607
17664
|
});
|
|
17608
|
-
const [activeThumb, setActiveThumb] =
|
|
17609
|
-
const dragRef =
|
|
17610
|
-
const [isHovering, setIsHovering] =
|
|
17611
|
-
const [isDragging, setIsDragging] =
|
|
17665
|
+
const [activeThumb, setActiveThumb] = React44.useState(null);
|
|
17666
|
+
const dragRef = React44.useRef(null);
|
|
17667
|
+
const [isHovering, setIsHovering] = React44.useState(false);
|
|
17668
|
+
const [isDragging, setIsDragging] = React44.useState(false);
|
|
17612
17669
|
const isControlled = value !== void 0;
|
|
17613
17670
|
const currentValue = isControlled ? value : internalValue;
|
|
17614
17671
|
const isRangeControlled = rangeValue !== void 0;
|
|
17615
17672
|
const currentRange = isRangeControlled ? rangeValue : internalRange;
|
|
17616
17673
|
const rangeMin = clamp6(currentRange[0] ?? min, min, max);
|
|
17617
17674
|
const rangeMax = clamp6(currentRange[1] ?? max, min, max);
|
|
17618
|
-
const normalizedRange =
|
|
17675
|
+
const normalizedRange = React44.useMemo(
|
|
17619
17676
|
() => rangeMin <= rangeMax ? [rangeMin, rangeMax] : [rangeMax, rangeMin],
|
|
17620
17677
|
[rangeMax, rangeMin]
|
|
17621
17678
|
);
|
|
17622
|
-
const handleSingleChange =
|
|
17679
|
+
const handleSingleChange = React44.useCallback(
|
|
17623
17680
|
(e) => {
|
|
17624
17681
|
const newValue = Number(e.target.value);
|
|
17625
17682
|
if (!isControlled) {
|
|
@@ -17630,14 +17687,14 @@ var Slider = React43.forwardRef(
|
|
|
17630
17687
|
},
|
|
17631
17688
|
[isControlled, onChange, onValueChange]
|
|
17632
17689
|
);
|
|
17633
|
-
const emitRange =
|
|
17690
|
+
const emitRange = React44.useCallback(
|
|
17634
17691
|
(next) => {
|
|
17635
17692
|
onRangeChange?.(next);
|
|
17636
17693
|
onRangeValueChange?.(next);
|
|
17637
17694
|
},
|
|
17638
17695
|
[onRangeChange, onRangeValueChange]
|
|
17639
17696
|
);
|
|
17640
|
-
const handleRangeChange =
|
|
17697
|
+
const handleRangeChange = React44.useCallback(
|
|
17641
17698
|
(thumb) => (e) => {
|
|
17642
17699
|
const nextVal = Number(e.target.value);
|
|
17643
17700
|
const [curMin, curMax] = normalizedRange;
|
|
@@ -17653,7 +17710,7 @@ var Slider = React43.forwardRef(
|
|
|
17653
17710
|
const rangeEndPct = (normalizedRange[1] - min) / denom * 100;
|
|
17654
17711
|
const sizeStyles8 = SIZE_STYLES[size];
|
|
17655
17712
|
const tooltipVisible = showTooltip && !disabled && (isHovering || isDragging);
|
|
17656
|
-
const displayValue =
|
|
17713
|
+
const displayValue = React44.useMemo(() => {
|
|
17657
17714
|
if (isRange) {
|
|
17658
17715
|
const a = formatValue ? formatValue(normalizedRange[0]) : normalizedRange[0].toString();
|
|
17659
17716
|
const b = formatValue ? formatValue(normalizedRange[1]) : normalizedRange[1].toString();
|
|
@@ -17661,7 +17718,7 @@ var Slider = React43.forwardRef(
|
|
|
17661
17718
|
}
|
|
17662
17719
|
return formatValue ? formatValue(currentValue) : currentValue.toString();
|
|
17663
17720
|
}, [currentValue, formatValue, isRange, normalizedRange]);
|
|
17664
|
-
const quantize =
|
|
17721
|
+
const quantize = React44.useCallback(
|
|
17665
17722
|
(v) => {
|
|
17666
17723
|
const stepped = Math.round((v - min) / step) * step + min;
|
|
17667
17724
|
const fixed = Number(stepped.toFixed(10));
|
|
@@ -17669,7 +17726,7 @@ var Slider = React43.forwardRef(
|
|
|
17669
17726
|
},
|
|
17670
17727
|
[max, min, step]
|
|
17671
17728
|
);
|
|
17672
|
-
const valueFromClientX =
|
|
17729
|
+
const valueFromClientX = React44.useCallback(
|
|
17673
17730
|
(clientX) => {
|
|
17674
17731
|
const el = trackRef.current;
|
|
17675
17732
|
if (!el) return min;
|
|
@@ -17926,7 +17983,7 @@ Slider.displayName = "Slider";
|
|
|
17926
17983
|
|
|
17927
17984
|
// src/components/OverlayControls.tsx
|
|
17928
17985
|
import { Dot as Dot2, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
|
|
17929
|
-
import
|
|
17986
|
+
import React45 from "react";
|
|
17930
17987
|
import { Fragment as Fragment16, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
17931
17988
|
function resolveKeyboardEventElement(target) {
|
|
17932
17989
|
if (target instanceof Element) return target;
|
|
@@ -17976,24 +18033,24 @@ function OverlayControls({
|
|
|
17976
18033
|
}) {
|
|
17977
18034
|
const hoverClasses = showOnHover ? "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto" : "opacity-100 pointer-events-auto";
|
|
17978
18035
|
const showControlsBar = mode === "review";
|
|
17979
|
-
const [rateOpen, setRateOpen] =
|
|
17980
|
-
const rateWrapRef =
|
|
17981
|
-
const [controlsVisible, setControlsVisible] =
|
|
17982
|
-
const hideTimerRef =
|
|
17983
|
-
const [previewData, setPreviewData] =
|
|
17984
|
-
const sliderRef =
|
|
17985
|
-
const [isDragging, setIsDragging] =
|
|
17986
|
-
const [dragValue, setDragValue] =
|
|
17987
|
-
|
|
18036
|
+
const [rateOpen, setRateOpen] = React45.useState(false);
|
|
18037
|
+
const rateWrapRef = React45.useRef(null);
|
|
18038
|
+
const [controlsVisible, setControlsVisible] = React45.useState(true);
|
|
18039
|
+
const hideTimerRef = React45.useRef(null);
|
|
18040
|
+
const [previewData, setPreviewData] = React45.useState(null);
|
|
18041
|
+
const sliderRef = React45.useRef(null);
|
|
18042
|
+
const [isDragging, setIsDragging] = React45.useState(false);
|
|
18043
|
+
const [dragValue, setDragValue] = React45.useState(value);
|
|
18044
|
+
React45.useEffect(() => {
|
|
17988
18045
|
if (!isDragging) {
|
|
17989
18046
|
setDragValue(value);
|
|
17990
18047
|
}
|
|
17991
18048
|
}, [value, isDragging]);
|
|
17992
|
-
const [keyboardFeedback, setKeyboardFeedback] =
|
|
17993
|
-
const feedbackTimerRef =
|
|
17994
|
-
const seekAccumulatorRef =
|
|
17995
|
-
const seekAccumulatorTimerRef =
|
|
17996
|
-
|
|
18049
|
+
const [keyboardFeedback, setKeyboardFeedback] = React45.useState(null);
|
|
18050
|
+
const feedbackTimerRef = React45.useRef(null);
|
|
18051
|
+
const seekAccumulatorRef = React45.useRef(0);
|
|
18052
|
+
const seekAccumulatorTimerRef = React45.useRef(null);
|
|
18053
|
+
React45.useEffect(() => {
|
|
17997
18054
|
const onDocDown = (e) => {
|
|
17998
18055
|
if (!rateOpen) return;
|
|
17999
18056
|
const wrap = rateWrapRef.current;
|
|
@@ -18004,7 +18061,7 @@ function OverlayControls({
|
|
|
18004
18061
|
document.addEventListener("mousedown", onDocDown);
|
|
18005
18062
|
return () => document.removeEventListener("mousedown", onDocDown);
|
|
18006
18063
|
}, [rateOpen]);
|
|
18007
|
-
|
|
18064
|
+
React45.useEffect(() => {
|
|
18008
18065
|
if (!autoHide || showOnHover) return;
|
|
18009
18066
|
const resetTimer = () => {
|
|
18010
18067
|
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
|
|
@@ -18027,14 +18084,14 @@ function OverlayControls({
|
|
|
18027
18084
|
document.removeEventListener("mousemove", handleMouseMove2);
|
|
18028
18085
|
};
|
|
18029
18086
|
}, [autoHide, autoHideDelay, showOnHover]);
|
|
18030
|
-
const showFeedback =
|
|
18087
|
+
const showFeedback = React45.useCallback((type, value2) => {
|
|
18031
18088
|
if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
|
|
18032
18089
|
setKeyboardFeedback({ type, value: value2 });
|
|
18033
18090
|
feedbackTimerRef.current = setTimeout(() => {
|
|
18034
18091
|
setKeyboardFeedback(null);
|
|
18035
18092
|
}, 800);
|
|
18036
18093
|
}, []);
|
|
18037
|
-
const accumulateSeek =
|
|
18094
|
+
const accumulateSeek = React45.useCallback((seconds) => {
|
|
18038
18095
|
if (seekAccumulatorTimerRef.current) clearTimeout(seekAccumulatorTimerRef.current);
|
|
18039
18096
|
seekAccumulatorRef.current += seconds;
|
|
18040
18097
|
showFeedback("seek", seekAccumulatorRef.current);
|
|
@@ -18042,7 +18099,7 @@ function OverlayControls({
|
|
|
18042
18099
|
seekAccumulatorRef.current = 0;
|
|
18043
18100
|
}, 1e3);
|
|
18044
18101
|
}, [showFeedback]);
|
|
18045
|
-
|
|
18102
|
+
React45.useEffect(() => {
|
|
18046
18103
|
if (!enableKeyboardShortcuts) return;
|
|
18047
18104
|
const handleKeyDown2 = (e) => {
|
|
18048
18105
|
if (isEditableKeyboardTarget(e.target)) return;
|
|
@@ -20021,7 +20078,7 @@ function FileUpload({
|
|
|
20021
20078
|
}
|
|
20022
20079
|
|
|
20023
20080
|
// src/components/Carousel.tsx
|
|
20024
|
-
import * as
|
|
20081
|
+
import * as React47 from "react";
|
|
20025
20082
|
import { ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight8 } from "lucide-react";
|
|
20026
20083
|
import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
20027
20084
|
function Carousel({
|
|
@@ -20047,16 +20104,16 @@ function Carousel({
|
|
|
20047
20104
|
effectOptions
|
|
20048
20105
|
}) {
|
|
20049
20106
|
const gi18n = useGlobalI18n();
|
|
20050
|
-
const [currentIndex, setCurrentIndex] =
|
|
20051
|
-
const [isPaused, setIsPaused] =
|
|
20052
|
-
const progressElRef =
|
|
20053
|
-
const carouselRef =
|
|
20054
|
-
const rafRef =
|
|
20055
|
-
const isDraggingRef =
|
|
20056
|
-
const dragDistanceRef =
|
|
20057
|
-
const startPosRef =
|
|
20058
|
-
const lastDragPositionRef =
|
|
20059
|
-
const slides =
|
|
20107
|
+
const [currentIndex, setCurrentIndex] = React47.useState(0);
|
|
20108
|
+
const [isPaused, setIsPaused] = React47.useState(false);
|
|
20109
|
+
const progressElRef = React47.useRef(null);
|
|
20110
|
+
const carouselRef = React47.useRef(null);
|
|
20111
|
+
const rafRef = React47.useRef(null);
|
|
20112
|
+
const isDraggingRef = React47.useRef(false);
|
|
20113
|
+
const dragDistanceRef = React47.useRef(0);
|
|
20114
|
+
const startPosRef = React47.useRef(0);
|
|
20115
|
+
const lastDragPositionRef = React47.useRef(0);
|
|
20116
|
+
const slides = React47.useMemo(() => React47.Children.toArray(children), [children]);
|
|
20060
20117
|
const totalSlides = slides.length;
|
|
20061
20118
|
const isHorizontal = orientation === "horizontal";
|
|
20062
20119
|
const effectiveAnimation = slidesToShow > 1 && !["slide", "coverflow", "stack"].includes(animation) ? "slide" : animation;
|
|
@@ -20064,7 +20121,7 @@ function Carousel({
|
|
|
20064
20121
|
const effectiveSlidesToShow = isDeckAnimation ? 1 : slidesToShow;
|
|
20065
20122
|
const maxIndex = Math.max(0, totalSlides - effectiveSlidesToShow);
|
|
20066
20123
|
const shouldShowArrows = showArrows && isHorizontal;
|
|
20067
|
-
const presetEffectOptions =
|
|
20124
|
+
const presetEffectOptions = React47.useMemo(() => {
|
|
20068
20125
|
if (effectPreset === "cinematic") {
|
|
20069
20126
|
return effectiveAnimation === "stack" ? {
|
|
20070
20127
|
mainScale: 1.08,
|
|
@@ -20159,7 +20216,7 @@ function Carousel({
|
|
|
20159
20216
|
}
|
|
20160
20217
|
return {};
|
|
20161
20218
|
}, [effectPreset, effectiveAnimation]);
|
|
20162
|
-
const mergedEffectOptions =
|
|
20219
|
+
const mergedEffectOptions = React47.useMemo(
|
|
20163
20220
|
() => ({
|
|
20164
20221
|
mainScale: 1.04,
|
|
20165
20222
|
sideScale: effectiveAnimation === "stack" ? 0.93 : 0.88,
|
|
@@ -20178,7 +20235,7 @@ function Carousel({
|
|
|
20178
20235
|
}),
|
|
20179
20236
|
[effectOptions, effectiveAnimation, presetEffectOptions]
|
|
20180
20237
|
);
|
|
20181
|
-
const scrollPrev =
|
|
20238
|
+
const scrollPrev = React47.useCallback(() => {
|
|
20182
20239
|
setCurrentIndex((prev) => {
|
|
20183
20240
|
if (prev === 0) {
|
|
20184
20241
|
return loop ? maxIndex : 0;
|
|
@@ -20186,7 +20243,7 @@ function Carousel({
|
|
|
20186
20243
|
return Math.max(0, prev - slidesToScroll);
|
|
20187
20244
|
});
|
|
20188
20245
|
}, [loop, maxIndex, slidesToScroll]);
|
|
20189
|
-
const scrollNext =
|
|
20246
|
+
const scrollNext = React47.useCallback(() => {
|
|
20190
20247
|
setCurrentIndex((prev) => {
|
|
20191
20248
|
if (prev >= maxIndex) {
|
|
20192
20249
|
return loop ? 0 : maxIndex;
|
|
@@ -20194,13 +20251,13 @@ function Carousel({
|
|
|
20194
20251
|
return Math.min(maxIndex, prev + slidesToScroll);
|
|
20195
20252
|
});
|
|
20196
20253
|
}, [loop, maxIndex, slidesToScroll]);
|
|
20197
|
-
const scrollTo =
|
|
20254
|
+
const scrollTo = React47.useCallback(
|
|
20198
20255
|
(index) => {
|
|
20199
20256
|
setCurrentIndex(Math.min(maxIndex, Math.max(0, index)));
|
|
20200
20257
|
},
|
|
20201
20258
|
[maxIndex]
|
|
20202
20259
|
);
|
|
20203
|
-
const handleKeyDown2 =
|
|
20260
|
+
const handleKeyDown2 = React47.useCallback(
|
|
20204
20261
|
(e) => {
|
|
20205
20262
|
if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
|
|
20206
20263
|
e.preventDefault();
|
|
@@ -20218,7 +20275,7 @@ function Carousel({
|
|
|
20218
20275
|
},
|
|
20219
20276
|
[scrollPrev, scrollNext, scrollTo, maxIndex]
|
|
20220
20277
|
);
|
|
20221
|
-
|
|
20278
|
+
React47.useEffect(() => {
|
|
20222
20279
|
const stop = () => {
|
|
20223
20280
|
if (rafRef.current != null) {
|
|
20224
20281
|
cancelAnimationFrame(rafRef.current);
|
|
@@ -20278,7 +20335,7 @@ function Carousel({
|
|
|
20278
20335
|
startPosRef.current = 0;
|
|
20279
20336
|
lastDragPositionRef.current = 0;
|
|
20280
20337
|
};
|
|
20281
|
-
const handleDeckAreaClick =
|
|
20338
|
+
const handleDeckAreaClick = React47.useCallback((event) => {
|
|
20282
20339
|
if (!isDeckAnimation || dragDistanceRef.current > 8) {
|
|
20283
20340
|
dragDistanceRef.current = 0;
|
|
20284
20341
|
return;
|
|
@@ -20295,7 +20352,7 @@ function Carousel({
|
|
|
20295
20352
|
scrollNext();
|
|
20296
20353
|
}
|
|
20297
20354
|
}, [isDeckAnimation, scrollNext, scrollPrev]);
|
|
20298
|
-
|
|
20355
|
+
React47.useEffect(() => {
|
|
20299
20356
|
onSlideChange?.(currentIndex);
|
|
20300
20357
|
}, [currentIndex, onSlideChange]);
|
|
20301
20358
|
const getAnimationStyles2 = () => {
|
|
@@ -20309,7 +20366,7 @@ function Carousel({
|
|
|
20309
20366
|
};
|
|
20310
20367
|
};
|
|
20311
20368
|
const slideWidth = 100 / effectiveSlidesToShow;
|
|
20312
|
-
const getLoopDistance =
|
|
20369
|
+
const getLoopDistance = React47.useCallback(
|
|
20313
20370
|
(index) => {
|
|
20314
20371
|
if (totalSlides <= 0) return 0;
|
|
20315
20372
|
const forward = index - currentIndex;
|
|
@@ -20321,7 +20378,7 @@ function Carousel({
|
|
|
20321
20378
|
},
|
|
20322
20379
|
[currentIndex, loop, totalSlides]
|
|
20323
20380
|
);
|
|
20324
|
-
const getDeckSlideStyles =
|
|
20381
|
+
const getDeckSlideStyles = React47.useCallback(
|
|
20325
20382
|
(index) => {
|
|
20326
20383
|
const distance = getLoopDistance(index);
|
|
20327
20384
|
const absDistance = Math.abs(distance);
|
|
@@ -20401,7 +20458,7 @@ function Carousel({
|
|
|
20401
20458
|
"aria-atomic": "false",
|
|
20402
20459
|
"aria-live": autoScroll ? "off" : "polite",
|
|
20403
20460
|
children: slides.map((child, idx) => {
|
|
20404
|
-
const key =
|
|
20461
|
+
const key = React47.isValidElement(child) && child.key || idx;
|
|
20405
20462
|
const ariaHidden = effectiveAnimation === "slide" ? idx < currentIndex || idx >= currentIndex + slidesToShow : idx !== currentIndex;
|
|
20406
20463
|
if (isDeckAnimation) {
|
|
20407
20464
|
return /* @__PURE__ */ jsx53(
|
|
@@ -20524,7 +20581,7 @@ function Carousel({
|
|
|
20524
20581
|
"max-md:gap-1.5 max-md:p-2",
|
|
20525
20582
|
isHorizontal ? "flex-row" : "flex-col"
|
|
20526
20583
|
),
|
|
20527
|
-
children:
|
|
20584
|
+
children: React47.Children.map(children, (child, idx) => /* @__PURE__ */ jsx53(
|
|
20528
20585
|
"button",
|
|
20529
20586
|
{
|
|
20530
20587
|
onClick: () => scrollTo(idx),
|
|
@@ -20546,7 +20603,7 @@ function Carousel({
|
|
|
20546
20603
|
}
|
|
20547
20604
|
|
|
20548
20605
|
// src/components/FallingIcons.tsx
|
|
20549
|
-
import
|
|
20606
|
+
import React48 from "react";
|
|
20550
20607
|
import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
20551
20608
|
var DEFAULT_COUNT = 24;
|
|
20552
20609
|
var DEFAULT_SPEED_RANGE = [6, 14];
|
|
@@ -20574,10 +20631,10 @@ function FallingIcons({
|
|
|
20574
20631
|
physics,
|
|
20575
20632
|
easingFunction = "linear"
|
|
20576
20633
|
}) {
|
|
20577
|
-
const uid =
|
|
20578
|
-
const containerRef =
|
|
20579
|
-
const [fallDist, setFallDist] =
|
|
20580
|
-
const idRef =
|
|
20634
|
+
const uid = React48.useId().replace(/[:]/g, "");
|
|
20635
|
+
const containerRef = React48.useRef(null);
|
|
20636
|
+
const [fallDist, setFallDist] = React48.useState(null);
|
|
20637
|
+
const idRef = React48.useRef(1);
|
|
20581
20638
|
const gravity = physics?.gravity ?? 1;
|
|
20582
20639
|
const windDirection = physics?.windDirection ?? 0;
|
|
20583
20640
|
const windStrength = physics?.windStrength ?? 0;
|
|
@@ -20591,7 +20648,7 @@ function FallingIcons({
|
|
|
20591
20648
|
bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
20592
20649
|
elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
|
|
20593
20650
|
};
|
|
20594
|
-
const makeParticle =
|
|
20651
|
+
const makeParticle = React48.useCallback(() => {
|
|
20595
20652
|
const rnd = (min, max) => min + Math.random() * (max - min);
|
|
20596
20653
|
return {
|
|
20597
20654
|
leftPct: rnd(0, 100),
|
|
@@ -20605,12 +20662,12 @@ function FallingIcons({
|
|
|
20605
20662
|
key: idRef.current++
|
|
20606
20663
|
};
|
|
20607
20664
|
}, [sizeRange, speedRange, horizontalDrift, gravity, windDirection, windStrength]);
|
|
20608
|
-
const [particles, setParticles] =
|
|
20609
|
-
|
|
20665
|
+
const [particles, setParticles] = React48.useState([]);
|
|
20666
|
+
React48.useEffect(() => {
|
|
20610
20667
|
const arr = Array.from({ length: Math.max(0, count) }).map(() => makeParticle());
|
|
20611
20668
|
setParticles(arr);
|
|
20612
20669
|
}, [count, makeParticle]);
|
|
20613
|
-
|
|
20670
|
+
React48.useEffect(() => {
|
|
20614
20671
|
if (fullScreen) {
|
|
20615
20672
|
const measure2 = () => setFallDist(window.innerHeight + 200);
|
|
20616
20673
|
measure2();
|
|
@@ -20635,14 +20692,14 @@ function FallingIcons({
|
|
|
20635
20692
|
const SpinName = `uv-spin-${uid}`;
|
|
20636
20693
|
const PopName = `uv-pop-${uid}`;
|
|
20637
20694
|
const PhysicsSpinName = `uv-physics-spin-${uid}`;
|
|
20638
|
-
const glowStyles =
|
|
20695
|
+
const glowStyles = React48.useMemo(() => {
|
|
20639
20696
|
if (!glow) return {};
|
|
20640
20697
|
const intensity = Math.max(0, Math.min(1, glowIntensity));
|
|
20641
20698
|
return {
|
|
20642
20699
|
filter: `drop-shadow(0 0 ${4 * intensity}px ${glowColor}) drop-shadow(0 0 ${8 * intensity}px ${glowColor})`
|
|
20643
20700
|
};
|
|
20644
20701
|
}, [glow, glowColor, glowIntensity]);
|
|
20645
|
-
const FallbackIcon =
|
|
20702
|
+
const FallbackIcon = React48.useMemo(
|
|
20646
20703
|
() => function FallingIconsFallbackIcon(props) {
|
|
20647
20704
|
return /* @__PURE__ */ jsx54("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx54("circle", { cx: "12", cy: "12", r: "10" }) });
|
|
20648
20705
|
},
|
|
@@ -20704,7 +20761,7 @@ function FallingIcons({
|
|
|
20704
20761
|
});
|
|
20705
20762
|
};
|
|
20706
20763
|
const trailParticles = trail ? Array.from({ length: Math.min(5, Math.max(1, trailLength)) }) : [];
|
|
20707
|
-
return /* @__PURE__ */ jsxs43(
|
|
20764
|
+
return /* @__PURE__ */ jsxs43(React48.Fragment, { children: [
|
|
20708
20765
|
trail && trailParticles.map((_, trailIndex) => {
|
|
20709
20766
|
const trailDelay = p.delay - (trailIndex + 1) * 0.15;
|
|
20710
20767
|
const trailOpacity = 1 - (trailIndex + 1) * (1 / (trailParticles.length + 1));
|
|
@@ -20822,7 +20879,7 @@ function FallingIcons({
|
|
|
20822
20879
|
}
|
|
20823
20880
|
|
|
20824
20881
|
// src/components/List.tsx
|
|
20825
|
-
import * as
|
|
20882
|
+
import * as React49 from "react";
|
|
20826
20883
|
import { ChevronRight as ChevronRight9 } from "lucide-react";
|
|
20827
20884
|
import { Fragment as Fragment19, jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
20828
20885
|
var SIZE_STYLES2 = {
|
|
@@ -20848,7 +20905,7 @@ var ListItemSkeleton = ({ size }) => {
|
|
|
20848
20905
|
] })
|
|
20849
20906
|
] });
|
|
20850
20907
|
};
|
|
20851
|
-
var ListRoot =
|
|
20908
|
+
var ListRoot = React49.forwardRef(
|
|
20852
20909
|
({
|
|
20853
20910
|
as = "ul",
|
|
20854
20911
|
ordered,
|
|
@@ -20869,7 +20926,7 @@ var ListRoot = React48.forwardRef(
|
|
|
20869
20926
|
...rest
|
|
20870
20927
|
}, ref) => {
|
|
20871
20928
|
const Comp = ordered ? "ol" : as;
|
|
20872
|
-
const childCount =
|
|
20929
|
+
const childCount = React49.Children.count(children);
|
|
20873
20930
|
const hasChildren = childCount > 0;
|
|
20874
20931
|
const variantClasses3 = {
|
|
20875
20932
|
plain: "",
|
|
@@ -20923,14 +20980,14 @@ var ListRoot = React48.forwardRef(
|
|
|
20923
20980
|
className
|
|
20924
20981
|
),
|
|
20925
20982
|
...rest,
|
|
20926
|
-
children:
|
|
20927
|
-
if (!
|
|
20983
|
+
children: React49.Children.map(children, (child, idx) => {
|
|
20984
|
+
if (!React49.isValidElement(child)) return child;
|
|
20928
20985
|
const childClass = cn(
|
|
20929
20986
|
child.props?.className,
|
|
20930
20987
|
hoverable && variant !== "flush" && "hover:bg-accent/50 focus:bg-accent/60 focus:outline-none transition-colors",
|
|
20931
20988
|
variant === "flush" && "hover:bg-accent/30"
|
|
20932
20989
|
);
|
|
20933
|
-
return
|
|
20990
|
+
return React49.cloneElement(child, {
|
|
20934
20991
|
className: childClass,
|
|
20935
20992
|
// Pass global item class to contentClassName of ListItem
|
|
20936
20993
|
contentClassName: cn(itemClassName, child.props?.contentClassName),
|
|
@@ -20945,7 +21002,7 @@ var ListRoot = React48.forwardRef(
|
|
|
20945
21002
|
}
|
|
20946
21003
|
);
|
|
20947
21004
|
ListRoot.displayName = "List";
|
|
20948
|
-
var ListItem =
|
|
21005
|
+
var ListItem = React49.forwardRef(
|
|
20949
21006
|
({
|
|
20950
21007
|
as = "li",
|
|
20951
21008
|
selected = false,
|
|
@@ -20968,7 +21025,7 @@ var ListItem = React48.forwardRef(
|
|
|
20968
21025
|
children,
|
|
20969
21026
|
...rest
|
|
20970
21027
|
}, ref) => {
|
|
20971
|
-
const [internalExpanded, setInternalExpanded] =
|
|
21028
|
+
const [internalExpanded, setInternalExpanded] = React49.useState(false);
|
|
20972
21029
|
const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
|
|
20973
21030
|
const sizeAttr = rest["data-size"];
|
|
20974
21031
|
const resolvedSize = sizeAttr && ["xs", "sm", "md", "lg"].includes(sizeAttr) ? sizeAttr : "md";
|
|
@@ -21036,7 +21093,7 @@ var List = Object.assign(ListRoot, { Item: ListItem });
|
|
|
21036
21093
|
var List_default = List;
|
|
21037
21094
|
|
|
21038
21095
|
// src/components/Watermark.tsx
|
|
21039
|
-
import * as
|
|
21096
|
+
import * as React50 from "react";
|
|
21040
21097
|
import { createPortal as createPortal5 } from "react-dom";
|
|
21041
21098
|
import { Fragment as Fragment20, jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
21042
21099
|
var PRESETS2 = {
|
|
@@ -21048,8 +21105,8 @@ var PRESETS2 = {
|
|
|
21048
21105
|
internal: { text: "INTERNAL USE ONLY", color: "rgba(156, 163, 175, 0.15)", rotate: -22, fontSize: 13, fontWeight: "600" }
|
|
21049
21106
|
};
|
|
21050
21107
|
function useWatermarkDataURL(opts) {
|
|
21051
|
-
const [url, setUrl] =
|
|
21052
|
-
|
|
21108
|
+
const [url, setUrl] = React50.useState(null);
|
|
21109
|
+
React50.useEffect(() => {
|
|
21053
21110
|
let cancelled = false;
|
|
21054
21111
|
const text = opts.text;
|
|
21055
21112
|
const image = opts.image;
|
|
@@ -21226,9 +21283,9 @@ var Watermark = ({
|
|
|
21226
21283
|
children,
|
|
21227
21284
|
...rest
|
|
21228
21285
|
}) => {
|
|
21229
|
-
const [visible, setVisible] =
|
|
21230
|
-
const [isDark, setIsDark] =
|
|
21231
|
-
|
|
21286
|
+
const [visible, setVisible] = React50.useState(true);
|
|
21287
|
+
const [isDark, setIsDark] = React50.useState(false);
|
|
21288
|
+
React50.useEffect(() => {
|
|
21232
21289
|
if (!darkMode) return;
|
|
21233
21290
|
const checkDarkMode = () => {
|
|
21234
21291
|
const isDarkMode = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
@@ -21330,7 +21387,7 @@ var Watermark = ({
|
|
|
21330
21387
|
var Watermark_default = Watermark;
|
|
21331
21388
|
|
|
21332
21389
|
// src/components/Timeline.tsx
|
|
21333
|
-
import * as
|
|
21390
|
+
import * as React51 from "react";
|
|
21334
21391
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
21335
21392
|
import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
21336
21393
|
var SIZE_STYLE = {
|
|
@@ -21383,7 +21440,7 @@ var STATUS_COLOR = {
|
|
|
21383
21440
|
error: "bg-destructive",
|
|
21384
21441
|
info: "bg-info"
|
|
21385
21442
|
};
|
|
21386
|
-
var TimelineContext =
|
|
21443
|
+
var TimelineContext = React51.createContext(null);
|
|
21387
21444
|
var LINE_STYLE_MAP = {
|
|
21388
21445
|
solid: "border-solid",
|
|
21389
21446
|
dashed: "border-dashed",
|
|
@@ -21411,7 +21468,7 @@ var Marker = ({ index, last, size, color, status = "default", lineColor, lineSty
|
|
|
21411
21468
|
!last && showLine && /* @__PURE__ */ jsx57("div", { className: cn("flex-1 border-l-2", LINE_STYLE_MAP[lineStyle]), style: { borderColor: lineColor || "hsl(var(--border))" } })
|
|
21412
21469
|
] });
|
|
21413
21470
|
};
|
|
21414
|
-
var TimelineRoot =
|
|
21471
|
+
var TimelineRoot = React51.forwardRef(
|
|
21415
21472
|
({
|
|
21416
21473
|
align = "left",
|
|
21417
21474
|
variant = "default",
|
|
@@ -21441,7 +21498,7 @@ var TimelineRoot = React50.forwardRef(
|
|
|
21441
21498
|
}
|
|
21442
21499
|
);
|
|
21443
21500
|
TimelineRoot.displayName = "Timeline";
|
|
21444
|
-
var TimelineItem =
|
|
21501
|
+
var TimelineItem = React51.forwardRef(
|
|
21445
21502
|
({
|
|
21446
21503
|
title,
|
|
21447
21504
|
description,
|
|
@@ -21460,11 +21517,11 @@ var TimelineItem = React50.forwardRef(
|
|
|
21460
21517
|
children,
|
|
21461
21518
|
...rest
|
|
21462
21519
|
}, ref) => {
|
|
21463
|
-
const ctx =
|
|
21520
|
+
const ctx = React51.useContext(TimelineContext);
|
|
21464
21521
|
const idx = rest["data-index"];
|
|
21465
21522
|
const isLast = Boolean(rest["data-last"]);
|
|
21466
21523
|
const sz = SIZE_STYLE[ctx.size];
|
|
21467
|
-
const [internalExpanded, setInternalExpanded] =
|
|
21524
|
+
const [internalExpanded, setInternalExpanded] = React51.useState(false);
|
|
21468
21525
|
const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
|
|
21469
21526
|
const toggleExpanded = () => {
|
|
21470
21527
|
const newExpanded = !isExpanded;
|
|
@@ -21606,7 +21663,7 @@ var Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });
|
|
|
21606
21663
|
var Timeline_default = Timeline;
|
|
21607
21664
|
|
|
21608
21665
|
// src/components/ColorPicker.tsx
|
|
21609
|
-
import * as
|
|
21666
|
+
import * as React52 from "react";
|
|
21610
21667
|
import { Pipette, X as X16, Copy, Check as Check9, Palette, History } from "lucide-react";
|
|
21611
21668
|
import { jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
21612
21669
|
var clamp7 = (n, min, max) => Math.max(min, Math.min(max, n));
|
|
@@ -21801,12 +21858,12 @@ function ColorPicker({
|
|
|
21801
21858
|
const gi18n = useGlobalI18n();
|
|
21802
21859
|
const isControlled = value !== void 0;
|
|
21803
21860
|
const initial = parseAnyColor(isControlled ? value : defaultValue) || { r: 79, g: 70, b: 229, a: 1 };
|
|
21804
|
-
const [rgba, setRgba] =
|
|
21805
|
-
const [open, setOpen] =
|
|
21806
|
-
const [text, setText] =
|
|
21807
|
-
const [copied, setCopied] =
|
|
21808
|
-
const [recentColors, setRecentColors] =
|
|
21809
|
-
|
|
21861
|
+
const [rgba, setRgba] = React52.useState(initial);
|
|
21862
|
+
const [open, setOpen] = React52.useState(false);
|
|
21863
|
+
const [text, setText] = React52.useState(() => formatOutput(initial, withAlpha, format));
|
|
21864
|
+
const [copied, setCopied] = React52.useState(false);
|
|
21865
|
+
const [recentColors, setRecentColors] = React52.useState([]);
|
|
21866
|
+
React52.useEffect(() => {
|
|
21810
21867
|
if (isControlled) {
|
|
21811
21868
|
const parsed = parseAnyColor(value);
|
|
21812
21869
|
if (parsed) {
|
|
@@ -22493,7 +22550,7 @@ var MusicPlayer = ({
|
|
|
22493
22550
|
var MusicPlayer_default = MusicPlayer;
|
|
22494
22551
|
|
|
22495
22552
|
// src/components/Grid.tsx
|
|
22496
|
-
import
|
|
22553
|
+
import React54, { useId as useId12 } from "react";
|
|
22497
22554
|
import { Fragment as Fragment21, jsx as jsx60, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
22498
22555
|
var BP_MIN = {
|
|
22499
22556
|
sm: 640,
|
|
@@ -22533,7 +22590,7 @@ function getVariantClasses(variant = "default", outlined) {
|
|
|
22533
22590
|
};
|
|
22534
22591
|
return variants[variant] || "";
|
|
22535
22592
|
}
|
|
22536
|
-
var GridRoot =
|
|
22593
|
+
var GridRoot = React54.forwardRef(
|
|
22537
22594
|
({
|
|
22538
22595
|
columns,
|
|
22539
22596
|
rows,
|
|
@@ -22617,7 +22674,7 @@ var GridRoot = React53.forwardRef(
|
|
|
22617
22674
|
}
|
|
22618
22675
|
);
|
|
22619
22676
|
GridRoot.displayName = "Grid";
|
|
22620
|
-
var GridItem =
|
|
22677
|
+
var GridItem = React54.forwardRef(
|
|
22621
22678
|
({
|
|
22622
22679
|
colSpan,
|
|
22623
22680
|
rowSpan,
|
|
@@ -22777,7 +22834,7 @@ var LoadingBar = ({
|
|
|
22777
22834
|
};
|
|
22778
22835
|
|
|
22779
22836
|
// src/components/Table.tsx
|
|
22780
|
-
import
|
|
22837
|
+
import React55 from "react";
|
|
22781
22838
|
import { jsx as jsx63, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
22782
22839
|
var TABLE_BASE_CLASS = "w-full border-collapse caption-bottom text-sm";
|
|
22783
22840
|
var TABLE_CONTAINER_BASE_CLASS = [
|
|
@@ -22795,8 +22852,8 @@ function assignRef(ref, value) {
|
|
|
22795
22852
|
ref.current = value;
|
|
22796
22853
|
}
|
|
22797
22854
|
}
|
|
22798
|
-
var TableContainer =
|
|
22799
|
-
const containerRef =
|
|
22855
|
+
var TableContainer = React55.forwardRef(({ className, useOverlayScrollbar = false, ...props }, ref) => {
|
|
22856
|
+
const containerRef = React55.useRef(null);
|
|
22800
22857
|
useOverlayScrollbarTarget(containerRef, { enabled: useOverlayScrollbar });
|
|
22801
22858
|
return /* @__PURE__ */ jsx63(
|
|
22802
22859
|
"div",
|
|
@@ -22811,7 +22868,7 @@ var TableContainer = React54.forwardRef(({ className, useOverlayScrollbar = fals
|
|
|
22811
22868
|
);
|
|
22812
22869
|
});
|
|
22813
22870
|
TableContainer.displayName = "TableContainer";
|
|
22814
|
-
var Table =
|
|
22871
|
+
var Table = React55.forwardRef(
|
|
22815
22872
|
({ className, containerClassName, disableContainer = false, useOverlayScrollbar = false, ...props }, ref) => {
|
|
22816
22873
|
if (disableContainer) {
|
|
22817
22874
|
return /* @__PURE__ */ jsx63("table", { ref, className: cn(TABLE_BASE_CLASS, className), ...props });
|
|
@@ -22820,16 +22877,16 @@ var Table = React54.forwardRef(
|
|
|
22820
22877
|
}
|
|
22821
22878
|
);
|
|
22822
22879
|
Table.displayName = "Table";
|
|
22823
|
-
var TableHeader =
|
|
22880
|
+
var TableHeader = React55.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ jsxs51("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border/50", "bg-muted", className), ...props, children: [
|
|
22824
22881
|
children,
|
|
22825
22882
|
filterRow
|
|
22826
22883
|
] }));
|
|
22827
22884
|
TableHeader.displayName = "TableHeader";
|
|
22828
|
-
var TableBody =
|
|
22885
|
+
var TableBody = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
|
|
22829
22886
|
TableBody.displayName = "TableBody";
|
|
22830
|
-
var TableFooter =
|
|
22887
|
+
var TableFooter = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
|
|
22831
22888
|
TableFooter.displayName = "TableFooter";
|
|
22832
|
-
var TableRow =
|
|
22889
|
+
var TableRow = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63(
|
|
22833
22890
|
"tr",
|
|
22834
22891
|
{
|
|
22835
22892
|
ref,
|
|
@@ -22843,7 +22900,7 @@ var TableRow = React54.forwardRef(({ className, ...props }, ref) => /* @__PURE__
|
|
|
22843
22900
|
}
|
|
22844
22901
|
));
|
|
22845
22902
|
TableRow.displayName = "TableRow";
|
|
22846
|
-
var TableHead =
|
|
22903
|
+
var TableHead = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63(
|
|
22847
22904
|
"th",
|
|
22848
22905
|
{
|
|
22849
22906
|
ref,
|
|
@@ -22852,26 +22909,26 @@ var TableHead = React54.forwardRef(({ className, ...props }, ref) => /* @__PURE_
|
|
|
22852
22909
|
}
|
|
22853
22910
|
));
|
|
22854
22911
|
TableHead.displayName = "TableHead";
|
|
22855
|
-
var TableCell =
|
|
22912
|
+
var TableCell = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
|
|
22856
22913
|
TableCell.displayName = "TableCell";
|
|
22857
|
-
var TableCaption =
|
|
22914
|
+
var TableCaption = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
|
|
22858
22915
|
TableCaption.displayName = "TableCaption";
|
|
22859
22916
|
|
|
22860
22917
|
// src/components/DataTable/DataTable.tsx
|
|
22861
22918
|
import { useVirtualizer as useVirtualizer4 } from "@tanstack/react-virtual";
|
|
22862
|
-
import
|
|
22919
|
+
import React65 from "react";
|
|
22863
22920
|
|
|
22864
22921
|
// src/components/DataTable/components/DataTableBody.tsx
|
|
22865
|
-
import
|
|
22922
|
+
import React56 from "react";
|
|
22866
22923
|
import { Fragment as Fragment23, jsx as jsx64, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
22867
22924
|
function DataTableOverflowText({
|
|
22868
22925
|
text,
|
|
22869
22926
|
align
|
|
22870
22927
|
}) {
|
|
22871
|
-
const triggerId =
|
|
22872
|
-
const [isOverflowing, setIsOverflowing] =
|
|
22928
|
+
const triggerId = React56.useId();
|
|
22929
|
+
const [isOverflowing, setIsOverflowing] = React56.useState(false);
|
|
22873
22930
|
const alignClass = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
|
|
22874
|
-
const measureOverflow =
|
|
22931
|
+
const measureOverflow = React56.useCallback(() => {
|
|
22875
22932
|
if (typeof document === "undefined") return;
|
|
22876
22933
|
const element = document.querySelector(`[data-underverse-datatable-cell="${triggerId}"]`);
|
|
22877
22934
|
if (!element) return;
|
|
@@ -22879,10 +22936,10 @@ function DataTableOverflowText({
|
|
|
22879
22936
|
element.scrollWidth - element.clientWidth > 1 || element.scrollHeight - element.clientHeight > 1
|
|
22880
22937
|
);
|
|
22881
22938
|
}, [triggerId]);
|
|
22882
|
-
|
|
22939
|
+
React56.useLayoutEffect(() => {
|
|
22883
22940
|
measureOverflow();
|
|
22884
22941
|
}, [measureOverflow, text]);
|
|
22885
|
-
|
|
22942
|
+
React56.useEffect(() => {
|
|
22886
22943
|
if (typeof document === "undefined") return;
|
|
22887
22944
|
const element = document.querySelector(`[data-underverse-datatable-cell="${triggerId}"]`);
|
|
22888
22945
|
if (!element) return;
|
|
@@ -23003,7 +23060,7 @@ function DataTableBodyRows({
|
|
|
23003
23060
|
}
|
|
23004
23061
|
|
|
23005
23062
|
// src/components/DataTable/components/DataTableHeader.tsx
|
|
23006
|
-
import
|
|
23063
|
+
import React57 from "react";
|
|
23007
23064
|
import { Filter as FilterIcon } from "lucide-react";
|
|
23008
23065
|
|
|
23009
23066
|
// src/components/DataTable/utils/colorTag.ts
|
|
@@ -23095,7 +23152,7 @@ function getColumnLabel(title) {
|
|
|
23095
23152
|
if (Array.isArray(title)) {
|
|
23096
23153
|
return title.map((item) => getColumnLabel(item)).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
|
|
23097
23154
|
}
|
|
23098
|
-
if (
|
|
23155
|
+
if (React57.isValidElement(title)) {
|
|
23099
23156
|
return getColumnLabel(title.props.children);
|
|
23100
23157
|
}
|
|
23101
23158
|
return "";
|
|
@@ -23122,7 +23179,7 @@ function DataTableHeader({
|
|
|
23122
23179
|
columnColorGroups
|
|
23123
23180
|
}) {
|
|
23124
23181
|
const gi18n = useGlobalI18n();
|
|
23125
|
-
const renderFilterControl =
|
|
23182
|
+
const renderFilterControl = React57.useCallback(
|
|
23126
23183
|
(col) => {
|
|
23127
23184
|
if (!col.filter) return null;
|
|
23128
23185
|
const key = col.key;
|
|
@@ -23176,7 +23233,7 @@ function DataTableHeader({
|
|
|
23176
23233
|
},
|
|
23177
23234
|
[filters, setCurPage, setFilters, size]
|
|
23178
23235
|
);
|
|
23179
|
-
const renderHeaderContent =
|
|
23236
|
+
const renderHeaderContent = React57.useCallback(
|
|
23180
23237
|
(col, isLeaf) => {
|
|
23181
23238
|
if (!isLeaf) {
|
|
23182
23239
|
return /* @__PURE__ */ jsx65(
|
|
@@ -23397,7 +23454,7 @@ function DataTableHeader({
|
|
|
23397
23454
|
}
|
|
23398
23455
|
|
|
23399
23456
|
// src/components/DataTable/components/Pagination.tsx
|
|
23400
|
-
import
|
|
23457
|
+
import React58 from "react";
|
|
23401
23458
|
import { jsx as jsx66, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
23402
23459
|
function DataTablePagination({
|
|
23403
23460
|
totalItems,
|
|
@@ -23409,7 +23466,7 @@ function DataTablePagination({
|
|
|
23409
23466
|
size
|
|
23410
23467
|
}) {
|
|
23411
23468
|
const totalPages = Math.ceil(totalItems / curPageSize);
|
|
23412
|
-
const pages =
|
|
23469
|
+
const pages = React58.useMemo(() => {
|
|
23413
23470
|
const result = [];
|
|
23414
23471
|
if (totalPages <= 5) {
|
|
23415
23472
|
for (let i = 1; i <= totalPages; i++) result.push(i);
|
|
@@ -23490,7 +23547,7 @@ function DataTablePagination({
|
|
|
23490
23547
|
}
|
|
23491
23548
|
|
|
23492
23549
|
// src/components/DataTable/components/Toolbar.tsx
|
|
23493
|
-
import
|
|
23550
|
+
import React59 from "react";
|
|
23494
23551
|
|
|
23495
23552
|
// src/components/DataTable/utils/headers.ts
|
|
23496
23553
|
function isLeafColumn(col) {
|
|
@@ -23613,8 +23670,8 @@ function DataTableToolbar({
|
|
|
23613
23670
|
const controlButtonClass = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-9 px-3 text-sm" : "h-8 px-2";
|
|
23614
23671
|
const iconClass = size === "sm" ? "w-3.5 h-3.5 mr-1" : "w-4 h-4 mr-1";
|
|
23615
23672
|
const captionClass = size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-sm";
|
|
23616
|
-
const leafCols =
|
|
23617
|
-
const { groups, ungrouped } =
|
|
23673
|
+
const leafCols = React59.useMemo(() => getLeafColumns(columns), [columns]);
|
|
23674
|
+
const { groups, ungrouped } = React59.useMemo(() => groupColumnsByColorTag(leafCols, columnColorGroups), [leafCols, columnColorGroups]);
|
|
23618
23675
|
const handleSelectAll = () => setVisibleCols(leafCols.map((c) => c.key));
|
|
23619
23676
|
const handleDefault = () => setVisibleCols(defaultVisibleKeys);
|
|
23620
23677
|
return /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
|
|
@@ -23655,7 +23712,7 @@ function DataTableToolbar({
|
|
|
23655
23712
|
/* @__PURE__ */ jsx67(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleDefault, children: labels?.default || t("default") || "Default" })
|
|
23656
23713
|
] }),
|
|
23657
23714
|
/* @__PURE__ */ jsxs55("div", { className: "max-h-80 overflow-y-auto min-w-50", children: [
|
|
23658
|
-
groups.length > 0 && groups.map((group) => /* @__PURE__ */ jsxs55(
|
|
23715
|
+
groups.length > 0 && groups.map((group) => /* @__PURE__ */ jsxs55(React59.Fragment, { children: [
|
|
23659
23716
|
/* @__PURE__ */ jsxs55("div", { className: "px-3 py-1.5 text-[11px] font-semibold uppercase text-muted-foreground flex items-center gap-2 mt-1 bg-accent/30 sticky top-0 z-10 backdrop-blur-sm", children: [
|
|
23660
23717
|
/* @__PURE__ */ jsx67("span", { className: "w-2.5 h-2.5 rounded-full shadow-sm", style: { backgroundColor: group.colorTag } }),
|
|
23661
23718
|
group.label
|
|
@@ -23714,10 +23771,10 @@ function DataTableToolbar({
|
|
|
23714
23771
|
}
|
|
23715
23772
|
|
|
23716
23773
|
// src/components/DataTable/hooks/useDebounced.ts
|
|
23717
|
-
import
|
|
23774
|
+
import React60 from "react";
|
|
23718
23775
|
function useDebounced(value, delay = 300) {
|
|
23719
|
-
const [debounced, setDebounced] =
|
|
23720
|
-
|
|
23776
|
+
const [debounced, setDebounced] = React60.useState(value);
|
|
23777
|
+
React60.useEffect(() => {
|
|
23721
23778
|
const id = setTimeout(() => setDebounced(value), delay);
|
|
23722
23779
|
return () => clearTimeout(id);
|
|
23723
23780
|
}, [value, delay]);
|
|
@@ -23725,7 +23782,7 @@ function useDebounced(value, delay = 300) {
|
|
|
23725
23782
|
}
|
|
23726
23783
|
|
|
23727
23784
|
// src/components/DataTable/hooks/useDataTableModel.ts
|
|
23728
|
-
import
|
|
23785
|
+
import React61 from "react";
|
|
23729
23786
|
|
|
23730
23787
|
// src/components/DataTable/utils/columns.ts
|
|
23731
23788
|
function getColumnWidth(col, fallback = 150) {
|
|
@@ -23753,22 +23810,22 @@ function useDataTableModel({
|
|
|
23753
23810
|
isServerMode,
|
|
23754
23811
|
total
|
|
23755
23812
|
}) {
|
|
23756
|
-
const visibleColsSet =
|
|
23757
|
-
const allLeafColumns =
|
|
23758
|
-
const columnMap =
|
|
23813
|
+
const visibleColsSet = React61.useMemo(() => new Set(visibleCols), [visibleCols]);
|
|
23814
|
+
const allLeafColumns = React61.useMemo(() => getLeafColumns(columns), [columns]);
|
|
23815
|
+
const columnMap = React61.useMemo(() => {
|
|
23759
23816
|
return new Map(allLeafColumns.map((column) => [column.key, column]));
|
|
23760
23817
|
}, [allLeafColumns]);
|
|
23761
|
-
const visibleColumns =
|
|
23818
|
+
const visibleColumns = React61.useMemo(() => {
|
|
23762
23819
|
return filterVisibleColumns(columns, visibleColsSet);
|
|
23763
23820
|
}, [columns, visibleColsSet]);
|
|
23764
|
-
const leafColumns =
|
|
23821
|
+
const leafColumns = React61.useMemo(() => {
|
|
23765
23822
|
return getLeafColumnsWithFixedInheritance(visibleColumns);
|
|
23766
23823
|
}, [visibleColumns]);
|
|
23767
|
-
const headerRows =
|
|
23768
|
-
const totalColumnsWidth =
|
|
23824
|
+
const headerRows = React61.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
|
|
23825
|
+
const totalColumnsWidth = React61.useMemo(() => {
|
|
23769
23826
|
return leafColumns.reduce((sum, column) => sum + getColumnWidth(column), 0);
|
|
23770
23827
|
}, [leafColumns]);
|
|
23771
|
-
const processedData =
|
|
23828
|
+
const processedData = React61.useMemo(() => {
|
|
23772
23829
|
if (isServerMode) return data;
|
|
23773
23830
|
let result = [...data];
|
|
23774
23831
|
if (Object.keys(filters).length > 0) {
|
|
@@ -23800,7 +23857,7 @@ function useDataTableModel({
|
|
|
23800
23857
|
return result;
|
|
23801
23858
|
}, [columnMap, data, filters, isServerMode, sort]);
|
|
23802
23859
|
const totalItems = isServerMode ? total : processedData.length;
|
|
23803
|
-
const displayedData =
|
|
23860
|
+
const displayedData = React61.useMemo(() => {
|
|
23804
23861
|
if (isServerMode) return data;
|
|
23805
23862
|
const start = (curPage - 1) * curPageSize;
|
|
23806
23863
|
return processedData.slice(start, start + curPageSize);
|
|
@@ -23816,10 +23873,10 @@ function useDataTableModel({
|
|
|
23816
23873
|
}
|
|
23817
23874
|
|
|
23818
23875
|
// src/components/DataTable/hooks/useDataTableState.ts
|
|
23819
|
-
import
|
|
23876
|
+
import React63 from "react";
|
|
23820
23877
|
|
|
23821
23878
|
// src/components/DataTable/hooks/usePageSizeStorage.ts
|
|
23822
|
-
import
|
|
23879
|
+
import React62 from "react";
|
|
23823
23880
|
function readStoredPageSize(storageKey) {
|
|
23824
23881
|
if (typeof window === "undefined" || !storageKey) return null;
|
|
23825
23882
|
try {
|
|
@@ -23832,8 +23889,8 @@ function readStoredPageSize(storageKey) {
|
|
|
23832
23889
|
}
|
|
23833
23890
|
}
|
|
23834
23891
|
function usePageSizeStorage({ pageSize, storageKey }) {
|
|
23835
|
-
const storedPageSize =
|
|
23836
|
-
const [overrideState, setOverrideState] =
|
|
23892
|
+
const storedPageSize = React62.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
|
|
23893
|
+
const [overrideState, setOverrideState] = React62.useState({
|
|
23837
23894
|
storageKey,
|
|
23838
23895
|
pageSize: null
|
|
23839
23896
|
});
|
|
@@ -23841,7 +23898,7 @@ function usePageSizeStorage({ pageSize, storageKey }) {
|
|
|
23841
23898
|
const persistedPageSize = storageKey ? overridePageSize ?? storedPageSize : null;
|
|
23842
23899
|
const loadedFromStorage = persistedPageSize != null;
|
|
23843
23900
|
const curPageSize = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
|
|
23844
|
-
const setCurPageSize =
|
|
23901
|
+
const setCurPageSize = React62.useCallback(
|
|
23845
23902
|
(nextPageSize) => {
|
|
23846
23903
|
const baseValue = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
|
|
23847
23904
|
const resolved = typeof nextPageSize === "function" ? nextPageSize(baseValue) : nextPageSize;
|
|
@@ -23870,17 +23927,17 @@ function useDataTableState({
|
|
|
23870
23927
|
size,
|
|
23871
23928
|
storageKey
|
|
23872
23929
|
}) {
|
|
23873
|
-
const allLeafColumns =
|
|
23874
|
-
const defaultVisibleLeafKeys =
|
|
23875
|
-
const knownLeafKeysRef =
|
|
23876
|
-
const [headerAlign, setHeaderAlign] =
|
|
23877
|
-
const [visibleCols, setVisibleCols] =
|
|
23878
|
-
const [filters, setFilters] =
|
|
23879
|
-
const [sort, setSort] =
|
|
23880
|
-
const [density, setDensity] =
|
|
23881
|
-
const [curPage, setCurPage] =
|
|
23930
|
+
const allLeafColumns = React63.useMemo(() => getLeafColumns(columns), [columns]);
|
|
23931
|
+
const defaultVisibleLeafKeys = React63.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
|
|
23932
|
+
const knownLeafKeysRef = React63.useRef(new Set(defaultVisibleLeafKeys));
|
|
23933
|
+
const [headerAlign, setHeaderAlign] = React63.useState("left");
|
|
23934
|
+
const [visibleCols, setVisibleCols] = React63.useState(defaultVisibleLeafKeys);
|
|
23935
|
+
const [filters, setFilters] = React63.useState({});
|
|
23936
|
+
const [sort, setSort] = React63.useState(null);
|
|
23937
|
+
const [density, setDensity] = React63.useState(() => SIZE_TO_DENSITY[size]);
|
|
23938
|
+
const [curPage, setCurPage] = React63.useState(page);
|
|
23882
23939
|
const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
|
|
23883
|
-
|
|
23940
|
+
React63.useEffect(() => {
|
|
23884
23941
|
const knownLeafKeys = knownLeafKeysRef.current;
|
|
23885
23942
|
setVisibleCols((prev) => {
|
|
23886
23943
|
const prevSet = new Set(prev);
|
|
@@ -23888,10 +23945,10 @@ function useDataTableState({
|
|
|
23888
23945
|
});
|
|
23889
23946
|
knownLeafKeysRef.current = new Set(allLeafColumns.map((column) => column.key));
|
|
23890
23947
|
}, [allLeafColumns]);
|
|
23891
|
-
|
|
23948
|
+
React63.useEffect(() => {
|
|
23892
23949
|
setCurPage(page);
|
|
23893
23950
|
}, [page]);
|
|
23894
|
-
|
|
23951
|
+
React63.useEffect(() => {
|
|
23895
23952
|
setDensity(SIZE_TO_DENSITY[size]);
|
|
23896
23953
|
}, [size]);
|
|
23897
23954
|
return {
|
|
@@ -23913,7 +23970,7 @@ function useDataTableState({
|
|
|
23913
23970
|
}
|
|
23914
23971
|
|
|
23915
23972
|
// src/components/DataTable/hooks/useStickyColumns.ts
|
|
23916
|
-
import
|
|
23973
|
+
import React64 from "react";
|
|
23917
23974
|
|
|
23918
23975
|
// src/components/DataTable/utils/sticky.ts
|
|
23919
23976
|
function buildStickyLayout(visibleColumns) {
|
|
@@ -23960,8 +24017,8 @@ function resolveGroupStickyPosition(column, positions) {
|
|
|
23960
24017
|
|
|
23961
24018
|
// src/components/DataTable/hooks/useStickyColumns.ts
|
|
23962
24019
|
function useStickyColumns(visibleColumns) {
|
|
23963
|
-
const { positions, leftBoundaryKey, rightBoundaryKey } =
|
|
23964
|
-
const getStickyColumnStyle =
|
|
24020
|
+
const { positions, leftBoundaryKey, rightBoundaryKey } = React64.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
|
|
24021
|
+
const getStickyColumnStyle = React64.useCallback(
|
|
23965
24022
|
(col) => {
|
|
23966
24023
|
const pos = resolveStickyPosition(col, positions);
|
|
23967
24024
|
if (!pos) return {};
|
|
@@ -23972,7 +24029,7 @@ function useStickyColumns(visibleColumns) {
|
|
|
23972
24029
|
},
|
|
23973
24030
|
[positions]
|
|
23974
24031
|
);
|
|
23975
|
-
const getBoundaryShadowClass =
|
|
24032
|
+
const getBoundaryShadowClass = React64.useCallback(
|
|
23976
24033
|
(col) => {
|
|
23977
24034
|
if (col.fixed === "left" && col.key === leftBoundaryKey) {
|
|
23978
24035
|
return "border-r border-border/80 shadow-[10px_0_16px_-10px_rgba(0,0,0,0.55)]";
|
|
@@ -23984,14 +24041,14 @@ function useStickyColumns(visibleColumns) {
|
|
|
23984
24041
|
},
|
|
23985
24042
|
[leftBoundaryKey, rightBoundaryKey]
|
|
23986
24043
|
);
|
|
23987
|
-
const getStickyHeaderClass =
|
|
24044
|
+
const getStickyHeaderClass = React64.useCallback(
|
|
23988
24045
|
(col) => {
|
|
23989
24046
|
if (!col.fixed) return "";
|
|
23990
24047
|
return cn("sticky", col.fixed === "left" && "left-0", col.fixed === "right" && "right-0", getBoundaryShadowClass(col), "z-50");
|
|
23991
24048
|
},
|
|
23992
24049
|
[getBoundaryShadowClass]
|
|
23993
24050
|
);
|
|
23994
|
-
const getStickyCellClass =
|
|
24051
|
+
const getStickyCellClass = React64.useCallback(
|
|
23995
24052
|
(col, isStripedRow) => {
|
|
23996
24053
|
if (!col.fixed) return "";
|
|
23997
24054
|
return cn(
|
|
@@ -24004,7 +24061,7 @@ function useStickyColumns(visibleColumns) {
|
|
|
24004
24061
|
},
|
|
24005
24062
|
[getBoundaryShadowClass]
|
|
24006
24063
|
);
|
|
24007
|
-
const getStickyHeaderCellStyle =
|
|
24064
|
+
const getStickyHeaderCellStyle = React64.useCallback(
|
|
24008
24065
|
(headerCell) => {
|
|
24009
24066
|
const col = headerCell.column;
|
|
24010
24067
|
if (headerCell.isLeaf) {
|
|
@@ -24196,12 +24253,12 @@ function DataTable({
|
|
|
24196
24253
|
columnColorGroups
|
|
24197
24254
|
}) {
|
|
24198
24255
|
const t = useSmartTranslations("Common");
|
|
24199
|
-
const [columnWidthOverrides, setColumnWidthOverrides] =
|
|
24200
|
-
const columnsWithWidthOverrides =
|
|
24256
|
+
const [columnWidthOverrides, setColumnWidthOverrides] = React65.useState({});
|
|
24257
|
+
const columnsWithWidthOverrides = React65.useMemo(
|
|
24201
24258
|
() => applyColumnWidthOverrides(columns, columnWidthOverrides),
|
|
24202
24259
|
[columnWidthOverrides, columns]
|
|
24203
24260
|
);
|
|
24204
|
-
const defaultVisibleKeys =
|
|
24261
|
+
const defaultVisibleKeys = React65.useMemo(() => {
|
|
24205
24262
|
return getLeafColumns(columnsWithWidthOverrides).filter((col) => col.visible !== false).map((col) => col.key);
|
|
24206
24263
|
}, [columnsWithWidthOverrides]);
|
|
24207
24264
|
const {
|
|
@@ -24226,7 +24283,7 @@ function DataTable({
|
|
|
24226
24283
|
size,
|
|
24227
24284
|
storageKey
|
|
24228
24285
|
});
|
|
24229
|
-
|
|
24286
|
+
React65.useEffect(() => {
|
|
24230
24287
|
if (process.env.NODE_ENV === "development") {
|
|
24231
24288
|
const warnings = validateColumns(columnsWithWidthOverrides);
|
|
24232
24289
|
warnings.forEach((w) => console.warn(`[DataTable] ${w}`));
|
|
@@ -24234,8 +24291,8 @@ function DataTable({
|
|
|
24234
24291
|
}, [columnsWithWidthOverrides]);
|
|
24235
24292
|
const debouncedFilters = useDebounced(filters, 350);
|
|
24236
24293
|
const isServerMode = Boolean(onQueryChange);
|
|
24237
|
-
const hasEmittedQuery =
|
|
24238
|
-
|
|
24294
|
+
const hasEmittedQuery = React65.useRef(false);
|
|
24295
|
+
React65.useEffect(() => {
|
|
24239
24296
|
if (!onQueryChange) return;
|
|
24240
24297
|
if (!hasEmittedQuery.current) {
|
|
24241
24298
|
hasEmittedQuery.current = true;
|
|
@@ -24243,7 +24300,7 @@ function DataTable({
|
|
|
24243
24300
|
}
|
|
24244
24301
|
onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
|
|
24245
24302
|
}, [debouncedFilters, sort, curPage, curPageSize, onQueryChange]);
|
|
24246
|
-
|
|
24303
|
+
React65.useEffect(() => {
|
|
24247
24304
|
if (process.env.NODE_ENV !== "development" || rowKey) return;
|
|
24248
24305
|
const hasQueryFeatures = columns.some((column) => column.sortable || column.filter) || Boolean(pageSizeOptions?.length) || isServerMode;
|
|
24249
24306
|
if (!hasQueryFeatures) return;
|
|
@@ -24276,8 +24333,8 @@ function DataTable({
|
|
|
24276
24333
|
if (typeof rowKey === "function") return String(rowKey(row));
|
|
24277
24334
|
return String(row[rowKey]);
|
|
24278
24335
|
};
|
|
24279
|
-
const viewportRef =
|
|
24280
|
-
const tableRef =
|
|
24336
|
+
const viewportRef = React65.useRef(null);
|
|
24337
|
+
const tableRef = React65.useRef(null);
|
|
24281
24338
|
const canVirtualizeRows = virtualizedRows && !loading2 && displayedData.length > 0;
|
|
24282
24339
|
const shouldUseScrollViewport = stickyHeader || canVirtualizeRows;
|
|
24283
24340
|
const rowVirtualizer = useVirtualizer4({
|
|
@@ -24298,7 +24355,7 @@ function DataTable({
|
|
|
24298
24355
|
enabled: useOverlayScrollbar && !canVirtualizeRows,
|
|
24299
24356
|
overflowX: overlayOverflowX
|
|
24300
24357
|
});
|
|
24301
|
-
const autoFitColumn =
|
|
24358
|
+
const autoFitColumn = React65.useCallback((columnKey) => {
|
|
24302
24359
|
const tableElement = tableRef.current;
|
|
24303
24360
|
if (!tableElement) return;
|
|
24304
24361
|
const nodes = Array.from(
|
|
@@ -24445,10 +24502,10 @@ function DataTable({
|
|
|
24445
24502
|
var DataTable_default = DataTable;
|
|
24446
24503
|
|
|
24447
24504
|
// src/components/Form.tsx
|
|
24448
|
-
import * as
|
|
24505
|
+
import * as React66 from "react";
|
|
24449
24506
|
import { Controller, FormProvider, useFormContext, useForm } from "react-hook-form";
|
|
24450
24507
|
import { jsx as jsx69, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
24451
|
-
var FormConfigContext =
|
|
24508
|
+
var FormConfigContext = React66.createContext({ size: "md" });
|
|
24452
24509
|
var FormWrapper = ({
|
|
24453
24510
|
children,
|
|
24454
24511
|
onSubmit,
|
|
@@ -24461,7 +24518,7 @@ var FormWrapper = ({
|
|
|
24461
24518
|
const methods = useForm({
|
|
24462
24519
|
defaultValues: initialValues
|
|
24463
24520
|
});
|
|
24464
|
-
|
|
24521
|
+
React66.useEffect(() => {
|
|
24465
24522
|
if (initialValues) {
|
|
24466
24523
|
methods.reset(initialValues);
|
|
24467
24524
|
}
|
|
@@ -24470,15 +24527,15 @@ var FormWrapper = ({
|
|
|
24470
24527
|
return /* @__PURE__ */ jsx69(FormProvider, { ...methods, children: /* @__PURE__ */ jsx69(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx69("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
|
|
24471
24528
|
};
|
|
24472
24529
|
var Form = FormWrapper;
|
|
24473
|
-
var FormFieldContext =
|
|
24530
|
+
var FormFieldContext = React66.createContext({});
|
|
24474
24531
|
var FormField = ({
|
|
24475
24532
|
...props
|
|
24476
24533
|
}) => {
|
|
24477
24534
|
return /* @__PURE__ */ jsx69(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx69(Controller, { ...props }) });
|
|
24478
24535
|
};
|
|
24479
24536
|
var useFormField = () => {
|
|
24480
|
-
const fieldContext =
|
|
24481
|
-
const itemContext =
|
|
24537
|
+
const fieldContext = React66.useContext(FormFieldContext);
|
|
24538
|
+
const itemContext = React66.useContext(FormItemContext);
|
|
24482
24539
|
const { getFieldState, formState } = useFormContext();
|
|
24483
24540
|
if (!fieldContext) {
|
|
24484
24541
|
throw new Error("useFormField must be used within FormField");
|
|
@@ -24494,16 +24551,16 @@ var useFormField = () => {
|
|
|
24494
24551
|
...fieldState
|
|
24495
24552
|
};
|
|
24496
24553
|
};
|
|
24497
|
-
var FormItemContext =
|
|
24498
|
-
var FormItem =
|
|
24499
|
-
const id =
|
|
24554
|
+
var FormItemContext = React66.createContext({});
|
|
24555
|
+
var FormItem = React66.forwardRef(({ className, ...props }, ref) => {
|
|
24556
|
+
const id = React66.useId();
|
|
24500
24557
|
return /* @__PURE__ */ jsx69(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx69("div", { ref, className: cn("group space-y-2", className), ...props }) });
|
|
24501
24558
|
});
|
|
24502
24559
|
FormItem.displayName = "FormItem";
|
|
24503
|
-
var FormLabel =
|
|
24560
|
+
var FormLabel = React66.forwardRef(
|
|
24504
24561
|
({ className, children, required, ...props }, ref) => {
|
|
24505
24562
|
const { error, formItemId } = useFormField();
|
|
24506
|
-
const config =
|
|
24563
|
+
const config = React66.useContext(FormConfigContext);
|
|
24507
24564
|
const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
|
|
24508
24565
|
return /* @__PURE__ */ jsxs57(
|
|
24509
24566
|
Label,
|
|
@@ -24526,7 +24583,7 @@ var FormLabel = React65.forwardRef(
|
|
|
24526
24583
|
}
|
|
24527
24584
|
);
|
|
24528
24585
|
FormLabel.displayName = "FormLabel";
|
|
24529
|
-
var FormControl =
|
|
24586
|
+
var FormControl = React66.forwardRef(({ ...props }, ref) => {
|
|
24530
24587
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
24531
24588
|
return /* @__PURE__ */ jsx69(
|
|
24532
24589
|
"div",
|
|
@@ -24540,12 +24597,12 @@ var FormControl = React65.forwardRef(({ ...props }, ref) => {
|
|
|
24540
24597
|
);
|
|
24541
24598
|
});
|
|
24542
24599
|
FormControl.displayName = "FormControl";
|
|
24543
|
-
var FormDescription =
|
|
24600
|
+
var FormDescription = React66.forwardRef(({ className, ...props }, ref) => {
|
|
24544
24601
|
const { formDescriptionId } = useFormField();
|
|
24545
24602
|
return /* @__PURE__ */ jsx69("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
|
|
24546
24603
|
});
|
|
24547
24604
|
FormDescription.displayName = "FormDescription";
|
|
24548
|
-
var FormMessage =
|
|
24605
|
+
var FormMessage = React66.forwardRef(({ className, children, ...props }, ref) => {
|
|
24549
24606
|
const { error, formMessageId } = useFormField();
|
|
24550
24607
|
const body = error ? String(error?.message) : children;
|
|
24551
24608
|
if (!body) {
|
|
@@ -24554,7 +24611,7 @@ var FormMessage = React65.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
24554
24611
|
return /* @__PURE__ */ jsx69("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
|
|
24555
24612
|
});
|
|
24556
24613
|
FormMessage.displayName = "FormMessage";
|
|
24557
|
-
var FormInput =
|
|
24614
|
+
var FormInput = React66.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx69(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx69(
|
|
24558
24615
|
FormField,
|
|
24559
24616
|
{
|
|
24560
24617
|
name,
|
|
@@ -24565,7 +24622,7 @@ var FormInput = React65.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */
|
|
|
24565
24622
|
}
|
|
24566
24623
|
) }));
|
|
24567
24624
|
FormInput.displayName = "FormInput";
|
|
24568
|
-
var FormCheckbox =
|
|
24625
|
+
var FormCheckbox = React66.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx69(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx69(
|
|
24569
24626
|
FormField,
|
|
24570
24627
|
{
|
|
24571
24628
|
name,
|
|
@@ -24589,9 +24646,9 @@ var FormCheckbox = React65.forwardRef(({ name, ...props }, ref) => /* @__PURE__
|
|
|
24589
24646
|
}
|
|
24590
24647
|
) }));
|
|
24591
24648
|
FormCheckbox.displayName = "FormCheckbox";
|
|
24592
|
-
var FormActions =
|
|
24649
|
+
var FormActions = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx69("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
|
|
24593
24650
|
FormActions.displayName = "FormActions";
|
|
24594
|
-
var FormSubmitButton =
|
|
24651
|
+
var FormSubmitButton = React66.forwardRef(
|
|
24595
24652
|
({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx69(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx69(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
|
|
24596
24653
|
);
|
|
24597
24654
|
FormSubmitButton.displayName = "FormSubmitButton";
|
|
@@ -24881,7 +24938,7 @@ var VARIANT_STYLES_ALERT = {
|
|
|
24881
24938
|
};
|
|
24882
24939
|
|
|
24883
24940
|
// src/contexts/translation-adapter.tsx
|
|
24884
|
-
import * as
|
|
24941
|
+
import * as React68 from "react";
|
|
24885
24942
|
import { jsx as jsx74 } from "react/jsx-runtime";
|
|
24886
24943
|
function isUnresolvedTranslation2(value, namespace, key) {
|
|
24887
24944
|
return value === key || value === `${namespace}.${key}`;
|
|
@@ -24906,7 +24963,7 @@ function useTranslations(namespace) {
|
|
|
24906
24963
|
const nextIntlBridge = useNextIntlBridge();
|
|
24907
24964
|
const internalLocale = useUnderverseLocale();
|
|
24908
24965
|
const internalT = useUnderverseTranslations(namespace);
|
|
24909
|
-
return
|
|
24966
|
+
return React68.useCallback((key, params) => {
|
|
24910
24967
|
if (nextIntlBridge) {
|
|
24911
24968
|
const nextIntlResult = nextIntlBridge.translate(namespace, key, params);
|
|
24912
24969
|
if (nextIntlResult.translated && !isUnresolvedTranslation2(nextIntlResult.translated, namespace, key)) {
|
|
@@ -24931,7 +24988,7 @@ function useLocale2() {
|
|
|
24931
24988
|
}
|
|
24932
24989
|
|
|
24933
24990
|
// src/components/UEditor/UEditor.tsx
|
|
24934
|
-
import
|
|
24991
|
+
import React84, { useEffect as useEffect38, useImperativeHandle as useImperativeHandle4, useMemo as useMemo25, useRef as useRef37 } from "react";
|
|
24935
24992
|
import { useEditor, EditorContent } from "@tiptap/react";
|
|
24936
24993
|
|
|
24937
24994
|
// src/components/UEditor/extensions.ts
|
|
@@ -25091,7 +25148,7 @@ import { Node as Node3, mergeAttributes as mergeAttributes2 } from "@tiptap/core
|
|
|
25091
25148
|
import { ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
|
|
25092
25149
|
|
|
25093
25150
|
// src/components/UEditor/BookmarkView.tsx
|
|
25094
|
-
import
|
|
25151
|
+
import React69, { useEffect as useEffect31, useState as useState42 } from "react";
|
|
25095
25152
|
import { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
|
|
25096
25153
|
import { AlertCircle as AlertCircle4, ExternalLink as ExternalLink2, Globe as Globe2, RefreshCw } from "lucide-react";
|
|
25097
25154
|
import { jsx as jsx77, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
@@ -25101,8 +25158,8 @@ var BookmarkView = ({ node, updateAttributes, selected, editor }) => {
|
|
|
25101
25158
|
const [loading2, setLoading] = useState42(false);
|
|
25102
25159
|
const [error, setError] = useState42(false);
|
|
25103
25160
|
const [retryToken, setRetryToken] = useState42(0);
|
|
25104
|
-
const fetchedRetryTokenRef =
|
|
25105
|
-
const fetchRequestIdRef =
|
|
25161
|
+
const fetchedRetryTokenRef = React69.useRef(-1);
|
|
25162
|
+
const fetchRequestIdRef = React69.useRef(0);
|
|
25106
25163
|
useEffect31(() => {
|
|
25107
25164
|
if (title && retryToken === 0) return;
|
|
25108
25165
|
if (fetchedRetryTokenRef.current === retryToken) return;
|
|
@@ -25967,7 +26024,7 @@ import { common, createLowlight } from "lowlight";
|
|
|
25967
26024
|
import { Extension } from "@tiptap/core";
|
|
25968
26025
|
import Suggestion from "@tiptap/suggestion";
|
|
25969
26026
|
import { ReactRenderer } from "@tiptap/react";
|
|
25970
|
-
import
|
|
26027
|
+
import React71, { forwardRef as forwardRef14, useEffect as useEffect33, useImperativeHandle, useRef as useRef28 } from "react";
|
|
25971
26028
|
import {
|
|
25972
26029
|
FileCode as FileCode2,
|
|
25973
26030
|
Heading1,
|
|
@@ -26045,9 +26102,9 @@ var DEFAULT_MESSAGES = {
|
|
|
26045
26102
|
formRadioDesc: "Insert an interactive radio button field"
|
|
26046
26103
|
};
|
|
26047
26104
|
function useResettingIndex2(resetToken) {
|
|
26048
|
-
const [state, setState] =
|
|
26105
|
+
const [state, setState] = React71.useState({ resetToken, index: 0 });
|
|
26049
26106
|
const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
|
|
26050
|
-
const setSelectedIndex =
|
|
26107
|
+
const setSelectedIndex = React71.useCallback((nextIndex) => {
|
|
26051
26108
|
setState((prev) => {
|
|
26052
26109
|
const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
|
|
26053
26110
|
return {
|
|
@@ -27270,13 +27327,13 @@ import { Extension as Extension3 } from "@tiptap/core";
|
|
|
27270
27327
|
import Suggestion2 from "@tiptap/suggestion";
|
|
27271
27328
|
import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
|
|
27272
27329
|
import { PluginKey as PluginKey2 } from "@tiptap/pm/state";
|
|
27273
|
-
import
|
|
27330
|
+
import React72, { forwardRef as forwardRef15, useImperativeHandle as useImperativeHandle2 } from "react";
|
|
27274
27331
|
import { Smile as Smile2 } from "lucide-react";
|
|
27275
27332
|
import { jsx as jsx82, jsxs as jsxs67 } from "react/jsx-runtime";
|
|
27276
27333
|
function useResettingIndex3(resetToken) {
|
|
27277
|
-
const [state, setState] =
|
|
27334
|
+
const [state, setState] = React72.useState({ resetToken, index: 0 });
|
|
27278
27335
|
const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
|
|
27279
|
-
const setSelectedIndex =
|
|
27336
|
+
const setSelectedIndex = React72.useCallback((nextIndex) => {
|
|
27280
27337
|
setState((prev) => {
|
|
27281
27338
|
const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
|
|
27282
27339
|
return {
|
|
@@ -27425,7 +27482,7 @@ import { Extension as Extension4 } from "@tiptap/core";
|
|
|
27425
27482
|
import Suggestion3 from "@tiptap/suggestion";
|
|
27426
27483
|
import { ReactRenderer as ReactRenderer3 } from "@tiptap/react";
|
|
27427
27484
|
import { PluginKey as PluginKey3 } from "@tiptap/pm/state";
|
|
27428
|
-
import
|
|
27485
|
+
import React73, { forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3 } from "react";
|
|
27429
27486
|
import { Sigma } from "lucide-react";
|
|
27430
27487
|
import { jsx as jsx83, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
27431
27488
|
var FORMULA_FUNCTIONS = [
|
|
@@ -27474,8 +27531,8 @@ function buildFormulaSuggestionItems({ query }) {
|
|
|
27474
27531
|
}
|
|
27475
27532
|
var FormulaSuggestionList = forwardRef16((props, ref) => {
|
|
27476
27533
|
const t = useSmartTranslations("UEditor");
|
|
27477
|
-
const [selectedIndex, setSelectedIndex] =
|
|
27478
|
-
|
|
27534
|
+
const [selectedIndex, setSelectedIndex] = React73.useState(0);
|
|
27535
|
+
React73.useEffect(() => {
|
|
27479
27536
|
setSelectedIndex(0);
|
|
27480
27537
|
}, [props.items]);
|
|
27481
27538
|
useImperativeHandle3(ref, () => ({
|
|
@@ -28876,7 +28933,7 @@ var UEditorTable = Table3.extend({
|
|
|
28876
28933
|
var table_align_default = UEditorTable;
|
|
28877
28934
|
|
|
28878
28935
|
// src/components/UEditor/CodeBlockView.tsx
|
|
28879
|
-
import
|
|
28936
|
+
import React75, { useState as useState45 } from "react";
|
|
28880
28937
|
import { NodeViewWrapper as NodeViewWrapper7, NodeViewContent as NodeViewContent2 } from "@tiptap/react";
|
|
28881
28938
|
import { Check as Check11, Copy as Copy2, ChevronDown as ChevronDown7 } from "lucide-react";
|
|
28882
28939
|
import { Fragment as Fragment27, jsx as jsx85, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
@@ -28903,10 +28960,10 @@ var CodeBlockView = ({
|
|
|
28903
28960
|
}) => {
|
|
28904
28961
|
const [copied, setCopied] = useState45(false);
|
|
28905
28962
|
const [isDropdownOpen, setIsDropdownOpen] = useState45(false);
|
|
28906
|
-
const timeoutRef =
|
|
28963
|
+
const timeoutRef = React75.useRef(null);
|
|
28907
28964
|
const currentLangValue = node.attrs.language || "text";
|
|
28908
28965
|
const currentLangLabel = LANGUAGES.find((lang) => lang.value === currentLangValue)?.label || "Plain Text";
|
|
28909
|
-
|
|
28966
|
+
React75.useEffect(() => {
|
|
28910
28967
|
return () => {
|
|
28911
28968
|
if (timeoutRef.current) {
|
|
28912
28969
|
clearTimeout(timeoutRef.current);
|
|
@@ -29411,7 +29468,7 @@ function buildUEditorExtensions({
|
|
|
29411
29468
|
}
|
|
29412
29469
|
|
|
29413
29470
|
// src/components/UEditor/toolbar.tsx
|
|
29414
|
-
import
|
|
29471
|
+
import React78, { useRef as useRef32, useState as useState47 } from "react";
|
|
29415
29472
|
import { useEditorState } from "@tiptap/react";
|
|
29416
29473
|
import {
|
|
29417
29474
|
AlignCenter,
|
|
@@ -30322,7 +30379,7 @@ function fileToDataUrl2(file) {
|
|
|
30322
30379
|
function formatTableInsertLabel(template, rows, cols) {
|
|
30323
30380
|
return template.replace("{rows}", String(rows)).replace("{cols}", String(cols));
|
|
30324
30381
|
}
|
|
30325
|
-
var ToolbarButton =
|
|
30382
|
+
var ToolbarButton = React78.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
|
|
30326
30383
|
const button = /* @__PURE__ */ jsx88(
|
|
30327
30384
|
"button",
|
|
30328
30385
|
{
|
|
@@ -30359,7 +30416,7 @@ var TableInsertGrid = ({
|
|
|
30359
30416
|
previewTemplate,
|
|
30360
30417
|
onInsert
|
|
30361
30418
|
}) => {
|
|
30362
|
-
const [selection, setSelection] =
|
|
30419
|
+
const [selection, setSelection] = React78.useState({ rows: 3, cols: 3 });
|
|
30363
30420
|
const maxRows = 8;
|
|
30364
30421
|
const maxCols = 8;
|
|
30365
30422
|
return /* @__PURE__ */ jsxs73("div", { className: "mb-2 rounded-xl border border-border/60 bg-muted/20 p-2", children: [
|
|
@@ -30445,10 +30502,10 @@ var EditorToolbar = ({
|
|
|
30445
30502
|
const currentHighlightColor = normalizeStyleValue(editor.getAttributes("highlight").color) || "";
|
|
30446
30503
|
const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
|
|
30447
30504
|
const currentLetterSpacing = normalizeStyleValue(textStyleAttrs.letterSpacing);
|
|
30448
|
-
const availableFontFamilies =
|
|
30449
|
-
const availableFontSizes =
|
|
30450
|
-
const availableLineHeights =
|
|
30451
|
-
const availableLetterSpacings =
|
|
30505
|
+
const availableFontFamilies = React78.useMemo(() => fontFamilies ?? getDefaultFontFamilies(t), [fontFamilies, t]);
|
|
30506
|
+
const availableFontSizes = React78.useMemo(() => fontSizes ?? getDefaultFontSizes(), [fontSizes]);
|
|
30507
|
+
const availableLineHeights = React78.useMemo(() => lineHeights ?? getDefaultLineHeights(), [lineHeights]);
|
|
30508
|
+
const availableLetterSpacings = React78.useMemo(() => letterSpacings ?? getDefaultLetterSpacings(), [letterSpacings]);
|
|
30452
30509
|
const currentFontFamilyDisplayValue = currentFontFamily.split(",")[0]?.trim() ?? currentFontFamily;
|
|
30453
30510
|
const currentFontFamilyLabel = availableFontFamilies.find((option) => normalizeStyleValue(option.value) === currentFontFamily)?.label ?? (currentFontFamilyDisplayValue || t("toolbar.fontDefault"));
|
|
30454
30511
|
const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? "13";
|
|
@@ -33517,7 +33574,7 @@ async function prepareUEditorContentForSave({
|
|
|
33517
33574
|
}
|
|
33518
33575
|
|
|
33519
33576
|
// src/components/UEditor/table-controls.tsx
|
|
33520
|
-
import
|
|
33577
|
+
import React80 from "react";
|
|
33521
33578
|
|
|
33522
33579
|
// node_modules/prosemirror-model/dist/index.js
|
|
33523
33580
|
function findDiffStart(a, b, pos) {
|
|
@@ -38436,17 +38493,17 @@ function getSelectedCell(editor) {
|
|
|
38436
38493
|
}
|
|
38437
38494
|
function TableControls({ editor, containerRef }) {
|
|
38438
38495
|
const t = useSmartTranslations("UEditor");
|
|
38439
|
-
const [layout, setLayout] =
|
|
38440
|
-
const [dragPreview, setDragPreview] =
|
|
38441
|
-
const [hoverState, setHoverState] =
|
|
38442
|
-
const [openMenuKey, setOpenMenuKey] =
|
|
38443
|
-
const layoutRef =
|
|
38444
|
-
const dragStateRef =
|
|
38445
|
-
const syncFrameRef =
|
|
38446
|
-
|
|
38496
|
+
const [layout, setLayout] = React80.useState(null);
|
|
38497
|
+
const [dragPreview, setDragPreview] = React80.useState(null);
|
|
38498
|
+
const [hoverState, setHoverState] = React80.useState(DEFAULT_TABLE_HOVER_STATE);
|
|
38499
|
+
const [openMenuKey, setOpenMenuKey] = React80.useState(null);
|
|
38500
|
+
const layoutRef = React80.useRef(null);
|
|
38501
|
+
const dragStateRef = React80.useRef(null);
|
|
38502
|
+
const syncFrameRef = React80.useRef(null);
|
|
38503
|
+
React80.useEffect(() => {
|
|
38447
38504
|
layoutRef.current = layout;
|
|
38448
38505
|
}, [layout]);
|
|
38449
|
-
const syncFromCell =
|
|
38506
|
+
const syncFromCell = React80.useCallback((cell) => {
|
|
38450
38507
|
const surface = containerRef.current;
|
|
38451
38508
|
if (!surface || !cell) {
|
|
38452
38509
|
setLayout(null);
|
|
@@ -38454,23 +38511,23 @@ function TableControls({ editor, containerRef }) {
|
|
|
38454
38511
|
}
|
|
38455
38512
|
setLayout(buildTableControlLayout(editor, surface, cell));
|
|
38456
38513
|
}, [containerRef, editor]);
|
|
38457
|
-
const syncFromSelection =
|
|
38514
|
+
const syncFromSelection = React80.useCallback(() => {
|
|
38458
38515
|
syncFromCell(getSelectedCell(editor));
|
|
38459
38516
|
}, [editor, syncFromCell]);
|
|
38460
|
-
const scheduleSyncFromSelection =
|
|
38517
|
+
const scheduleSyncFromSelection = React80.useCallback(() => {
|
|
38461
38518
|
if (syncFrameRef.current !== null) return;
|
|
38462
38519
|
syncFrameRef.current = window.requestAnimationFrame(() => {
|
|
38463
38520
|
syncFrameRef.current = null;
|
|
38464
38521
|
syncFromSelection();
|
|
38465
38522
|
});
|
|
38466
38523
|
}, [syncFromSelection]);
|
|
38467
|
-
|
|
38524
|
+
React80.useEffect(() => () => {
|
|
38468
38525
|
if (syncFrameRef.current !== null) {
|
|
38469
38526
|
window.cancelAnimationFrame(syncFrameRef.current);
|
|
38470
38527
|
syncFrameRef.current = null;
|
|
38471
38528
|
}
|
|
38472
38529
|
}, []);
|
|
38473
|
-
const refreshCurrentLayout =
|
|
38530
|
+
const refreshCurrentLayout = React80.useCallback(() => {
|
|
38474
38531
|
setLayout((prev) => {
|
|
38475
38532
|
if (!prev) return prev;
|
|
38476
38533
|
const surface = containerRef.current;
|
|
@@ -38480,12 +38537,12 @@ function TableControls({ editor, containerRef }) {
|
|
|
38480
38537
|
return cell ? buildTableControlLayout(editor, surface, cell) : null;
|
|
38481
38538
|
});
|
|
38482
38539
|
}, [containerRef, editor]);
|
|
38483
|
-
const clearDrag =
|
|
38540
|
+
const clearDrag = React80.useCallback(() => {
|
|
38484
38541
|
dragStateRef.current = null;
|
|
38485
38542
|
setDragPreview(null);
|
|
38486
38543
|
document.body.style.cursor = "";
|
|
38487
38544
|
}, []);
|
|
38488
|
-
const updateHoverState =
|
|
38545
|
+
const updateHoverState = React80.useCallback((event) => {
|
|
38489
38546
|
const activeLayout = layoutRef.current;
|
|
38490
38547
|
const surface = containerRef.current;
|
|
38491
38548
|
if (!activeLayout || !surface || dragStateRef.current) {
|
|
@@ -38501,7 +38558,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
38501
38558
|
return areTableHoverStatesEqual(prev, nextState) ? prev : nextState;
|
|
38502
38559
|
});
|
|
38503
38560
|
}, [containerRef]);
|
|
38504
|
-
|
|
38561
|
+
React80.useEffect(() => {
|
|
38505
38562
|
const proseMirror = editor.view.dom;
|
|
38506
38563
|
const surface = containerRef.current;
|
|
38507
38564
|
if (!surface) return void 0;
|
|
@@ -38552,37 +38609,37 @@ function TableControls({ editor, containerRef }) {
|
|
|
38552
38609
|
editor.off("update", refreshCurrentLayout);
|
|
38553
38610
|
};
|
|
38554
38611
|
}, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection, updateHoverState]);
|
|
38555
|
-
const runAtCellPos =
|
|
38612
|
+
const runAtCellPos = React80.useCallback((cellPos, command, options) => {
|
|
38556
38613
|
const result = runTableCommandAtCellPos(editor, cellPos, command);
|
|
38557
38614
|
if (options?.sync !== false) {
|
|
38558
38615
|
scheduleSyncFromSelection();
|
|
38559
38616
|
}
|
|
38560
38617
|
return result;
|
|
38561
38618
|
}, [editor, scheduleSyncFromSelection]);
|
|
38562
|
-
const runAtActiveCell =
|
|
38619
|
+
const runAtActiveCell = React80.useCallback((command, options) => {
|
|
38563
38620
|
return runAtCellPos(layoutRef.current?.cellPos ?? null, command, options);
|
|
38564
38621
|
}, [runAtCellPos]);
|
|
38565
|
-
const duplicateRowAt =
|
|
38622
|
+
const duplicateRowAt = React80.useCallback((rowIndex, cellPos) => {
|
|
38566
38623
|
const result = duplicateTableRowAt(editor, rowIndex, cellPos);
|
|
38567
38624
|
scheduleSyncFromSelection();
|
|
38568
38625
|
return result;
|
|
38569
38626
|
}, [editor, scheduleSyncFromSelection]);
|
|
38570
|
-
const clearRowAt =
|
|
38627
|
+
const clearRowAt = React80.useCallback((rowIndex, cellPos) => {
|
|
38571
38628
|
const result = clearTableRowAt(editor, rowIndex, cellPos);
|
|
38572
38629
|
scheduleSyncFromSelection();
|
|
38573
38630
|
return result;
|
|
38574
38631
|
}, [editor, scheduleSyncFromSelection]);
|
|
38575
|
-
const duplicateColumnAt =
|
|
38632
|
+
const duplicateColumnAt = React80.useCallback((columnIndex, cellPos) => {
|
|
38576
38633
|
const result = duplicateTableColumnAt(editor, columnIndex, cellPos);
|
|
38577
38634
|
scheduleSyncFromSelection();
|
|
38578
38635
|
return result;
|
|
38579
38636
|
}, [editor, scheduleSyncFromSelection]);
|
|
38580
|
-
const clearColumnAt =
|
|
38637
|
+
const clearColumnAt = React80.useCallback((columnIndex, cellPos) => {
|
|
38581
38638
|
const result = clearTableColumnAt(editor, columnIndex, cellPos);
|
|
38582
38639
|
scheduleSyncFromSelection();
|
|
38583
38640
|
return result;
|
|
38584
38641
|
}, [editor, scheduleSyncFromSelection]);
|
|
38585
|
-
const expandTableBy =
|
|
38642
|
+
const expandTableBy = React80.useCallback((rows, cols) => {
|
|
38586
38643
|
const activeCellPos = layoutRef.current?.cellPos ?? editor.state.selection.from;
|
|
38587
38644
|
const result = expandTableFromCell(editor, activeCellPos, rows, cols);
|
|
38588
38645
|
scheduleSyncFromSelection();
|
|
@@ -38591,19 +38648,19 @@ function TableControls({ editor, containerRef }) {
|
|
|
38591
38648
|
const canExpandTable = Boolean(layout);
|
|
38592
38649
|
const controlsVisible = dragPreview !== null;
|
|
38593
38650
|
const tableMenuOpen = openMenuKey === "table";
|
|
38594
|
-
const startAddColumnDrag =
|
|
38651
|
+
const startAddColumnDrag = React80.useCallback(() => {
|
|
38595
38652
|
setOpenMenuKey(null);
|
|
38596
38653
|
dragStateRef.current = { kind: "add-column", previewCols: 1 };
|
|
38597
38654
|
setDragPreview({ kind: "add-column", previewCols: 1 });
|
|
38598
38655
|
document.body.style.cursor = "ew-resize";
|
|
38599
38656
|
}, []);
|
|
38600
|
-
const startAddRowDrag =
|
|
38657
|
+
const startAddRowDrag = React80.useCallback(() => {
|
|
38601
38658
|
setOpenMenuKey(null);
|
|
38602
38659
|
dragStateRef.current = { kind: "add-row", previewRows: 1 };
|
|
38603
38660
|
setDragPreview({ kind: "add-row", previewRows: 1 });
|
|
38604
38661
|
document.body.style.cursor = "ns-resize";
|
|
38605
38662
|
}, []);
|
|
38606
|
-
const startRowDrag =
|
|
38663
|
+
const startRowDrag = React80.useCallback((rowHandle) => {
|
|
38607
38664
|
setOpenMenuKey(null);
|
|
38608
38665
|
dragStateRef.current = {
|
|
38609
38666
|
kind: "row",
|
|
@@ -38620,7 +38677,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
38620
38677
|
});
|
|
38621
38678
|
document.body.style.cursor = "grabbing";
|
|
38622
38679
|
}, []);
|
|
38623
|
-
const startColumnDrag =
|
|
38680
|
+
const startColumnDrag = React80.useCallback((columnHandle) => {
|
|
38624
38681
|
setOpenMenuKey(null);
|
|
38625
38682
|
dragStateRef.current = {
|
|
38626
38683
|
kind: "column",
|
|
@@ -38637,7 +38694,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
38637
38694
|
});
|
|
38638
38695
|
document.body.style.cursor = "grabbing";
|
|
38639
38696
|
}, []);
|
|
38640
|
-
|
|
38697
|
+
React80.useEffect(() => {
|
|
38641
38698
|
const handleMouseMove2 = (event) => {
|
|
38642
38699
|
const dragState = dragStateRef.current;
|
|
38643
38700
|
const activeLayout = layoutRef.current;
|
|
@@ -38726,7 +38783,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
38726
38783
|
window.removeEventListener("blur", clearDrag);
|
|
38727
38784
|
};
|
|
38728
38785
|
}, [clearDrag, containerRef, editor, expandTableBy, scheduleSyncFromSelection]);
|
|
38729
|
-
const menuItems =
|
|
38786
|
+
const menuItems = React80.useMemo(() => {
|
|
38730
38787
|
if (!layout) return [];
|
|
38731
38788
|
return [
|
|
38732
38789
|
{
|
|
@@ -38794,7 +38851,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
38794
38851
|
}
|
|
38795
38852
|
];
|
|
38796
38853
|
}, [layout, runAtActiveCell, t]);
|
|
38797
|
-
const getRowHandleMenuItems =
|
|
38854
|
+
const getRowHandleMenuItems = React80.useCallback((rowHandle) => [
|
|
38798
38855
|
{
|
|
38799
38856
|
label: t("tableMenu.addRowBefore"),
|
|
38800
38857
|
icon: ArrowUp2,
|
|
@@ -38822,7 +38879,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
38822
38879
|
destructive: true
|
|
38823
38880
|
}
|
|
38824
38881
|
], [clearRowAt, duplicateRowAt, runAtCellPos, t]);
|
|
38825
|
-
const getColumnHandleMenuItems =
|
|
38882
|
+
const getColumnHandleMenuItems = React80.useCallback((columnHandle) => [
|
|
38826
38883
|
{
|
|
38827
38884
|
label: t("tableMenu.addColumnBefore"),
|
|
38828
38885
|
icon: ArrowLeft2,
|
|
@@ -39103,10 +39160,10 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
|
|
|
39103
39160
|
);
|
|
39104
39161
|
|
|
39105
39162
|
// src/components/UEditor/use-table-interactions.ts
|
|
39106
|
-
import
|
|
39163
|
+
import React82, { useEffect as useEffect37, useRef as useRef35 } from "react";
|
|
39107
39164
|
|
|
39108
39165
|
// src/components/UEditor/use-table-row-resize.ts
|
|
39109
|
-
import
|
|
39166
|
+
import React81, { useRef as useRef34 } from "react";
|
|
39110
39167
|
function useTableRowResize({
|
|
39111
39168
|
editor,
|
|
39112
39169
|
setHoveredTableCell,
|
|
@@ -39116,15 +39173,15 @@ function useTableRowResize({
|
|
|
39116
39173
|
scheduleTableLayoutSync
|
|
39117
39174
|
}) {
|
|
39118
39175
|
const stateRef = useRef34(null);
|
|
39119
|
-
const syncActiveGuide =
|
|
39176
|
+
const syncActiveGuide = React81.useCallback(() => {
|
|
39120
39177
|
const state = stateRef.current;
|
|
39121
39178
|
if (!state) return false;
|
|
39122
39179
|
setHoveredTableCell(state.cellElement);
|
|
39123
39180
|
showRowGuide(state.tableElement, state.rowElement, state.cellElement, state.pendingHeight);
|
|
39124
39181
|
return true;
|
|
39125
39182
|
}, [setHoveredTableCell, showRowGuide]);
|
|
39126
|
-
const isResizing =
|
|
39127
|
-
const beginResize =
|
|
39183
|
+
const isResizing = React81.useCallback(() => stateRef.current !== null, []);
|
|
39184
|
+
const beginResize = React81.useCallback((event, table, row, cell) => {
|
|
39128
39185
|
if (!editor || !isRowResizeHotspot(cell, event.clientX, event.clientY)) {
|
|
39129
39186
|
return false;
|
|
39130
39187
|
}
|
|
@@ -39150,7 +39207,7 @@ function useTableRowResize({
|
|
|
39150
39207
|
event.stopPropagation();
|
|
39151
39208
|
return true;
|
|
39152
39209
|
}, [editor, setHoveredTableCell, showRowGuide]);
|
|
39153
|
-
const handlePointerMove =
|
|
39210
|
+
const handlePointerMove = React81.useCallback((event) => {
|
|
39154
39211
|
const state = stateRef.current;
|
|
39155
39212
|
if (!state) return;
|
|
39156
39213
|
const nextHeight = Math.max(
|
|
@@ -39167,7 +39224,7 @@ function useTableRowResize({
|
|
|
39167
39224
|
document.body.style.cursor = "row-resize";
|
|
39168
39225
|
showRowGuide(state.tableElement, state.rowElement, state.cellElement, nextHeight);
|
|
39169
39226
|
}, [showRowGuide]);
|
|
39170
|
-
const handlePointerUp =
|
|
39227
|
+
const handlePointerUp = React81.useCallback((event) => {
|
|
39171
39228
|
if (!editor) return;
|
|
39172
39229
|
const state = stateRef.current;
|
|
39173
39230
|
if (!state) return;
|
|
@@ -39191,7 +39248,7 @@ function useTableRowResize({
|
|
|
39191
39248
|
clearAllTableResizeHover();
|
|
39192
39249
|
scheduleTableLayoutSync();
|
|
39193
39250
|
}, [clearAllTableResizeHover, clearHoveredTableCell, editor, scheduleTableLayoutSync]);
|
|
39194
|
-
const cancelResize =
|
|
39251
|
+
const cancelResize = React81.useCallback(() => {
|
|
39195
39252
|
if (!stateRef.current) return;
|
|
39196
39253
|
stateRef.current = null;
|
|
39197
39254
|
document.body.style.cursor = "";
|
|
@@ -39199,7 +39256,7 @@ function useTableRowResize({
|
|
|
39199
39256
|
clearAllTableResizeHover();
|
|
39200
39257
|
scheduleTableLayoutSync();
|
|
39201
39258
|
}, [clearAllTableResizeHover, clearHoveredTableCell, scheduleTableLayoutSync]);
|
|
39202
|
-
const cleanup =
|
|
39259
|
+
const cleanup = React81.useCallback(() => {
|
|
39203
39260
|
stateRef.current = null;
|
|
39204
39261
|
document.body.style.cursor = "";
|
|
39205
39262
|
}, []);
|
|
@@ -39224,16 +39281,16 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39224
39281
|
const activeTableCellRef = useRef35(null);
|
|
39225
39282
|
const suppressActiveCellHighlightRef = useRef35(false);
|
|
39226
39283
|
const tableLayoutSyncFrameRef = useRef35(null);
|
|
39227
|
-
const getProseMirrorElement =
|
|
39284
|
+
const getProseMirrorElement = React82.useCallback(() => {
|
|
39228
39285
|
return editorContentRef.current?.querySelector(".ProseMirror");
|
|
39229
39286
|
}, []);
|
|
39230
|
-
const setEditorResizeCursor =
|
|
39287
|
+
const setEditorResizeCursor = React82.useCallback((cursor) => {
|
|
39231
39288
|
const proseMirror = getProseMirrorElement();
|
|
39232
39289
|
if (proseMirror) {
|
|
39233
39290
|
proseMirror.style.cursor = cursor;
|
|
39234
39291
|
}
|
|
39235
39292
|
}, [getProseMirrorElement]);
|
|
39236
|
-
const hideColumnGuide =
|
|
39293
|
+
const hideColumnGuide = React82.useCallback(() => {
|
|
39237
39294
|
editorContentRef.current?.classList.remove("resize-cursor");
|
|
39238
39295
|
getProseMirrorElement()?.classList.remove("resize-cursor");
|
|
39239
39296
|
const guide = tableColumnGuideRef.current;
|
|
@@ -39241,7 +39298,7 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39241
39298
|
guide.style.opacity = "0";
|
|
39242
39299
|
}
|
|
39243
39300
|
}, [getProseMirrorElement]);
|
|
39244
|
-
const hideRowGuide =
|
|
39301
|
+
const hideRowGuide = React82.useCallback(() => {
|
|
39245
39302
|
editorContentRef.current?.classList.remove("resize-row-cursor");
|
|
39246
39303
|
getProseMirrorElement()?.classList.remove("resize-row-cursor");
|
|
39247
39304
|
const guide = tableRowGuideRef.current;
|
|
@@ -39249,12 +39306,12 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39249
39306
|
guide.style.opacity = "0";
|
|
39250
39307
|
}
|
|
39251
39308
|
}, [getProseMirrorElement]);
|
|
39252
|
-
const clearAllTableResizeHover =
|
|
39309
|
+
const clearAllTableResizeHover = React82.useCallback(() => {
|
|
39253
39310
|
setEditorResizeCursor("");
|
|
39254
39311
|
hideColumnGuide();
|
|
39255
39312
|
hideRowGuide();
|
|
39256
39313
|
}, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
|
|
39257
|
-
const updateActiveCellHighlight =
|
|
39314
|
+
const updateActiveCellHighlight = React82.useCallback((cell) => {
|
|
39258
39315
|
const surface = editorContentRef.current;
|
|
39259
39316
|
const highlight = activeTableCellHighlightRef.current;
|
|
39260
39317
|
if (!highlight) return;
|
|
@@ -39269,7 +39326,7 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39269
39326
|
highlight.style.width = `${metrics.width}px`;
|
|
39270
39327
|
highlight.style.height = `${metrics.height}px`;
|
|
39271
39328
|
}, []);
|
|
39272
|
-
const scheduleTableLayoutSync =
|
|
39329
|
+
const scheduleTableLayoutSync = React82.useCallback(() => {
|
|
39273
39330
|
if (tableLayoutSyncFrameRef.current !== null) return;
|
|
39274
39331
|
tableLayoutSyncFrameRef.current = window.requestAnimationFrame(() => {
|
|
39275
39332
|
tableLayoutSyncFrameRef.current = null;
|
|
@@ -39277,7 +39334,7 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39277
39334
|
editorContentRef.current?.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT));
|
|
39278
39335
|
});
|
|
39279
39336
|
}, [updateActiveCellHighlight]);
|
|
39280
|
-
const setActiveTableCell =
|
|
39337
|
+
const setActiveTableCell = React82.useCallback((cell) => {
|
|
39281
39338
|
if (activeTableCellRef.current === cell) {
|
|
39282
39339
|
updateActiveCellHighlight(cell);
|
|
39283
39340
|
return;
|
|
@@ -39285,17 +39342,17 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39285
39342
|
activeTableCellRef.current = cell;
|
|
39286
39343
|
updateActiveCellHighlight(activeTableCellRef.current);
|
|
39287
39344
|
}, [updateActiveCellHighlight]);
|
|
39288
|
-
const clearActiveTableCell =
|
|
39345
|
+
const clearActiveTableCell = React82.useCallback(() => {
|
|
39289
39346
|
activeTableCellRef.current = null;
|
|
39290
39347
|
updateActiveCellHighlight(null);
|
|
39291
39348
|
}, [updateActiveCellHighlight]);
|
|
39292
|
-
const setHoveredTableCell =
|
|
39349
|
+
const setHoveredTableCell = React82.useCallback((cell) => {
|
|
39293
39350
|
hoveredTableCellRef.current = cell;
|
|
39294
39351
|
}, []);
|
|
39295
|
-
const clearHoveredTableCell =
|
|
39352
|
+
const clearHoveredTableCell = React82.useCallback(() => {
|
|
39296
39353
|
hoveredTableCellRef.current = null;
|
|
39297
39354
|
}, []);
|
|
39298
|
-
const showColumnGuide =
|
|
39355
|
+
const showColumnGuide = React82.useCallback((table, row, cell) => {
|
|
39299
39356
|
const surface = editorContentRef.current;
|
|
39300
39357
|
const guide = tableColumnGuideRef.current;
|
|
39301
39358
|
if (!surface || !guide) return;
|
|
@@ -39309,7 +39366,7 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39309
39366
|
getProseMirrorElement()?.classList.add("resize-cursor");
|
|
39310
39367
|
setEditorResizeCursor("col-resize");
|
|
39311
39368
|
}, [getProseMirrorElement, setEditorResizeCursor]);
|
|
39312
|
-
const showRowGuide =
|
|
39369
|
+
const showRowGuide = React82.useCallback((table, row, cell, previewHeight) => {
|
|
39313
39370
|
const surface = editorContentRef.current;
|
|
39314
39371
|
const guide = tableRowGuideRef.current;
|
|
39315
39372
|
if (!surface || !guide) return;
|
|
@@ -39341,7 +39398,7 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39341
39398
|
clearAllTableResizeHover,
|
|
39342
39399
|
scheduleTableLayoutSync
|
|
39343
39400
|
});
|
|
39344
|
-
const syncActiveTableCellFromSelection =
|
|
39401
|
+
const syncActiveTableCellFromSelection = React82.useCallback(() => {
|
|
39345
39402
|
if (!editor) return;
|
|
39346
39403
|
if (!editor.isFocused) {
|
|
39347
39404
|
clearActiveTableCell();
|
|
@@ -39524,7 +39581,7 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
39524
39581
|
}
|
|
39525
39582
|
|
|
39526
39583
|
// src/components/UEditor/menu-bar.tsx
|
|
39527
|
-
import
|
|
39584
|
+
import React83, { useMemo as useMemo24, useRef as useRef36, useState as useState49 } from "react";
|
|
39528
39585
|
import { useEditorState as useEditorState3 } from "@tiptap/react";
|
|
39529
39586
|
import {
|
|
39530
39587
|
AlignCenter as AlignCenter4,
|
|
@@ -39736,7 +39793,7 @@ function renderMenuItems(items) {
|
|
|
39736
39793
|
case "sub":
|
|
39737
39794
|
return /* @__PURE__ */ jsx95(DropdownMenuSub, { label: item.label, icon: item.icon, disabled: item.disabled, children: renderMenuItems(item.items) }, i);
|
|
39738
39795
|
case "custom":
|
|
39739
|
-
return /* @__PURE__ */ jsx95(
|
|
39796
|
+
return /* @__PURE__ */ jsx95(React83.Fragment, { children: item.render() }, item.key);
|
|
39740
39797
|
}
|
|
39741
39798
|
});
|
|
39742
39799
|
}
|
|
@@ -40112,7 +40169,7 @@ function buildTableMenuItems(t, editor, onInsertTable) {
|
|
|
40112
40169
|
}
|
|
40113
40170
|
];
|
|
40114
40171
|
}
|
|
40115
|
-
var MenuBarTrigger =
|
|
40172
|
+
var MenuBarTrigger = React83.forwardRef(
|
|
40116
40173
|
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx95(
|
|
40117
40174
|
"button",
|
|
40118
40175
|
{
|
|
@@ -40579,7 +40636,7 @@ function getFormulaRangePickHighlight(container, pickState) {
|
|
|
40579
40636
|
|
|
40580
40637
|
// src/components/UEditor/UEditor.tsx
|
|
40581
40638
|
import { jsx as jsx96, jsxs as jsxs80 } from "react/jsx-runtime";
|
|
40582
|
-
var UEditor =
|
|
40639
|
+
var UEditor = React84.forwardRef(({
|
|
40583
40640
|
content = "",
|
|
40584
40641
|
onChange,
|
|
40585
40642
|
onHtmlChange,
|
|
@@ -40625,8 +40682,8 @@ var UEditor = React83.forwardRef(({
|
|
|
40625
40682
|
const scheduledFormulaRecalculateRef = useRef37(false);
|
|
40626
40683
|
const formulaRangePickRef = useRef37(null);
|
|
40627
40684
|
const formulaRangeSurfaceRef = useRef37(null);
|
|
40628
|
-
const [formulaRangeHighlight, setFormulaRangeHighlight] =
|
|
40629
|
-
const scheduleFormulaRecalculate =
|
|
40685
|
+
const [formulaRangeHighlight, setFormulaRangeHighlight] = React84.useState(null);
|
|
40686
|
+
const scheduleFormulaRecalculate = React84.useCallback((editor2, options) => {
|
|
40630
40687
|
if (editor2.isDestroyed || scheduledFormulaRecalculateRef.current) return;
|
|
40631
40688
|
if (!options?.force && isEditingTableFormulaText(editor2)) return;
|
|
40632
40689
|
scheduledFormulaRecalculateRef.current = true;
|
|
@@ -40666,7 +40723,7 @@ var UEditor = React83.forwardRef(({
|
|
|
40666
40723
|
],
|
|
40667
40724
|
[effectivePlaceholder, t, maxCharacters, uploadImage, resolvedUploadFile, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable, fetchMetadata, extraExtensions]
|
|
40668
40725
|
);
|
|
40669
|
-
const syncFormulaRangeHighlight =
|
|
40726
|
+
const syncFormulaRangeHighlight = React84.useCallback((pickState) => {
|
|
40670
40727
|
const container = formulaRangeSurfaceRef.current;
|
|
40671
40728
|
setFormulaRangeHighlight(container && pickState ? getFormulaRangePickHighlight(container, pickState) : null);
|
|
40672
40729
|
}, []);
|
|
@@ -41094,11 +41151,14 @@ export {
|
|
|
41094
41151
|
cn as cnLocal,
|
|
41095
41152
|
extractImageSrcsFromHtml,
|
|
41096
41153
|
getAnimationStyles,
|
|
41154
|
+
getEmojiImageUrl,
|
|
41155
|
+
getEmojiUnifiedCode,
|
|
41097
41156
|
getUnderverseMessages,
|
|
41098
41157
|
injectAnimationStyles,
|
|
41099
41158
|
loading,
|
|
41100
41159
|
normalizeImageUrl,
|
|
41101
41160
|
prepareUEditorContentForSave,
|
|
41161
|
+
setEmojiBaseUrl,
|
|
41102
41162
|
shadcnAnimationStyles,
|
|
41103
41163
|
underverseMessages,
|
|
41104
41164
|
useFormField,
|