@ikatec/nebula-react 1.4.0-beta.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ikatec-nebula-react-1.4.0.tgz +0 -0
- package/dist/index.d.mts +132 -5
- package/dist/index.d.ts +132 -5
- package/dist/index.js +1450 -239
- package/dist/index.mjs +1297 -96
- package/package.json +10 -3
- package/dist/ikatec-nebula-react-1.4.0-beta.1.tgz +0 -0
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React35 = require('react');
|
|
4
4
|
var reactSlot = require('@radix-ui/react-slot');
|
|
5
5
|
var classVarianceAuthority = require('class-variance-authority');
|
|
6
6
|
var tailwindMerge = require('tailwind-merge');
|
|
@@ -30,6 +30,10 @@ var locale = require('react-day-picker/locale');
|
|
|
30
30
|
var mask = require('@react-input/mask');
|
|
31
31
|
var SliderPrimitive = require('@radix-ui/react-slider');
|
|
32
32
|
var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
|
|
33
|
+
var core = require('@dnd-kit/core');
|
|
34
|
+
var sortable = require('@dnd-kit/sortable');
|
|
35
|
+
var utilities = require('@dnd-kit/utilities');
|
|
36
|
+
var reactVirtual = require('@tanstack/react-virtual');
|
|
33
37
|
|
|
34
38
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
35
39
|
|
|
@@ -51,7 +55,7 @@ function _interopNamespace(e) {
|
|
|
51
55
|
return Object.freeze(n);
|
|
52
56
|
}
|
|
53
57
|
|
|
54
|
-
var
|
|
58
|
+
var React35__namespace = /*#__PURE__*/_interopNamespace(React35);
|
|
55
59
|
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
|
|
56
60
|
var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
|
|
57
61
|
var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
|
|
@@ -116,11 +120,11 @@ function cn(...inputs) {
|
|
|
116
120
|
return customTwMerge(nebulaClass, clsx(inputs));
|
|
117
121
|
}
|
|
118
122
|
var processChildren = (children) => {
|
|
119
|
-
return
|
|
123
|
+
return React35__namespace.default.Children.map(children, (child) => {
|
|
120
124
|
if (typeof child === "string") {
|
|
121
125
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds px-2", children: child });
|
|
122
126
|
}
|
|
123
|
-
if (
|
|
127
|
+
if (React35__namespace.default.isValidElement(child) && child.type === React35__namespace.default.Fragment) {
|
|
124
128
|
return processChildren(child.props.children);
|
|
125
129
|
}
|
|
126
130
|
return child;
|
|
@@ -212,7 +216,7 @@ var buttonVariantsConfig = classVarianceAuthority.cva(
|
|
|
212
216
|
}
|
|
213
217
|
}
|
|
214
218
|
);
|
|
215
|
-
var Button =
|
|
219
|
+
var Button = React35__namespace.forwardRef(
|
|
216
220
|
({
|
|
217
221
|
className,
|
|
218
222
|
variant: variant3,
|
|
@@ -277,7 +281,7 @@ var badgeVariantsConfig = classVarianceAuthority.cva(
|
|
|
277
281
|
}
|
|
278
282
|
}
|
|
279
283
|
);
|
|
280
|
-
var Badge =
|
|
284
|
+
var Badge = React35__namespace.forwardRef(
|
|
281
285
|
({ className, variant: variant3, size: size4, ...props }, ref) => {
|
|
282
286
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
283
287
|
"div",
|
|
@@ -361,7 +365,7 @@ var alertVariantsConfig = classVarianceAuthority.cva(
|
|
|
361
365
|
}
|
|
362
366
|
);
|
|
363
367
|
var alertVariants = extractVariants(variants);
|
|
364
|
-
var Alert =
|
|
368
|
+
var Alert = React35__namespace.forwardRef(
|
|
365
369
|
({ className, variant: variant3, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
366
370
|
"div",
|
|
367
371
|
{
|
|
@@ -373,7 +377,7 @@ var Alert = React8__namespace.forwardRef(
|
|
|
373
377
|
)
|
|
374
378
|
);
|
|
375
379
|
Alert.displayName = "Alert";
|
|
376
|
-
var AlertTitle =
|
|
380
|
+
var AlertTitle = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
377
381
|
"h5",
|
|
378
382
|
{
|
|
379
383
|
ref,
|
|
@@ -382,7 +386,7 @@ var AlertTitle = React8__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
382
386
|
}
|
|
383
387
|
));
|
|
384
388
|
AlertTitle.displayName = "AlertTitle";
|
|
385
|
-
var AlertDescription =
|
|
389
|
+
var AlertDescription = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
386
390
|
"div",
|
|
387
391
|
{
|
|
388
392
|
ref,
|
|
@@ -391,7 +395,7 @@ var AlertDescription = React8__namespace.forwardRef(({ className, ...props }, re
|
|
|
391
395
|
}
|
|
392
396
|
));
|
|
393
397
|
AlertDescription.displayName = "AlertDescription";
|
|
394
|
-
var AlertButton =
|
|
398
|
+
var AlertButton = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
395
399
|
"button",
|
|
396
400
|
{
|
|
397
401
|
ref,
|
|
@@ -402,9 +406,9 @@ var AlertButton = React8__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
402
406
|
AlertButton.displayName = "AlertButton";
|
|
403
407
|
var Popover = PopoverPrimitive__namespace.Root;
|
|
404
408
|
var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
|
|
405
|
-
var PopoverContent =
|
|
409
|
+
var PopoverContent = React35__namespace.forwardRef(
|
|
406
410
|
({ className, align = "center", sideOffset = 4, portal = false, ...props }, ref) => {
|
|
407
|
-
const Comp = portal ? PopoverPrimitive__namespace.Portal :
|
|
411
|
+
const Comp = portal ? PopoverPrimitive__namespace.Portal : React35__namespace.Fragment;
|
|
408
412
|
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
409
413
|
PopoverPrimitive__namespace.Content,
|
|
410
414
|
{
|
|
@@ -432,7 +436,7 @@ var PopoverContent = React8__namespace.forwardRef(
|
|
|
432
436
|
}
|
|
433
437
|
);
|
|
434
438
|
PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
|
|
435
|
-
var Label =
|
|
439
|
+
var Label = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
436
440
|
LabelPrimitive__namespace.Root,
|
|
437
441
|
{
|
|
438
442
|
ref,
|
|
@@ -444,7 +448,7 @@ var Label = React8__namespace.forwardRef(({ className, ...props }, ref) => /* @_
|
|
|
444
448
|
}
|
|
445
449
|
));
|
|
446
450
|
Label.displayName = LabelPrimitive__namespace.Root.displayName;
|
|
447
|
-
var Table =
|
|
451
|
+
var Table = React35__namespace.forwardRef(({ className, noCardWrapper = false, ...props }, ref) => {
|
|
448
452
|
if (noCardWrapper) {
|
|
449
453
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
450
454
|
"table",
|
|
@@ -465,9 +469,9 @@ var Table = React8__namespace.forwardRef(({ className, noCardWrapper = false, ..
|
|
|
465
469
|
) });
|
|
466
470
|
});
|
|
467
471
|
Table.displayName = "Table";
|
|
468
|
-
var TableHeader =
|
|
472
|
+
var TableHeader = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
|
|
469
473
|
TableHeader.displayName = "TableHeader";
|
|
470
|
-
var TableBody =
|
|
474
|
+
var TableBody = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
471
475
|
"tbody",
|
|
472
476
|
{
|
|
473
477
|
ref,
|
|
@@ -476,7 +480,7 @@ var TableBody = React8__namespace.forwardRef(({ className, ...props }, ref) => /
|
|
|
476
480
|
}
|
|
477
481
|
));
|
|
478
482
|
TableBody.displayName = "TableBody";
|
|
479
|
-
var TableFooter =
|
|
483
|
+
var TableFooter = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
480
484
|
"tfoot",
|
|
481
485
|
{
|
|
482
486
|
ref,
|
|
@@ -507,7 +511,7 @@ var tableRowVariantsConfig = classVarianceAuthority.cva(
|
|
|
507
511
|
}
|
|
508
512
|
}
|
|
509
513
|
);
|
|
510
|
-
var TableRow =
|
|
514
|
+
var TableRow = React35__namespace.forwardRef(
|
|
511
515
|
({ className, variant: variant3 = "first", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
512
516
|
"tr",
|
|
513
517
|
{
|
|
@@ -518,7 +522,7 @@ var TableRow = React8__namespace.forwardRef(
|
|
|
518
522
|
)
|
|
519
523
|
);
|
|
520
524
|
TableRow.displayName = "TableRow";
|
|
521
|
-
var TableHead =
|
|
525
|
+
var TableHead = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
522
526
|
"th",
|
|
523
527
|
{
|
|
524
528
|
ref,
|
|
@@ -530,7 +534,7 @@ var TableHead = React8__namespace.forwardRef(({ className, ...props }, ref) => /
|
|
|
530
534
|
}
|
|
531
535
|
));
|
|
532
536
|
TableHead.displayName = "TableHead";
|
|
533
|
-
var TableCell =
|
|
537
|
+
var TableCell = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
534
538
|
"td",
|
|
535
539
|
{
|
|
536
540
|
ref,
|
|
@@ -542,14 +546,14 @@ var TableCell = React8__namespace.forwardRef(({ className, ...props }, ref) => /
|
|
|
542
546
|
}
|
|
543
547
|
));
|
|
544
548
|
TableCell.displayName = "TableCell";
|
|
545
|
-
var TableCaption =
|
|
549
|
+
var TableCaption = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: cn("mt-4 text-sm", className), ...props }));
|
|
546
550
|
TableCaption.displayName = "TableCaption";
|
|
547
551
|
var DropdownMenu = DropdownMenuPrimitive__namespace.Root;
|
|
548
552
|
var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
|
|
549
553
|
var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
|
|
550
554
|
var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
|
|
551
555
|
var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
|
|
552
|
-
var DropdownMenuSubTrigger =
|
|
556
|
+
var DropdownMenuSubTrigger = React35__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
553
557
|
DropdownMenuPrimitive__namespace.SubTrigger,
|
|
554
558
|
{
|
|
555
559
|
ref,
|
|
@@ -581,8 +585,8 @@ var DropdownMenuSubTrigger = React8__namespace.forwardRef(({ className, inset, c
|
|
|
581
585
|
}
|
|
582
586
|
));
|
|
583
587
|
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
|
|
584
|
-
var DropdownMenuSubContent =
|
|
585
|
-
const Comp = portal ? DropdownMenuPrimitive__namespace.Portal :
|
|
588
|
+
var DropdownMenuSubContent = React35__namespace.forwardRef(({ className, portal = false, ...props }, ref) => {
|
|
589
|
+
const Comp = portal ? DropdownMenuPrimitive__namespace.Portal : React35__namespace.Fragment;
|
|
586
590
|
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
587
591
|
DropdownMenuPrimitive__namespace.SubContent,
|
|
588
592
|
{
|
|
@@ -607,8 +611,8 @@ var DropdownMenuSubContent = React8__namespace.forwardRef(({ className, portal =
|
|
|
607
611
|
) });
|
|
608
612
|
});
|
|
609
613
|
DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
|
|
610
|
-
var DropdownMenuContent =
|
|
611
|
-
const Comp = portal ? DropdownMenuPrimitive__namespace.Portal :
|
|
614
|
+
var DropdownMenuContent = React35__namespace.forwardRef(({ className, sideOffset = 4, portal = false, ...props }, ref) => {
|
|
615
|
+
const Comp = portal ? DropdownMenuPrimitive__namespace.Portal : React35__namespace.Fragment;
|
|
612
616
|
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
613
617
|
DropdownMenuPrimitive__namespace.Content,
|
|
614
618
|
{
|
|
@@ -636,7 +640,7 @@ var DropdownMenuContent = React8__namespace.forwardRef(({ className, sideOffset
|
|
|
636
640
|
) });
|
|
637
641
|
});
|
|
638
642
|
DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
|
|
639
|
-
var DropdownMenuItem =
|
|
643
|
+
var DropdownMenuItem = React35__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
640
644
|
DropdownMenuPrimitive__namespace.Item,
|
|
641
645
|
{
|
|
642
646
|
ref,
|
|
@@ -669,7 +673,7 @@ var DropdownMenuItem = React8__namespace.forwardRef(({ className, inset, ...prop
|
|
|
669
673
|
}
|
|
670
674
|
));
|
|
671
675
|
DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
|
|
672
|
-
var DropdownMenuCheckboxItem =
|
|
676
|
+
var DropdownMenuCheckboxItem = React35__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
673
677
|
DropdownMenuPrimitive__namespace.CheckboxItem,
|
|
674
678
|
{
|
|
675
679
|
ref,
|
|
@@ -707,7 +711,7 @@ var DropdownMenuCheckboxItem = React8__namespace.forwardRef(({ className, childr
|
|
|
707
711
|
}
|
|
708
712
|
));
|
|
709
713
|
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
|
|
710
|
-
var DropdownMenuRadioItem =
|
|
714
|
+
var DropdownMenuRadioItem = React35__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
711
715
|
DropdownMenuPrimitive__namespace.RadioItem,
|
|
712
716
|
{
|
|
713
717
|
ref,
|
|
@@ -743,7 +747,7 @@ var DropdownMenuRadioItem = React8__namespace.forwardRef(({ className, children,
|
|
|
743
747
|
}
|
|
744
748
|
));
|
|
745
749
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
|
|
746
|
-
var DropdownMenuLabel =
|
|
750
|
+
var DropdownMenuLabel = React35__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
747
751
|
DropdownMenuPrimitive__namespace.Label,
|
|
748
752
|
{
|
|
749
753
|
ref,
|
|
@@ -763,7 +767,7 @@ var DropdownMenuLabel = React8__namespace.forwardRef(({ className, inset, ...pro
|
|
|
763
767
|
}
|
|
764
768
|
));
|
|
765
769
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
|
|
766
|
-
var DropdownMenuSeparator =
|
|
770
|
+
var DropdownMenuSeparator = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
767
771
|
DropdownMenuPrimitive__namespace.Separator,
|
|
768
772
|
{
|
|
769
773
|
ref,
|
|
@@ -813,7 +817,7 @@ var separatorVariantsConfig = classVarianceAuthority.cva("shrink-0 bg-separator-
|
|
|
813
817
|
}
|
|
814
818
|
});
|
|
815
819
|
var separatorVariants = extractVariants(variants3);
|
|
816
|
-
var Separator2 =
|
|
820
|
+
var Separator2 = React35__namespace.forwardRef(
|
|
817
821
|
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
|
|
818
822
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
819
823
|
SeparatorPrimitive__namespace.Root,
|
|
@@ -862,7 +866,7 @@ var spaceVariantsConfig = classVarianceAuthority.cva("flex items-start justify-s
|
|
|
862
866
|
direction: "row"
|
|
863
867
|
}
|
|
864
868
|
});
|
|
865
|
-
var Space =
|
|
869
|
+
var Space = React35__namespace.default.forwardRef(
|
|
866
870
|
({ size: size4, direction: direction2, className, children }, ref) => {
|
|
867
871
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
868
872
|
"div",
|
|
@@ -1811,21 +1815,21 @@ var messages19 = /* @__PURE__ */ new Map([
|
|
|
1811
1815
|
["es" /* ES */, esMessages],
|
|
1812
1816
|
["pt-BR" /* PT_BR */, ptBrMessages]
|
|
1813
1817
|
]);
|
|
1814
|
-
var NebulaI18nContext =
|
|
1818
|
+
var NebulaI18nContext = React35.createContext(
|
|
1815
1819
|
null
|
|
1816
1820
|
);
|
|
1817
1821
|
var NebulaI18nProvider = ({
|
|
1818
1822
|
children,
|
|
1819
1823
|
customI18nStorageKey
|
|
1820
1824
|
}) => {
|
|
1821
|
-
const storageKey =
|
|
1825
|
+
const storageKey = React35.useMemo(
|
|
1822
1826
|
() => customI18nStorageKey ?? localStorageKey,
|
|
1823
1827
|
[customI18nStorageKey]
|
|
1824
1828
|
);
|
|
1825
|
-
const [messages20, setMessages] =
|
|
1829
|
+
const [messages20, setMessages] = React35.useState(
|
|
1826
1830
|
messages19.get(getNebulaLanguage()) ?? messages19.get("en-US" /* EN_US */)
|
|
1827
1831
|
);
|
|
1828
|
-
const handleStorageChange =
|
|
1832
|
+
const handleStorageChange = React35.useCallback(
|
|
1829
1833
|
({ detail }) => {
|
|
1830
1834
|
if (detail.key === storageKey) {
|
|
1831
1835
|
setMessages(
|
|
@@ -1835,7 +1839,7 @@ var NebulaI18nProvider = ({
|
|
|
1835
1839
|
},
|
|
1836
1840
|
[storageKey]
|
|
1837
1841
|
);
|
|
1838
|
-
|
|
1842
|
+
React35.useEffect(() => {
|
|
1839
1843
|
if (typeof window === "undefined") {
|
|
1840
1844
|
return;
|
|
1841
1845
|
}
|
|
@@ -1858,7 +1862,7 @@ var NebulaI18nProvider = ({
|
|
|
1858
1862
|
);
|
|
1859
1863
|
};
|
|
1860
1864
|
}, [handleStorageChange]);
|
|
1861
|
-
|
|
1865
|
+
React35.useEffect(() => {
|
|
1862
1866
|
if (typeof window === "undefined") {
|
|
1863
1867
|
return;
|
|
1864
1868
|
}
|
|
@@ -1881,7 +1885,7 @@ var NebulaI18nProvider = ({
|
|
|
1881
1885
|
);
|
|
1882
1886
|
};
|
|
1883
1887
|
var useNebulaI18n = () => {
|
|
1884
|
-
const context =
|
|
1888
|
+
const context = React35.useContext(NebulaI18nContext);
|
|
1885
1889
|
if (!context) {
|
|
1886
1890
|
throw new Error("useNebulaI18n must be used within a NebulaI18nProvider");
|
|
1887
1891
|
}
|
|
@@ -1896,10 +1900,10 @@ var Pagination = ({
|
|
|
1896
1900
|
...props
|
|
1897
1901
|
}) => {
|
|
1898
1902
|
const { messages: messages20 } = useNebulaI18n();
|
|
1899
|
-
const totalPages =
|
|
1903
|
+
const totalPages = React35.useMemo(() => {
|
|
1900
1904
|
return Math.ceil(total / (pageSize || 1));
|
|
1901
1905
|
}, [total, pageSize]);
|
|
1902
|
-
const handleChangePage =
|
|
1906
|
+
const handleChangePage = React35.useCallback(
|
|
1903
1907
|
(page2) => {
|
|
1904
1908
|
if (page2 < 1 || page2 > totalPages) {
|
|
1905
1909
|
return;
|
|
@@ -1908,7 +1912,7 @@ var Pagination = ({
|
|
|
1908
1912
|
},
|
|
1909
1913
|
[totalPages, onChangePage]
|
|
1910
1914
|
);
|
|
1911
|
-
const normalizedPage =
|
|
1915
|
+
const normalizedPage = React35.useMemo(() => {
|
|
1912
1916
|
if (page < 1) {
|
|
1913
1917
|
return 1;
|
|
1914
1918
|
}
|
|
@@ -1919,20 +1923,20 @@ var Pagination = ({
|
|
|
1919
1923
|
}, [page, totalPages]);
|
|
1920
1924
|
const disabledPreviousPage = normalizedPage === 1 || totalPages === 0;
|
|
1921
1925
|
const disabledNextPage = normalizedPage === totalPages || totalPages === 0;
|
|
1922
|
-
const lastPageSize =
|
|
1926
|
+
const lastPageSize = React35.useMemo(() => {
|
|
1923
1927
|
if (totalPages === 0) {
|
|
1924
1928
|
return 0;
|
|
1925
1929
|
}
|
|
1926
1930
|
const lastPageStart = (totalPages - 1) * pageSize;
|
|
1927
1931
|
return total - lastPageStart;
|
|
1928
1932
|
}, [totalPages, pageSize, total]);
|
|
1929
|
-
const totalResultsLabel =
|
|
1933
|
+
const totalResultsLabel = React35.useMemo(() => {
|
|
1930
1934
|
if (page === totalPages) {
|
|
1931
1935
|
return messages20.pagination.totalResultsLabel(lastPageSize, total);
|
|
1932
1936
|
}
|
|
1933
1937
|
return messages20.pagination.totalResultsLabel(pageSize, total);
|
|
1934
1938
|
}, [messages20.pagination, pageSize, total, page, totalPages, lastPageSize]);
|
|
1935
|
-
const currentPageLabel =
|
|
1939
|
+
const currentPageLabel = React35.useMemo(
|
|
1936
1940
|
() => messages20.pagination.currentPageLabel(normalizedPage, totalPages),
|
|
1937
1941
|
[messages20.pagination, normalizedPage, totalPages]
|
|
1938
1942
|
);
|
|
@@ -1981,7 +1985,7 @@ var Pagination = ({
|
|
|
1981
1985
|
);
|
|
1982
1986
|
};
|
|
1983
1987
|
Pagination.displayName = "Pagination";
|
|
1984
|
-
var PaginationContent =
|
|
1988
|
+
var PaginationContent = React35.forwardRef(
|
|
1985
1989
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1986
1990
|
"ul",
|
|
1987
1991
|
{
|
|
@@ -1995,7 +1999,7 @@ var PaginationContent = React8.forwardRef(
|
|
|
1995
1999
|
)
|
|
1996
2000
|
);
|
|
1997
2001
|
PaginationContent.displayName = "PaginationContent";
|
|
1998
|
-
var PaginationItem =
|
|
2002
|
+
var PaginationItem = React35.forwardRef(
|
|
1999
2003
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2000
2004
|
"li",
|
|
2001
2005
|
{
|
|
@@ -2114,7 +2118,7 @@ var tagVariantsConfig = classVarianceAuthority.cva("w-2 h-2 block rounded-sm", {
|
|
|
2114
2118
|
color
|
|
2115
2119
|
}
|
|
2116
2120
|
});
|
|
2117
|
-
var Tag =
|
|
2121
|
+
var Tag = React35__namespace.forwardRef(
|
|
2118
2122
|
({ className, color: color2, children, onDelete, ...props }, ref) => {
|
|
2119
2123
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2120
2124
|
"div",
|
|
@@ -2208,7 +2212,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
|
|
|
2208
2212
|
...props
|
|
2209
2213
|
}) => {
|
|
2210
2214
|
const { messages: messages20 } = useNebulaI18n();
|
|
2211
|
-
const customClassNames =
|
|
2215
|
+
const customClassNames = React35.useMemo(() => {
|
|
2212
2216
|
return {
|
|
2213
2217
|
control: (props2) => controlStyles(props2, isError),
|
|
2214
2218
|
placeholder: () => placeholderStyles,
|
|
@@ -2225,7 +2229,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
|
|
|
2225
2229
|
noOptionsMessage: () => noOptionsMessageStyles
|
|
2226
2230
|
};
|
|
2227
2231
|
}, [isError]);
|
|
2228
|
-
const customComponents =
|
|
2232
|
+
const customComponents = React35.useMemo(
|
|
2229
2233
|
() => ({
|
|
2230
2234
|
DropdownIndicator,
|
|
2231
2235
|
ClearIndicator,
|
|
@@ -2269,12 +2273,12 @@ var StyledAsyncCreatable = createStyledSelect(
|
|
|
2269
2273
|
AsyncCreatable__default.default,
|
|
2270
2274
|
"AsyncCreatable"
|
|
2271
2275
|
);
|
|
2272
|
-
var InputText =
|
|
2276
|
+
var InputText = React35__namespace.forwardRef(
|
|
2273
2277
|
({ className, isError = false, onClean, disabled, suffix, ...props }, ref) => {
|
|
2274
2278
|
const icon = "icon" in props ? props.icon : null;
|
|
2275
2279
|
const iconPlacement = "iconPlacement" in props || props.type !== "password" ? props.iconPlacement || "start" : null;
|
|
2276
2280
|
const initialInputType = props.type || "text";
|
|
2277
|
-
const [type, setType] =
|
|
2281
|
+
const [type, setType] = React35__namespace.useState(initialInputType);
|
|
2278
2282
|
const iconClass = {
|
|
2279
2283
|
"text-inputText-icon-danger": isError,
|
|
2280
2284
|
"text-inputText-icon-default focus:text-inputText-icon-focus": !isError && !props.value,
|
|
@@ -2382,7 +2386,7 @@ var Dialog = DialogPrimitive__namespace.Root;
|
|
|
2382
2386
|
var DialogTrigger = DialogPrimitive__namespace.Trigger;
|
|
2383
2387
|
var DialogPortal = DialogPrimitive__namespace.Portal;
|
|
2384
2388
|
var DialogClose = DialogPrimitive__namespace.Close;
|
|
2385
|
-
var DialogOverlay =
|
|
2389
|
+
var DialogOverlay = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2386
2390
|
DialogPrimitive__namespace.Overlay,
|
|
2387
2391
|
{
|
|
2388
2392
|
ref,
|
|
@@ -2401,9 +2405,9 @@ var DialogOverlay = React8__namespace.forwardRef(({ className, ...props }, ref)
|
|
|
2401
2405
|
}
|
|
2402
2406
|
));
|
|
2403
2407
|
DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
|
|
2404
|
-
var DialogContent =
|
|
2408
|
+
var DialogContent = React35__namespace.forwardRef(
|
|
2405
2409
|
({ className, children, portal = false, showClose = true, ...props }, ref) => {
|
|
2406
|
-
const Comp = portal ? DialogPortal :
|
|
2410
|
+
const Comp = portal ? DialogPortal : React35__namespace.Fragment;
|
|
2407
2411
|
return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { children: [
|
|
2408
2412
|
/* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
|
|
2409
2413
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -2482,7 +2486,7 @@ var DialogFooter = ({
|
|
|
2482
2486
|
...props
|
|
2483
2487
|
}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", className), ...props });
|
|
2484
2488
|
DialogFooter.displayName = "DialogFooter";
|
|
2485
|
-
var DialogTitle =
|
|
2489
|
+
var DialogTitle = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2486
2490
|
DialogPrimitive__namespace.Title,
|
|
2487
2491
|
{
|
|
2488
2492
|
ref,
|
|
@@ -2494,7 +2498,7 @@ var DialogTitle = React8__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
2494
2498
|
}
|
|
2495
2499
|
));
|
|
2496
2500
|
DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
|
|
2497
|
-
var DialogDescription =
|
|
2501
|
+
var DialogDescription = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2498
2502
|
DialogPrimitive__namespace.Description,
|
|
2499
2503
|
{
|
|
2500
2504
|
ref,
|
|
@@ -2506,7 +2510,7 @@ DialogDescription.displayName = DialogPrimitive__namespace.Description.displayNa
|
|
|
2506
2510
|
var AlertDialog = AlertDialogPrimitive__namespace.Root;
|
|
2507
2511
|
var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
|
|
2508
2512
|
var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
|
|
2509
|
-
var AlertDialogOverlay =
|
|
2513
|
+
var AlertDialogOverlay = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2510
2514
|
AlertDialogPrimitive__namespace.Overlay,
|
|
2511
2515
|
{
|
|
2512
2516
|
className: cn(
|
|
@@ -2518,8 +2522,8 @@ var AlertDialogOverlay = React8__namespace.forwardRef(({ className, ...props },
|
|
|
2518
2522
|
}
|
|
2519
2523
|
));
|
|
2520
2524
|
AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
|
|
2521
|
-
var AlertDialogContent =
|
|
2522
|
-
const Comp = portal ? AlertDialogPortal :
|
|
2525
|
+
var AlertDialogContent = React35__namespace.forwardRef(({ className, portal = false, ...props }, ref) => {
|
|
2526
|
+
const Comp = portal ? AlertDialogPortal : React35__namespace.Fragment;
|
|
2523
2527
|
return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { children: [
|
|
2524
2528
|
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
|
|
2525
2529
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2555,7 +2559,7 @@ var AlertDialogFooter = ({
|
|
|
2555
2559
|
...props
|
|
2556
2560
|
}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", className), ...props });
|
|
2557
2561
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
2558
|
-
var AlertDialogTitle =
|
|
2562
|
+
var AlertDialogTitle = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2559
2563
|
AlertDialogPrimitive__namespace.Title,
|
|
2560
2564
|
{
|
|
2561
2565
|
ref,
|
|
@@ -2567,7 +2571,7 @@ var AlertDialogTitle = React8__namespace.forwardRef(({ className, ...props }, re
|
|
|
2567
2571
|
}
|
|
2568
2572
|
));
|
|
2569
2573
|
AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
|
|
2570
|
-
var AlertDialogDescription =
|
|
2574
|
+
var AlertDialogDescription = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2571
2575
|
AlertDialogPrimitive__namespace.Description,
|
|
2572
2576
|
{
|
|
2573
2577
|
ref,
|
|
@@ -2576,7 +2580,7 @@ var AlertDialogDescription = React8__namespace.forwardRef(({ className, ...props
|
|
|
2576
2580
|
}
|
|
2577
2581
|
));
|
|
2578
2582
|
AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
|
|
2579
|
-
var AlertDialogAction =
|
|
2583
|
+
var AlertDialogAction = React35__namespace.forwardRef(({ children, className, variant: variant3, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2580
2584
|
AlertDialogPrimitive__namespace.Action,
|
|
2581
2585
|
{
|
|
2582
2586
|
ref,
|
|
@@ -2586,7 +2590,7 @@ var AlertDialogAction = React8__namespace.forwardRef(({ children, className, var
|
|
|
2586
2590
|
}
|
|
2587
2591
|
));
|
|
2588
2592
|
AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
|
|
2589
|
-
var AlertDialogCancel =
|
|
2593
|
+
var AlertDialogCancel = React35__namespace.forwardRef(({ children, className, variant: variant3 = "secondary", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2590
2594
|
AlertDialogPrimitive__namespace.Cancel,
|
|
2591
2595
|
{
|
|
2592
2596
|
ref,
|
|
@@ -2596,7 +2600,7 @@ var AlertDialogCancel = React8__namespace.forwardRef(({ children, className, var
|
|
|
2596
2600
|
}
|
|
2597
2601
|
));
|
|
2598
2602
|
AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
|
|
2599
|
-
var Checkbox =
|
|
2603
|
+
var Checkbox = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2600
2604
|
CheckboxPrimitive__namespace.Root,
|
|
2601
2605
|
{
|
|
2602
2606
|
ref,
|
|
@@ -2651,7 +2655,7 @@ var Drawer = DialogPrimitive__namespace.Root;
|
|
|
2651
2655
|
var DrawerTrigger = DialogPrimitive__namespace.Trigger;
|
|
2652
2656
|
var DrawerClose = DialogPrimitive__namespace.Close;
|
|
2653
2657
|
var DrawerPortal = DialogPrimitive__namespace.Portal;
|
|
2654
|
-
var DrawerOverlay =
|
|
2658
|
+
var DrawerOverlay = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2655
2659
|
DialogPrimitive__namespace.Overlay,
|
|
2656
2660
|
{
|
|
2657
2661
|
className: cn(
|
|
@@ -2676,8 +2680,8 @@ var DrawerVariants = classVarianceAuthority.cva("fixed flex flex-col z-50 shadow
|
|
|
2676
2680
|
side: "right"
|
|
2677
2681
|
}
|
|
2678
2682
|
});
|
|
2679
|
-
var DrawerContent =
|
|
2680
|
-
const Comp = portal ? DrawerPortal :
|
|
2683
|
+
var DrawerContent = React35__namespace.forwardRef(({ side = "right", className, portal = false, children, ...props }, ref) => {
|
|
2684
|
+
const Comp = portal ? DrawerPortal : React35__namespace.Fragment;
|
|
2681
2685
|
return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { children: [
|
|
2682
2686
|
/* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
|
|
2683
2687
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2743,7 +2747,7 @@ var DrawerFooter = ({
|
|
|
2743
2747
|
}
|
|
2744
2748
|
);
|
|
2745
2749
|
DrawerFooter.displayName = "DrawerFooter";
|
|
2746
|
-
var DrawerTitle =
|
|
2750
|
+
var DrawerTitle = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2747
2751
|
DialogPrimitive__namespace.Title,
|
|
2748
2752
|
{
|
|
2749
2753
|
ref,
|
|
@@ -2755,7 +2759,7 @@ var DrawerTitle = React8__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
2755
2759
|
}
|
|
2756
2760
|
));
|
|
2757
2761
|
DrawerTitle.displayName = DialogPrimitive__namespace.Title.displayName;
|
|
2758
|
-
var DrawerDescription =
|
|
2762
|
+
var DrawerDescription = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2759
2763
|
DialogPrimitive__namespace.Description,
|
|
2760
2764
|
{
|
|
2761
2765
|
ref,
|
|
@@ -2764,9 +2768,9 @@ var DrawerDescription = React8__namespace.forwardRef(({ className, ...props }, r
|
|
|
2764
2768
|
}
|
|
2765
2769
|
));
|
|
2766
2770
|
DrawerDescription.displayName = DialogPrimitive__namespace.Description.displayName;
|
|
2767
|
-
var Breadcrumb =
|
|
2771
|
+
var Breadcrumb = React35__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
|
|
2768
2772
|
Breadcrumb.displayName = "Breadcrumb";
|
|
2769
|
-
var BreadcrumbList =
|
|
2773
|
+
var BreadcrumbList = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2770
2774
|
"ol",
|
|
2771
2775
|
{
|
|
2772
2776
|
ref,
|
|
@@ -2778,7 +2782,7 @@ var BreadcrumbList = React8__namespace.forwardRef(({ className, ...props }, ref)
|
|
|
2778
2782
|
}
|
|
2779
2783
|
));
|
|
2780
2784
|
BreadcrumbList.displayName = "BreadcrumbList";
|
|
2781
|
-
var BreadcrumbItem =
|
|
2785
|
+
var BreadcrumbItem = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2782
2786
|
"li",
|
|
2783
2787
|
{
|
|
2784
2788
|
ref,
|
|
@@ -2790,7 +2794,7 @@ var BreadcrumbItem = React8__namespace.forwardRef(({ className, ...props }, ref)
|
|
|
2790
2794
|
}
|
|
2791
2795
|
));
|
|
2792
2796
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
2793
|
-
var BreadcrumbLink =
|
|
2797
|
+
var BreadcrumbLink = React35__namespace.forwardRef(({ asChild, className, ...props }, ref) => {
|
|
2794
2798
|
const Comp = asChild ? reactSlot.Slot : "a";
|
|
2795
2799
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2796
2800
|
Comp,
|
|
@@ -2805,7 +2809,7 @@ var BreadcrumbLink = React8__namespace.forwardRef(({ asChild, className, ...prop
|
|
|
2805
2809
|
);
|
|
2806
2810
|
});
|
|
2807
2811
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
2808
|
-
var BreadcrumbPage =
|
|
2812
|
+
var BreadcrumbPage = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2809
2813
|
"span",
|
|
2810
2814
|
{
|
|
2811
2815
|
ref,
|
|
@@ -2852,7 +2856,7 @@ var BreadcrumbEllipsis = ({
|
|
|
2852
2856
|
}
|
|
2853
2857
|
);
|
|
2854
2858
|
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
|
2855
|
-
var Switch =
|
|
2859
|
+
var Switch = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2856
2860
|
SwitchPrimitives__namespace.Root,
|
|
2857
2861
|
{
|
|
2858
2862
|
className: cn(
|
|
@@ -2911,7 +2915,7 @@ var Switch = React8__namespace.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
2911
2915
|
}
|
|
2912
2916
|
));
|
|
2913
2917
|
Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
|
|
2914
|
-
var Tooltip =
|
|
2918
|
+
var Tooltip = React35__namespace.forwardRef(
|
|
2915
2919
|
({
|
|
2916
2920
|
children,
|
|
2917
2921
|
content: content2,
|
|
@@ -2922,7 +2926,7 @@ var Tooltip = React8__namespace.forwardRef(
|
|
|
2922
2926
|
className,
|
|
2923
2927
|
...props
|
|
2924
2928
|
}, ref) => {
|
|
2925
|
-
const Comp = portal ? TooltipPrimitive__namespace.Portal :
|
|
2929
|
+
const Comp = portal ? TooltipPrimitive__namespace.Portal : React35__namespace.Fragment;
|
|
2926
2930
|
return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { children: [
|
|
2927
2931
|
/* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { type: "button", children }),
|
|
2928
2932
|
/* @__PURE__ */ jsxRuntime.jsx(Comp, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -3069,11 +3073,11 @@ AccordionContent.displayName = "AccordionContent";
|
|
|
3069
3073
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
3070
3074
|
AccordionTitle.displayName = "AccordionTitle";
|
|
3071
3075
|
AccordionDescription.displayName = "AccordionDescription";
|
|
3072
|
-
var TabsContext =
|
|
3073
|
-
var Tabs =
|
|
3076
|
+
var TabsContext = React35__namespace.createContext({});
|
|
3077
|
+
var Tabs = React35__namespace.forwardRef(({ isFitted, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { isFitted }, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props, children }) }));
|
|
3074
3078
|
Tabs.displayName = TabsPrimitive__namespace.Root.displayName;
|
|
3075
|
-
var TabsList =
|
|
3076
|
-
const { isFitted } =
|
|
3079
|
+
var TabsList = React35__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
3080
|
+
const { isFitted } = React35__namespace.useContext(TabsContext);
|
|
3077
3081
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3078
3082
|
TabsPrimitive__namespace.List,
|
|
3079
3083
|
{
|
|
@@ -3094,8 +3098,8 @@ var TabsList = React8__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
|
3094
3098
|
);
|
|
3095
3099
|
});
|
|
3096
3100
|
TabsList.displayName = TabsPrimitive__namespace.List.displayName;
|
|
3097
|
-
var TabsTrigger =
|
|
3098
|
-
const { isFitted } =
|
|
3101
|
+
var TabsTrigger = React35__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
3102
|
+
const { isFitted } = React35__namespace.useContext(TabsContext);
|
|
3099
3103
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3100
3104
|
TabsPrimitive__namespace.Trigger,
|
|
3101
3105
|
{
|
|
@@ -3134,7 +3138,7 @@ var TabsTrigger = React8__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
3134
3138
|
);
|
|
3135
3139
|
});
|
|
3136
3140
|
TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
|
|
3137
|
-
var TabsContent =
|
|
3141
|
+
var TabsContent = React35__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3138
3142
|
TabsPrimitive__namespace.Content,
|
|
3139
3143
|
{
|
|
3140
3144
|
ref,
|
|
@@ -3198,7 +3202,7 @@ function ToastComponent({
|
|
|
3198
3202
|
options,
|
|
3199
3203
|
t
|
|
3200
3204
|
}) {
|
|
3201
|
-
const CustomIcon =
|
|
3205
|
+
const CustomIcon = React35__namespace.default.isValidElement(options?.icon) ? React35__namespace.default.cloneElement(options.icon, {
|
|
3202
3206
|
className: cn("text-toast-icon-default", options.icon.props.className),
|
|
3203
3207
|
size: 20
|
|
3204
3208
|
}) : null;
|
|
@@ -3324,15 +3328,15 @@ var toast = {
|
|
|
3324
3328
|
custom,
|
|
3325
3329
|
promise
|
|
3326
3330
|
};
|
|
3327
|
-
var ActionBar =
|
|
3331
|
+
var ActionBar = React35__namespace.forwardRef(({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { modal: false, ...props }));
|
|
3328
3332
|
ActionBar.displayName = "ActionBar";
|
|
3329
|
-
var ActionBarTrigger =
|
|
3333
|
+
var ActionBarTrigger = React35__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props }));
|
|
3330
3334
|
ActionBarTrigger.displayName = "ActionBarTrigger";
|
|
3331
3335
|
var ActionBarPortal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { ...props });
|
|
3332
3336
|
ActionBarPortal.displayName = "ActionBarPortal";
|
|
3333
|
-
var ActionBarClose =
|
|
3337
|
+
var ActionBarClose = React35__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { ref, ...props }));
|
|
3334
3338
|
ActionBarClose.displayName = "ActionBarClose";
|
|
3335
|
-
var ActionBarButton =
|
|
3339
|
+
var ActionBarButton = React35__namespace.forwardRef(
|
|
3336
3340
|
({ className, ...props }, ref) => {
|
|
3337
3341
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3338
3342
|
Button,
|
|
@@ -3347,7 +3351,7 @@ var ActionBarButton = React8__namespace.forwardRef(
|
|
|
3347
3351
|
}
|
|
3348
3352
|
);
|
|
3349
3353
|
ActionBarButton.displayName = "ActionBarButton";
|
|
3350
|
-
var ActionBarDivider =
|
|
3354
|
+
var ActionBarDivider = React35__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
3351
3355
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3352
3356
|
Separator2,
|
|
3353
3357
|
{
|
|
@@ -3359,8 +3363,8 @@ var ActionBarDivider = React8__namespace.forwardRef(({ className, ...props }, re
|
|
|
3359
3363
|
);
|
|
3360
3364
|
});
|
|
3361
3365
|
ActionBarDivider.displayName = "ActionBarDivider";
|
|
3362
|
-
var ActionBarContent =
|
|
3363
|
-
const Comp = portal ? ActionBarPortal :
|
|
3366
|
+
var ActionBarContent = React35__namespace.forwardRef(({ className, children, portal = false, ...props }, ref) => {
|
|
3367
|
+
const Comp = portal ? ActionBarPortal : React35__namespace.Fragment;
|
|
3364
3368
|
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3365
3369
|
DialogPrimitive__namespace.Content,
|
|
3366
3370
|
{
|
|
@@ -3383,9 +3387,9 @@ var ActionBarContent = React8__namespace.forwardRef(({ className, children, port
|
|
|
3383
3387
|
) });
|
|
3384
3388
|
});
|
|
3385
3389
|
ActionBarContent.displayName = "ActionBarContent";
|
|
3386
|
-
var Heading =
|
|
3390
|
+
var Heading = React35.forwardRef(
|
|
3387
3391
|
({ level, className, ...rest }, ref) => {
|
|
3388
|
-
const element =
|
|
3392
|
+
const element = React35.useMemo(
|
|
3389
3393
|
() => ({
|
|
3390
3394
|
1: "h1",
|
|
3391
3395
|
2: "h2",
|
|
@@ -3396,7 +3400,7 @@ var Heading = React8.forwardRef(
|
|
|
3396
3400
|
})[level],
|
|
3397
3401
|
[level]
|
|
3398
3402
|
);
|
|
3399
|
-
const headingStyles =
|
|
3403
|
+
const headingStyles = React35.useMemo(
|
|
3400
3404
|
() => ({
|
|
3401
3405
|
1: "text-typography-heading-1 text-heading-1 tracking-heading-1 font-heading-1 leading-heading-1",
|
|
3402
3406
|
2: "text-typography-heading-2 text-heading-2 tracking-heading-2 font-heading-2 leading-heading-2",
|
|
@@ -3408,7 +3412,7 @@ var Heading = React8.forwardRef(
|
|
|
3408
3412
|
[level]
|
|
3409
3413
|
);
|
|
3410
3414
|
if (!element) return null;
|
|
3411
|
-
return
|
|
3415
|
+
return React35__namespace.default.createElement(element, {
|
|
3412
3416
|
...rest,
|
|
3413
3417
|
ref,
|
|
3414
3418
|
className: cn(headingStyles, className)
|
|
@@ -3416,7 +3420,7 @@ var Heading = React8.forwardRef(
|
|
|
3416
3420
|
}
|
|
3417
3421
|
);
|
|
3418
3422
|
Heading.displayName = "Heading";
|
|
3419
|
-
var Paragraph =
|
|
3423
|
+
var Paragraph = React35.forwardRef(
|
|
3420
3424
|
({ size: size4 = "md", className, ...rest }, ref) => {
|
|
3421
3425
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3422
3426
|
"p",
|
|
@@ -3436,7 +3440,7 @@ var Paragraph = React8.forwardRef(
|
|
|
3436
3440
|
}
|
|
3437
3441
|
);
|
|
3438
3442
|
Paragraph.displayName = "Paragraph";
|
|
3439
|
-
var Caption =
|
|
3443
|
+
var Caption = React35.forwardRef(
|
|
3440
3444
|
({ className, ...rest }, ref) => {
|
|
3441
3445
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3442
3446
|
"caption",
|
|
@@ -3452,7 +3456,7 @@ var Caption = React8.forwardRef(
|
|
|
3452
3456
|
}
|
|
3453
3457
|
);
|
|
3454
3458
|
Caption.displayName = "Caption";
|
|
3455
|
-
var Link =
|
|
3459
|
+
var Link = React35.forwardRef(
|
|
3456
3460
|
({ className, size: size4 = "md", asChild = false, ...rest }, ref) => {
|
|
3457
3461
|
const classNames = cn(
|
|
3458
3462
|
"cursor-pointer",
|
|
@@ -3508,7 +3512,7 @@ var FlagComponent = ({ country, countryName }) => {
|
|
|
3508
3512
|
const Flag = flags__default.default[country];
|
|
3509
3513
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ jsxRuntime.jsx(Flag, { title: countryName }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneIcon, { size: 16, "aria-hidden": "true" }) });
|
|
3510
3514
|
};
|
|
3511
|
-
var PhoneInput =
|
|
3515
|
+
var PhoneInput = React35__namespace.default.forwardRef(({ className, ...props }, ref) => {
|
|
3512
3516
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex items-center justify-center rounded-e-[20px] w-full", children: [
|
|
3513
3517
|
/* @__PURE__ */ jsxRuntime.jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[1px] h-5 z-10" }),
|
|
3514
3518
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3536,10 +3540,10 @@ function InputPhone({
|
|
|
3536
3540
|
onChange,
|
|
3537
3541
|
...props
|
|
3538
3542
|
}) {
|
|
3539
|
-
const [valueState, setValueState] =
|
|
3540
|
-
const [isFirstRender, setIsFirstRender] =
|
|
3543
|
+
const [valueState, setValueState] = React35.useState("");
|
|
3544
|
+
const [isFirstRender, setIsFirstRender] = React35.useState(true);
|
|
3541
3545
|
const countryCode = defaultCountry ? RPNInput__namespace.getCountryCallingCode(defaultCountry) : null;
|
|
3542
|
-
const normalizePhoneNumber =
|
|
3546
|
+
const normalizePhoneNumber = React35.useCallback(
|
|
3543
3547
|
(inputValue) => {
|
|
3544
3548
|
if (!inputValue) return "";
|
|
3545
3549
|
const cleanValue = inputValue.toString().replace(/[^\d+]/g, "");
|
|
@@ -3557,7 +3561,7 @@ function InputPhone({
|
|
|
3557
3561
|
},
|
|
3558
3562
|
[countryCode]
|
|
3559
3563
|
);
|
|
3560
|
-
|
|
3564
|
+
React35.useEffect(() => {
|
|
3561
3565
|
if (value !== void 0 && value !== null) {
|
|
3562
3566
|
const normalizedValue = normalizePhoneNumber(value);
|
|
3563
3567
|
setValueState(normalizedValue);
|
|
@@ -3565,7 +3569,7 @@ function InputPhone({
|
|
|
3565
3569
|
setValueState("");
|
|
3566
3570
|
}
|
|
3567
3571
|
}, [value, normalizePhoneNumber]);
|
|
3568
|
-
const handleChange =
|
|
3572
|
+
const handleChange = React35.useCallback(
|
|
3569
3573
|
(newValue) => {
|
|
3570
3574
|
setIsFirstRender(false);
|
|
3571
3575
|
setValueState(newValue);
|
|
@@ -3599,7 +3603,7 @@ function InputPhone({
|
|
|
3599
3603
|
}
|
|
3600
3604
|
);
|
|
3601
3605
|
}
|
|
3602
|
-
var Skeleton =
|
|
3606
|
+
var Skeleton = React35__namespace.default.forwardRef(
|
|
3603
3607
|
({ className, ...rest }, ref) => {
|
|
3604
3608
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3605
3609
|
"div",
|
|
@@ -3644,14 +3648,14 @@ var Calendar = ({
|
|
|
3644
3648
|
...props
|
|
3645
3649
|
}) => {
|
|
3646
3650
|
const { locale } = useNebulaI18n();
|
|
3647
|
-
const [selectedMonth, setSelectedMonth] =
|
|
3648
|
-
const [showMonthGridSelection, setShowMonthGridSelection] =
|
|
3651
|
+
const [selectedMonth, setSelectedMonth] = React35.useState(/* @__PURE__ */ new Date());
|
|
3652
|
+
const [showMonthGridSelection, setShowMonthGridSelection] = React35.useState(false);
|
|
3649
3653
|
const isRange = props.mode === "range";
|
|
3650
|
-
const currentMonth =
|
|
3654
|
+
const currentMonth = React35.useMemo(
|
|
3651
3655
|
() => month ?? selectedMonth,
|
|
3652
3656
|
[month, selectedMonth]
|
|
3653
3657
|
);
|
|
3654
|
-
const handleSelectMonthByOption =
|
|
3658
|
+
const handleSelectMonthByOption = React35.useCallback(
|
|
3655
3659
|
(monthOption) => {
|
|
3656
3660
|
setShowMonthGridSelection(false);
|
|
3657
3661
|
const calendarDate = currentMonth;
|
|
@@ -3664,7 +3668,7 @@ var Calendar = ({
|
|
|
3664
3668
|
},
|
|
3665
3669
|
[currentMonth, month, onNextClick]
|
|
3666
3670
|
);
|
|
3667
|
-
const components2 =
|
|
3671
|
+
const components2 = React35.useMemo(() => {
|
|
3668
3672
|
return {
|
|
3669
3673
|
Day(props2) {
|
|
3670
3674
|
const {
|
|
@@ -3951,7 +3955,7 @@ var Calendar = ({
|
|
|
3951
3955
|
);
|
|
3952
3956
|
};
|
|
3953
3957
|
function useClickOutside(refs, onClickOutside) {
|
|
3954
|
-
|
|
3958
|
+
React35.useEffect(() => {
|
|
3955
3959
|
const refArray = Array.isArray(refs) ? refs : [refs];
|
|
3956
3960
|
function handleClick(event) {
|
|
3957
3961
|
const isInside = refArray.some(
|
|
@@ -3977,7 +3981,7 @@ function useClickOutside(refs, onClickOutside) {
|
|
|
3977
3981
|
}, [refs, onClickOutside]);
|
|
3978
3982
|
}
|
|
3979
3983
|
function useKeyPress(key, callback) {
|
|
3980
|
-
|
|
3984
|
+
React35.useEffect(() => {
|
|
3981
3985
|
function handleKeyDown(event) {
|
|
3982
3986
|
if (event.key === key) {
|
|
3983
3987
|
callback();
|
|
@@ -4091,12 +4095,12 @@ var InputDatePickerSingle = ({
|
|
|
4091
4095
|
...rest
|
|
4092
4096
|
}) => {
|
|
4093
4097
|
const formattedDateByLanguage = formatDateToSubmit(value ?? "");
|
|
4094
|
-
const [innerDate, setInnerDate] =
|
|
4098
|
+
const [innerDate, setInnerDate] = React35.useState(
|
|
4095
4099
|
formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
|
|
4096
4100
|
);
|
|
4097
|
-
const [popoverIsOpen, setPopoverIsOpen] =
|
|
4101
|
+
const [popoverIsOpen, setPopoverIsOpen] = React35.useState(false);
|
|
4098
4102
|
const { locale } = useNebulaI18n();
|
|
4099
|
-
const [month, setMonth] =
|
|
4103
|
+
const [month, setMonth] = React35.useState(/* @__PURE__ */ new Date());
|
|
4100
4104
|
const handleClearValue = () => {
|
|
4101
4105
|
setInnerDate(void 0);
|
|
4102
4106
|
setMonth(/* @__PURE__ */ new Date());
|
|
@@ -4142,10 +4146,10 @@ var InputDatePickerSingle = ({
|
|
|
4142
4146
|
setInnerDate(date);
|
|
4143
4147
|
onChange?.(dateToStr, date);
|
|
4144
4148
|
};
|
|
4145
|
-
const normalizedCalendarDate =
|
|
4149
|
+
const normalizedCalendarDate = React35.useMemo(() => {
|
|
4146
4150
|
return dateFns.isValid(innerDate) ? innerDate : void 0;
|
|
4147
4151
|
}, [innerDate]);
|
|
4148
|
-
|
|
4152
|
+
React35.useEffect(() => {
|
|
4149
4153
|
if (innerDate) setMonth(innerDate);
|
|
4150
4154
|
}, [innerDate]);
|
|
4151
4155
|
const maskOptions = {
|
|
@@ -4153,8 +4157,8 @@ var InputDatePickerSingle = ({
|
|
|
4153
4157
|
replacement: { _: /\d/ }
|
|
4154
4158
|
};
|
|
4155
4159
|
const inputRef = mask.useMask(maskOptions);
|
|
4156
|
-
const conteinerRef =
|
|
4157
|
-
const calendarRef =
|
|
4160
|
+
const conteinerRef = React35.useRef(null);
|
|
4161
|
+
const calendarRef = React35.useRef(null);
|
|
4158
4162
|
useClickOutside([conteinerRef, calendarRef], () => {
|
|
4159
4163
|
setPopoverIsOpen(false);
|
|
4160
4164
|
});
|
|
@@ -4222,9 +4226,9 @@ var InputDatePickerSingle = ({
|
|
|
4222
4226
|
) })
|
|
4223
4227
|
] });
|
|
4224
4228
|
};
|
|
4225
|
-
var InputTime =
|
|
4229
|
+
var InputTime = React35.forwardRef(
|
|
4226
4230
|
({ value = "", onChange, placeholder = "--:--", ...rest }, ref) => {
|
|
4227
|
-
const [displayValue, setDisplayValue] =
|
|
4231
|
+
const [displayValue, setDisplayValue] = React35.useState(value);
|
|
4228
4232
|
const handleKeyDown = (e) => {
|
|
4229
4233
|
const currentValue = e.currentTarget.value;
|
|
4230
4234
|
if ((e.altKey || e.ctrlKey || e.metaKey) && e.key !== "z") return;
|
|
@@ -4266,7 +4270,7 @@ var InputTime = React8.forwardRef(
|
|
|
4266
4270
|
onChange?.(value2);
|
|
4267
4271
|
}
|
|
4268
4272
|
};
|
|
4269
|
-
|
|
4273
|
+
React35.useEffect(() => {
|
|
4270
4274
|
if (!value) {
|
|
4271
4275
|
setDisplayValue("");
|
|
4272
4276
|
}
|
|
@@ -4299,7 +4303,7 @@ var InputDateTimePickerSingle = ({
|
|
|
4299
4303
|
disabledDates,
|
|
4300
4304
|
...rest
|
|
4301
4305
|
}) => {
|
|
4302
|
-
const [innerTimeValue, setInnerTimeValue] =
|
|
4306
|
+
const [innerTimeValue, setInnerTimeValue] = React35.useState(
|
|
4303
4307
|
() => {
|
|
4304
4308
|
const [, time] = (value || "")?.split?.(DATA_TIME_SEPARATOR);
|
|
4305
4309
|
return time ?? "";
|
|
@@ -4308,13 +4312,13 @@ var InputDateTimePickerSingle = ({
|
|
|
4308
4312
|
const formattedDateByLanguage = formatDateToSubmit(
|
|
4309
4313
|
value?.split(DATA_TIME_SEPARATOR)?.at(0) ?? ""
|
|
4310
4314
|
);
|
|
4311
|
-
const [innerDate, setInnerDate] =
|
|
4315
|
+
const [innerDate, setInnerDate] = React35.useState(
|
|
4312
4316
|
formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
|
|
4313
4317
|
);
|
|
4314
|
-
const [popoverIsOpen, setPopoverIsOpen] =
|
|
4318
|
+
const [popoverIsOpen, setPopoverIsOpen] = React35.useState(false);
|
|
4315
4319
|
const { locale, messages: messages20 } = useNebulaI18n();
|
|
4316
|
-
const [month, setMonth] =
|
|
4317
|
-
const inputTimeRef =
|
|
4320
|
+
const [month, setMonth] = React35.useState(/* @__PURE__ */ new Date());
|
|
4321
|
+
const inputTimeRef = React35.useRef(null);
|
|
4318
4322
|
const handleClearValue = () => {
|
|
4319
4323
|
setInnerTimeValue("");
|
|
4320
4324
|
setInnerDate(void 0);
|
|
@@ -4404,10 +4408,10 @@ var InputDateTimePickerSingle = ({
|
|
|
4404
4408
|
);
|
|
4405
4409
|
setTimeout(() => inputTimeRef.current?.focus(), 100);
|
|
4406
4410
|
};
|
|
4407
|
-
const normalizedCalendarDate =
|
|
4411
|
+
const normalizedCalendarDate = React35.useMemo(() => {
|
|
4408
4412
|
return dateFns.isValid(innerDate) ? innerDate : void 0;
|
|
4409
4413
|
}, [innerDate]);
|
|
4410
|
-
|
|
4414
|
+
React35.useEffect(() => {
|
|
4411
4415
|
if (innerDate) setMonth(innerDate);
|
|
4412
4416
|
}, [innerDate]);
|
|
4413
4417
|
const maskOptions = {
|
|
@@ -4415,8 +4419,8 @@ var InputDateTimePickerSingle = ({
|
|
|
4415
4419
|
replacement: { _: /\d/ }
|
|
4416
4420
|
};
|
|
4417
4421
|
const inputRef = mask.useMask(maskOptions);
|
|
4418
|
-
const conteinerRef =
|
|
4419
|
-
const calendarRef =
|
|
4422
|
+
const conteinerRef = React35.useRef(null);
|
|
4423
|
+
const calendarRef = React35.useRef(null);
|
|
4420
4424
|
useClickOutside([conteinerRef, calendarRef], () => {
|
|
4421
4425
|
setPopoverIsOpen(false);
|
|
4422
4426
|
});
|
|
@@ -4509,17 +4513,17 @@ var InputDateRangePicker = ({
|
|
|
4509
4513
|
disabledDates,
|
|
4510
4514
|
...rest
|
|
4511
4515
|
}) => {
|
|
4512
|
-
const [month, setMonth] =
|
|
4513
|
-
const [innerValue, setInnerValue] =
|
|
4514
|
-
const [popoverIsOpen, setPopoverIsOpen] =
|
|
4516
|
+
const [month, setMonth] = React35.useState(/* @__PURE__ */ new Date());
|
|
4517
|
+
const [innerValue, setInnerValue] = React35.useState();
|
|
4518
|
+
const [popoverIsOpen, setPopoverIsOpen] = React35.useState(false);
|
|
4515
4519
|
const maskOptions = {
|
|
4516
4520
|
mask: "__/__/____ - __/__/____",
|
|
4517
4521
|
replacement: { _: /\d/ }
|
|
4518
4522
|
};
|
|
4519
4523
|
const inputRef = mask.useMask(maskOptions);
|
|
4520
4524
|
const { locale } = useNebulaI18n();
|
|
4521
|
-
const conteinerRef =
|
|
4522
|
-
const calendarRef =
|
|
4525
|
+
const conteinerRef = React35.useRef(null);
|
|
4526
|
+
const calendarRef = React35.useRef(null);
|
|
4523
4527
|
useClickOutside([conteinerRef, calendarRef], () => {
|
|
4524
4528
|
setPopoverIsOpen(false);
|
|
4525
4529
|
});
|
|
@@ -4532,7 +4536,7 @@ var InputDateRangePicker = ({
|
|
|
4532
4536
|
const dateEnd = endDate && dateFormatIsValid(endDate, locale) ? dateParts(endDate, locale).date : void 0;
|
|
4533
4537
|
onChange?.(value2, [dateStart, dateEnd]);
|
|
4534
4538
|
};
|
|
4535
|
-
const handleChangeCalendarDate =
|
|
4539
|
+
const handleChangeCalendarDate = React35.useCallback(
|
|
4536
4540
|
(date) => {
|
|
4537
4541
|
setInnerValue(date);
|
|
4538
4542
|
const [from, to] = date;
|
|
@@ -4554,7 +4558,7 @@ var InputDateRangePicker = ({
|
|
|
4554
4558
|
},
|
|
4555
4559
|
[locale, onChange]
|
|
4556
4560
|
);
|
|
4557
|
-
|
|
4561
|
+
React35.useEffect(() => {
|
|
4558
4562
|
if (value) {
|
|
4559
4563
|
const [startDate, endDate] = value.split(" - ");
|
|
4560
4564
|
const dateStart = startDate && dateFormatIsValid(startDate, locale) ? dateParts(startDate, locale).date : void 0;
|
|
@@ -4652,7 +4656,7 @@ var useFileUpload = (options = {}) => {
|
|
|
4652
4656
|
onFilesChange,
|
|
4653
4657
|
onFilesAdded
|
|
4654
4658
|
} = options;
|
|
4655
|
-
const [state, setState] =
|
|
4659
|
+
const [state, setState] = React35.useState({
|
|
4656
4660
|
files: initialFiles.map((file) => ({
|
|
4657
4661
|
file,
|
|
4658
4662
|
id: file.id,
|
|
@@ -4661,8 +4665,8 @@ var useFileUpload = (options = {}) => {
|
|
|
4661
4665
|
isDragging: false,
|
|
4662
4666
|
errors: []
|
|
4663
4667
|
});
|
|
4664
|
-
const inputRef =
|
|
4665
|
-
const validateFile =
|
|
4668
|
+
const inputRef = React35.useRef(null);
|
|
4669
|
+
const validateFile = React35.useCallback(
|
|
4666
4670
|
(file) => {
|
|
4667
4671
|
if (file instanceof File) {
|
|
4668
4672
|
if (file.size > maxSize) {
|
|
@@ -4701,7 +4705,7 @@ var useFileUpload = (options = {}) => {
|
|
|
4701
4705
|
},
|
|
4702
4706
|
[accept, maxSize]
|
|
4703
4707
|
);
|
|
4704
|
-
const createPreview =
|
|
4708
|
+
const createPreview = React35.useCallback(
|
|
4705
4709
|
(file) => {
|
|
4706
4710
|
if (file instanceof File) {
|
|
4707
4711
|
return URL.createObjectURL(file);
|
|
@@ -4710,13 +4714,13 @@ var useFileUpload = (options = {}) => {
|
|
|
4710
4714
|
},
|
|
4711
4715
|
[]
|
|
4712
4716
|
);
|
|
4713
|
-
const generateUniqueId =
|
|
4717
|
+
const generateUniqueId = React35.useCallback((file) => {
|
|
4714
4718
|
if (file instanceof File) {
|
|
4715
4719
|
return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
|
4716
4720
|
}
|
|
4717
4721
|
return file.id;
|
|
4718
4722
|
}, []);
|
|
4719
|
-
const clearFiles =
|
|
4723
|
+
const clearFiles = React35.useCallback(() => {
|
|
4720
4724
|
setState((prev) => {
|
|
4721
4725
|
prev.files.forEach((file) => {
|
|
4722
4726
|
if (file.preview && file.file instanceof File && file.file.type.startsWith("image/")) {
|
|
@@ -4735,7 +4739,7 @@ var useFileUpload = (options = {}) => {
|
|
|
4735
4739
|
return newState;
|
|
4736
4740
|
});
|
|
4737
4741
|
}, [onFilesChange]);
|
|
4738
|
-
const addFiles =
|
|
4742
|
+
const addFiles = React35.useCallback(
|
|
4739
4743
|
(newFiles) => {
|
|
4740
4744
|
if (!newFiles || newFiles.length === 0) return;
|
|
4741
4745
|
const newFilesArray = Array.from(newFiles);
|
|
@@ -4811,7 +4815,7 @@ var useFileUpload = (options = {}) => {
|
|
|
4811
4815
|
onFilesAdded
|
|
4812
4816
|
]
|
|
4813
4817
|
);
|
|
4814
|
-
const removeFile =
|
|
4818
|
+
const removeFile = React35.useCallback(
|
|
4815
4819
|
(id) => {
|
|
4816
4820
|
setState((prev) => {
|
|
4817
4821
|
const fileToRemove = prev.files.find((file) => file.id === id);
|
|
@@ -4829,18 +4833,18 @@ var useFileUpload = (options = {}) => {
|
|
|
4829
4833
|
},
|
|
4830
4834
|
[onFilesChange]
|
|
4831
4835
|
);
|
|
4832
|
-
const clearErrors =
|
|
4836
|
+
const clearErrors = React35.useCallback(() => {
|
|
4833
4837
|
setState((prev) => ({
|
|
4834
4838
|
...prev,
|
|
4835
4839
|
errors: []
|
|
4836
4840
|
}));
|
|
4837
4841
|
}, []);
|
|
4838
|
-
const handleDragEnter =
|
|
4842
|
+
const handleDragEnter = React35.useCallback((e) => {
|
|
4839
4843
|
e.preventDefault();
|
|
4840
4844
|
e.stopPropagation();
|
|
4841
4845
|
setState((prev) => ({ ...prev, isDragging: true }));
|
|
4842
4846
|
}, []);
|
|
4843
|
-
const handleDragLeave =
|
|
4847
|
+
const handleDragLeave = React35.useCallback((e) => {
|
|
4844
4848
|
e.preventDefault();
|
|
4845
4849
|
e.stopPropagation();
|
|
4846
4850
|
if (e.currentTarget.contains(e.relatedTarget)) {
|
|
@@ -4848,11 +4852,11 @@ var useFileUpload = (options = {}) => {
|
|
|
4848
4852
|
}
|
|
4849
4853
|
setState((prev) => ({ ...prev, isDragging: false }));
|
|
4850
4854
|
}, []);
|
|
4851
|
-
const handleDragOver =
|
|
4855
|
+
const handleDragOver = React35.useCallback((e) => {
|
|
4852
4856
|
e.preventDefault();
|
|
4853
4857
|
e.stopPropagation();
|
|
4854
4858
|
}, []);
|
|
4855
|
-
const handleDrop =
|
|
4859
|
+
const handleDrop = React35.useCallback(
|
|
4856
4860
|
(e) => {
|
|
4857
4861
|
e.preventDefault();
|
|
4858
4862
|
e.stopPropagation();
|
|
@@ -4873,7 +4877,7 @@ var useFileUpload = (options = {}) => {
|
|
|
4873
4877
|
},
|
|
4874
4878
|
[addFiles, multiple]
|
|
4875
4879
|
);
|
|
4876
|
-
const handleFileChange =
|
|
4880
|
+
const handleFileChange = React35.useCallback(
|
|
4877
4881
|
(e) => {
|
|
4878
4882
|
if (e.target.files && e.target.files.length > 0) {
|
|
4879
4883
|
addFiles(e.target.files);
|
|
@@ -4881,12 +4885,12 @@ var useFileUpload = (options = {}) => {
|
|
|
4881
4885
|
},
|
|
4882
4886
|
[addFiles]
|
|
4883
4887
|
);
|
|
4884
|
-
const openFileDialog =
|
|
4888
|
+
const openFileDialog = React35.useCallback(() => {
|
|
4885
4889
|
if (inputRef.current) {
|
|
4886
4890
|
inputRef.current.click();
|
|
4887
4891
|
}
|
|
4888
4892
|
}, []);
|
|
4889
|
-
const getInputProps =
|
|
4893
|
+
const getInputProps = React35.useCallback(
|
|
4890
4894
|
(props = {}) => {
|
|
4891
4895
|
return {
|
|
4892
4896
|
...props,
|
|
@@ -4899,7 +4903,7 @@ var useFileUpload = (options = {}) => {
|
|
|
4899
4903
|
},
|
|
4900
4904
|
[accept, multiple, handleFileChange]
|
|
4901
4905
|
);
|
|
4902
|
-
return
|
|
4906
|
+
return React35.useMemo(
|
|
4903
4907
|
() => [
|
|
4904
4908
|
state,
|
|
4905
4909
|
{
|
|
@@ -4983,10 +4987,10 @@ function FileUpload({
|
|
|
4983
4987
|
...rest,
|
|
4984
4988
|
maxFiles
|
|
4985
4989
|
});
|
|
4986
|
-
|
|
4990
|
+
React35.useEffect(() => {
|
|
4987
4991
|
onError?.(errors);
|
|
4988
|
-
}, [errors]);
|
|
4989
|
-
const disabled =
|
|
4992
|
+
}, [errors, onError]);
|
|
4993
|
+
const disabled = React35.useMemo(() => {
|
|
4990
4994
|
if (rest.disabled) return true;
|
|
4991
4995
|
if (rest.multiple) {
|
|
4992
4996
|
if (!Number.isFinite(maxFiles)) return false;
|
|
@@ -5091,7 +5095,7 @@ function FileUpload({
|
|
|
5091
5095
|
] });
|
|
5092
5096
|
}
|
|
5093
5097
|
FileUpload.displayName = "FileUpload";
|
|
5094
|
-
var TextArea =
|
|
5098
|
+
var TextArea = React35__namespace.forwardRef(
|
|
5095
5099
|
({
|
|
5096
5100
|
className,
|
|
5097
5101
|
isError = false,
|
|
@@ -5103,14 +5107,14 @@ var TextArea = React8__namespace.forwardRef(
|
|
|
5103
5107
|
asInput,
|
|
5104
5108
|
...props
|
|
5105
5109
|
}, ref) => {
|
|
5106
|
-
const innerRef =
|
|
5110
|
+
const innerRef = React35__namespace.useRef(
|
|
5107
5111
|
null
|
|
5108
5112
|
);
|
|
5109
|
-
const [count, setCount] =
|
|
5113
|
+
const [count, setCount] = React35__namespace.useState(String(props.value ?? "").length);
|
|
5110
5114
|
const countParts = [count, maxLength].filter(
|
|
5111
5115
|
(part) => typeof part === "number"
|
|
5112
5116
|
);
|
|
5113
|
-
|
|
5117
|
+
React35__namespace.useEffect(() => {
|
|
5114
5118
|
const textarea = innerRef.current;
|
|
5115
5119
|
if (!textarea || !autoResize) return;
|
|
5116
5120
|
const adjustHeight = () => {
|
|
@@ -5123,7 +5127,7 @@ var TextArea = React8__namespace.forwardRef(
|
|
|
5123
5127
|
textarea.removeEventListener("input", adjustHeight);
|
|
5124
5128
|
};
|
|
5125
5129
|
}, [asInput, autoResize, props.value]);
|
|
5126
|
-
|
|
5130
|
+
React35__namespace.useImperativeHandle(ref, () => innerRef.current);
|
|
5127
5131
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds relative w-full", children: [
|
|
5128
5132
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5129
5133
|
"div",
|
|
@@ -5171,9 +5175,9 @@ TextArea.displayName = "TextArea";
|
|
|
5171
5175
|
function clamp(value, min, max) {
|
|
5172
5176
|
return Math.min(Math.max(value, min), max);
|
|
5173
5177
|
}
|
|
5174
|
-
var CropperContext =
|
|
5178
|
+
var CropperContext = React35.createContext(null);
|
|
5175
5179
|
var useCropperContext = () => {
|
|
5176
|
-
const context =
|
|
5180
|
+
const context = React35.useContext(CropperContext);
|
|
5177
5181
|
if (!context) {
|
|
5178
5182
|
throw new Error("useCropperContext must be used within a Cropper.Root");
|
|
5179
5183
|
}
|
|
@@ -5195,33 +5199,33 @@ var CropperRoot = ({
|
|
|
5195
5199
|
children,
|
|
5196
5200
|
...restProps
|
|
5197
5201
|
}) => {
|
|
5198
|
-
const descriptionId =
|
|
5199
|
-
const [imgWidth, setImgWidth] =
|
|
5200
|
-
const [imgHeight, setImgHeight] =
|
|
5201
|
-
const containerRef =
|
|
5202
|
-
const [cropAreaWidth, setCropAreaWidth] =
|
|
5203
|
-
const [cropAreaHeight, setCropAreaHeight] =
|
|
5204
|
-
const [imageWrapperWidth, setImageWrapperWidth] =
|
|
5205
|
-
const [imageWrapperHeight, setImageWrapperHeight] =
|
|
5206
|
-
const [offsetX, setOffsetX] =
|
|
5207
|
-
const [offsetY, setOffsetY] =
|
|
5208
|
-
const [internalZoom, setInternalZoom] =
|
|
5209
|
-
const [isDragging, setIsDragging] =
|
|
5210
|
-
const dragStartPointRef =
|
|
5211
|
-
const dragStartOffsetRef =
|
|
5212
|
-
const latestRestrictedOffsetRef =
|
|
5202
|
+
const descriptionId = React35.useId();
|
|
5203
|
+
const [imgWidth, setImgWidth] = React35.useState(null);
|
|
5204
|
+
const [imgHeight, setImgHeight] = React35.useState(null);
|
|
5205
|
+
const containerRef = React35.useRef(null);
|
|
5206
|
+
const [cropAreaWidth, setCropAreaWidth] = React35.useState(0);
|
|
5207
|
+
const [cropAreaHeight, setCropAreaHeight] = React35.useState(0);
|
|
5208
|
+
const [imageWrapperWidth, setImageWrapperWidth] = React35.useState(0);
|
|
5209
|
+
const [imageWrapperHeight, setImageWrapperHeight] = React35.useState(0);
|
|
5210
|
+
const [offsetX, setOffsetX] = React35.useState(0);
|
|
5211
|
+
const [offsetY, setOffsetY] = React35.useState(0);
|
|
5212
|
+
const [internalZoom, setInternalZoom] = React35.useState(minZoom);
|
|
5213
|
+
const [isDragging, setIsDragging] = React35.useState(false);
|
|
5214
|
+
const dragStartPointRef = React35.useRef({ x: 0, y: 0 });
|
|
5215
|
+
const dragStartOffsetRef = React35.useRef({ x: 0, y: 0 });
|
|
5216
|
+
const latestRestrictedOffsetRef = React35.useRef({
|
|
5213
5217
|
x: offsetX,
|
|
5214
5218
|
y: offsetY
|
|
5215
5219
|
});
|
|
5216
|
-
const latestZoomRef =
|
|
5217
|
-
const isInitialSetupDoneRef =
|
|
5218
|
-
const initialPinchDistanceRef =
|
|
5219
|
-
const initialPinchZoomRef =
|
|
5220
|
-
const isPinchingRef =
|
|
5221
|
-
const hasWarnedRef =
|
|
5220
|
+
const latestZoomRef = React35.useRef(internalZoom);
|
|
5221
|
+
const isInitialSetupDoneRef = React35.useRef(false);
|
|
5222
|
+
const initialPinchDistanceRef = React35.useRef(0);
|
|
5223
|
+
const initialPinchZoomRef = React35.useRef(1);
|
|
5224
|
+
const isPinchingRef = React35.useRef(false);
|
|
5225
|
+
const hasWarnedRef = React35.useRef(false);
|
|
5222
5226
|
const isZoomControlled = zoomProp !== void 0;
|
|
5223
5227
|
const effectiveZoom = isZoomControlled ? zoomProp : internalZoom;
|
|
5224
|
-
const updateZoom =
|
|
5228
|
+
const updateZoom = React35.useCallback(
|
|
5225
5229
|
(newZoomValue) => {
|
|
5226
5230
|
const clampedZoom = clamp(newZoomValue, minZoom, maxZoom);
|
|
5227
5231
|
if (onZoomChange) {
|
|
@@ -5233,10 +5237,10 @@ var CropperRoot = ({
|
|
|
5233
5237
|
},
|
|
5234
5238
|
[minZoom, maxZoom, onZoomChange, isZoomControlled]
|
|
5235
5239
|
);
|
|
5236
|
-
|
|
5240
|
+
React35.useEffect(() => {
|
|
5237
5241
|
latestZoomRef.current = effectiveZoom;
|
|
5238
5242
|
}, [effectiveZoom]);
|
|
5239
|
-
|
|
5243
|
+
React35.useEffect(() => {
|
|
5240
5244
|
setOffsetX(0);
|
|
5241
5245
|
setOffsetY(0);
|
|
5242
5246
|
if (!isZoomControlled) {
|
|
@@ -5267,7 +5271,7 @@ var CropperRoot = ({
|
|
|
5267
5271
|
isMounted = false;
|
|
5268
5272
|
};
|
|
5269
5273
|
}, [image, minZoom, isZoomControlled]);
|
|
5270
|
-
const updateCropAreaDimensions =
|
|
5274
|
+
const updateCropAreaDimensions = React35.useCallback(
|
|
5271
5275
|
(containerWidth, containerHeight) => {
|
|
5272
5276
|
if (containerWidth <= 0 || containerHeight <= 0) {
|
|
5273
5277
|
setCropAreaWidth(0);
|
|
@@ -5290,7 +5294,7 @@ var CropperRoot = ({
|
|
|
5290
5294
|
},
|
|
5291
5295
|
[aspectRatio, cropPadding]
|
|
5292
5296
|
);
|
|
5293
|
-
|
|
5297
|
+
React35.useEffect(() => {
|
|
5294
5298
|
const element = containerRef.current;
|
|
5295
5299
|
if (!element) return;
|
|
5296
5300
|
const observer = new ResizeObserver((entries) => {
|
|
@@ -5306,7 +5310,7 @@ var CropperRoot = ({
|
|
|
5306
5310
|
updateCropAreaDimensions(initialWidth, initialHeight);
|
|
5307
5311
|
return () => observer.disconnect();
|
|
5308
5312
|
}, [updateCropAreaDimensions]);
|
|
5309
|
-
|
|
5313
|
+
React35.useEffect(() => {
|
|
5310
5314
|
if (cropAreaWidth <= 0 || cropAreaHeight <= 0 || !imgWidth || !imgHeight) {
|
|
5311
5315
|
setImageWrapperWidth(0);
|
|
5312
5316
|
setImageWrapperHeight(0);
|
|
@@ -5326,7 +5330,7 @@ var CropperRoot = ({
|
|
|
5326
5330
|
setImageWrapperWidth(targetWrapperWidth);
|
|
5327
5331
|
setImageWrapperHeight(targetWrapperHeight);
|
|
5328
5332
|
}, [cropAreaWidth, cropAreaHeight, imgWidth, imgHeight]);
|
|
5329
|
-
const restrictOffset =
|
|
5333
|
+
const restrictOffset = React35.useCallback(
|
|
5330
5334
|
(dragOffsetX, dragOffsetY, currentZoom) => {
|
|
5331
5335
|
if (imageWrapperWidth <= 0 || imageWrapperHeight <= 0 || cropAreaWidth <= 0 || cropAreaHeight <= 0)
|
|
5332
5336
|
return { x: 0, y: 0 };
|
|
@@ -5344,7 +5348,7 @@ var CropperRoot = ({
|
|
|
5344
5348
|
},
|
|
5345
5349
|
[imageWrapperWidth, imageWrapperHeight, cropAreaWidth, cropAreaHeight]
|
|
5346
5350
|
);
|
|
5347
|
-
const calculateCropData =
|
|
5351
|
+
const calculateCropData = React35.useCallback(
|
|
5348
5352
|
(finalOffsetX, finalOffsetY, finalZoom) => {
|
|
5349
5353
|
const currentOffsetX = finalOffsetX !== void 0 ? finalOffsetX : latestRestrictedOffsetRef.current.x;
|
|
5350
5354
|
const currentOffsetY = finalOffsetY !== void 0 ? finalOffsetY : latestRestrictedOffsetRef.current.y;
|
|
@@ -5378,7 +5382,7 @@ var CropperRoot = ({
|
|
|
5378
5382
|
effectiveZoom
|
|
5379
5383
|
]
|
|
5380
5384
|
);
|
|
5381
|
-
|
|
5385
|
+
React35.useEffect(() => {
|
|
5382
5386
|
if (imageWrapperWidth > 0 && imageWrapperHeight > 0 && cropAreaWidth > 0 && cropAreaHeight > 0) {
|
|
5383
5387
|
const currentZoomForSetup = effectiveZoom;
|
|
5384
5388
|
if (!isInitialSetupDoneRef.current) {
|
|
@@ -5449,7 +5453,7 @@ var CropperRoot = ({
|
|
|
5449
5453
|
updateZoom,
|
|
5450
5454
|
imageWrapperHeight
|
|
5451
5455
|
]);
|
|
5452
|
-
|
|
5456
|
+
React35.useEffect(() => {
|
|
5453
5457
|
const checkTimeout = setTimeout(() => {
|
|
5454
5458
|
if (containerRef.current && !hasWarnedRef.current) {
|
|
5455
5459
|
const hasDescription = document.getElementById(descriptionId);
|
|
@@ -5460,7 +5464,7 @@ var CropperRoot = ({
|
|
|
5460
5464
|
}, 100);
|
|
5461
5465
|
return () => clearTimeout(checkTimeout);
|
|
5462
5466
|
}, [descriptionId]);
|
|
5463
|
-
const handleInteractionEnd =
|
|
5467
|
+
const handleInteractionEnd = React35.useCallback(() => {
|
|
5464
5468
|
if (onCropChange) {
|
|
5465
5469
|
const finalData = calculateCropData(
|
|
5466
5470
|
latestRestrictedOffsetRef.current.x,
|
|
@@ -5470,7 +5474,7 @@ var CropperRoot = ({
|
|
|
5470
5474
|
onCropChange(finalData);
|
|
5471
5475
|
}
|
|
5472
5476
|
}, [onCropChange, calculateCropData, effectiveZoom]);
|
|
5473
|
-
const handleMouseDown =
|
|
5477
|
+
const handleMouseDown = React35.useCallback(
|
|
5474
5478
|
(e) => {
|
|
5475
5479
|
if (e.button !== 0 || !containerRef.current) return;
|
|
5476
5480
|
e.preventDefault();
|
|
@@ -5506,7 +5510,7 @@ var CropperRoot = ({
|
|
|
5506
5510
|
},
|
|
5507
5511
|
[restrictOffset, effectiveZoom, handleInteractionEnd]
|
|
5508
5512
|
);
|
|
5509
|
-
const handleWheel =
|
|
5513
|
+
const handleWheel = React35.useCallback(
|
|
5510
5514
|
(e) => {
|
|
5511
5515
|
e.preventDefault();
|
|
5512
5516
|
e.stopPropagation();
|
|
@@ -5562,7 +5566,7 @@ var CropperRoot = ({
|
|
|
5562
5566
|
x: (touches[0].clientX + touches[1].clientX) / 2,
|
|
5563
5567
|
y: (touches[0].clientY + touches[1].clientY) / 2
|
|
5564
5568
|
});
|
|
5565
|
-
const handleTouchStart =
|
|
5569
|
+
const handleTouchStart = React35.useCallback(
|
|
5566
5570
|
(e) => {
|
|
5567
5571
|
if (!containerRef.current || imageWrapperWidth <= 0 || imageWrapperHeight <= 0)
|
|
5568
5572
|
return;
|
|
@@ -5592,7 +5596,7 @@ var CropperRoot = ({
|
|
|
5592
5596
|
},
|
|
5593
5597
|
[imageWrapperWidth, imageWrapperHeight]
|
|
5594
5598
|
);
|
|
5595
|
-
const handleTouchMove =
|
|
5599
|
+
const handleTouchMove = React35.useCallback(
|
|
5596
5600
|
(e) => {
|
|
5597
5601
|
if (!containerRef.current || imageWrapperWidth <= 0 || imageWrapperHeight <= 0)
|
|
5598
5602
|
return;
|
|
@@ -5660,7 +5664,7 @@ var CropperRoot = ({
|
|
|
5660
5664
|
calculateCropData
|
|
5661
5665
|
]
|
|
5662
5666
|
);
|
|
5663
|
-
const handleTouchEnd =
|
|
5667
|
+
const handleTouchEnd = React35.useCallback(
|
|
5664
5668
|
(e) => {
|
|
5665
5669
|
e.preventDefault();
|
|
5666
5670
|
const touches = e.touches;
|
|
@@ -5687,7 +5691,7 @@ var CropperRoot = ({
|
|
|
5687
5691
|
},
|
|
5688
5692
|
[isDragging, handleInteractionEnd]
|
|
5689
5693
|
);
|
|
5690
|
-
const handleKeyDown =
|
|
5694
|
+
const handleKeyDown = React35.useCallback(
|
|
5691
5695
|
(e) => {
|
|
5692
5696
|
if (imageWrapperWidth <= 0) return;
|
|
5693
5697
|
let targetOffsetX = latestRestrictedOffsetRef.current.x;
|
|
@@ -5729,7 +5733,7 @@ var CropperRoot = ({
|
|
|
5729
5733
|
},
|
|
5730
5734
|
[keyboardStep, imageWrapperWidth, restrictOffset, effectiveZoom]
|
|
5731
5735
|
);
|
|
5732
|
-
const handleKeyUp =
|
|
5736
|
+
const handleKeyUp = React35.useCallback(
|
|
5733
5737
|
(e) => {
|
|
5734
5738
|
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
|
|
5735
5739
|
handleInteractionEnd();
|
|
@@ -5737,7 +5741,7 @@ var CropperRoot = ({
|
|
|
5737
5741
|
},
|
|
5738
5742
|
[handleInteractionEnd]
|
|
5739
5743
|
);
|
|
5740
|
-
|
|
5744
|
+
React35.useEffect(() => {
|
|
5741
5745
|
const node = containerRef.current;
|
|
5742
5746
|
if (!node) return;
|
|
5743
5747
|
const options = { passive: false };
|
|
@@ -5754,7 +5758,7 @@ var CropperRoot = ({
|
|
|
5754
5758
|
node.removeEventListener("touchcancel", handleTouchEnd, options);
|
|
5755
5759
|
};
|
|
5756
5760
|
}, [handleWheel, handleTouchStart, handleTouchMove, handleTouchEnd]);
|
|
5757
|
-
const getRootProps =
|
|
5761
|
+
const getRootProps = React35.useCallback(
|
|
5758
5762
|
() => ({
|
|
5759
5763
|
className,
|
|
5760
5764
|
style,
|
|
@@ -5782,7 +5786,7 @@ var CropperRoot = ({
|
|
|
5782
5786
|
effectiveZoom
|
|
5783
5787
|
]
|
|
5784
5788
|
);
|
|
5785
|
-
const getImageWrapperStyle =
|
|
5789
|
+
const getImageWrapperStyle = React35.useCallback(
|
|
5786
5790
|
() => ({
|
|
5787
5791
|
width: imageWrapperWidth,
|
|
5788
5792
|
height: imageWrapperHeight,
|
|
@@ -5794,7 +5798,7 @@ var CropperRoot = ({
|
|
|
5794
5798
|
}),
|
|
5795
5799
|
[imageWrapperWidth, imageWrapperHeight, offsetX, offsetY, effectiveZoom]
|
|
5796
5800
|
);
|
|
5797
|
-
const getImageProps =
|
|
5801
|
+
const getImageProps = React35.useCallback(
|
|
5798
5802
|
() => ({
|
|
5799
5803
|
src: image,
|
|
5800
5804
|
alt: "Image being cropped",
|
|
@@ -5803,14 +5807,14 @@ var CropperRoot = ({
|
|
|
5803
5807
|
}),
|
|
5804
5808
|
[image]
|
|
5805
5809
|
);
|
|
5806
|
-
const getCropAreaStyle =
|
|
5810
|
+
const getCropAreaStyle = React35.useCallback(
|
|
5807
5811
|
() => ({
|
|
5808
5812
|
width: cropAreaWidth,
|
|
5809
5813
|
height: cropAreaHeight
|
|
5810
5814
|
}),
|
|
5811
5815
|
[cropAreaWidth, cropAreaHeight]
|
|
5812
5816
|
);
|
|
5813
|
-
const getCropAreaProps =
|
|
5817
|
+
const getCropAreaProps = React35.useCallback(
|
|
5814
5818
|
() => ({
|
|
5815
5819
|
style: getCropAreaStyle(),
|
|
5816
5820
|
"aria-hidden": true
|
|
@@ -5844,7 +5848,7 @@ var CropperImage = ({ className, ...restProps }) => {
|
|
|
5844
5848
|
const { image, getImageProps, getImageWrapperStyle } = useCropperContext();
|
|
5845
5849
|
if (!image) return null;
|
|
5846
5850
|
const imageProps = getImageProps();
|
|
5847
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: getImageWrapperStyle(), children: /* @__PURE__ */ jsxRuntime.jsx("img", { ...imageProps, className, ...restProps }) });
|
|
5851
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: getImageWrapperStyle(), children: /* @__PURE__ */ jsxRuntime.jsx("img", { ...imageProps, className, ...restProps, alt: "cropper" }) });
|
|
5848
5852
|
};
|
|
5849
5853
|
var CropperCropArea = ({
|
|
5850
5854
|
className,
|
|
@@ -5888,10 +5892,10 @@ function Slider({
|
|
|
5888
5892
|
max = 100,
|
|
5889
5893
|
...props
|
|
5890
5894
|
}) {
|
|
5891
|
-
const [internalValues, setInternalValues] =
|
|
5895
|
+
const [internalValues, setInternalValues] = React35__namespace.useState(
|
|
5892
5896
|
Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]
|
|
5893
5897
|
);
|
|
5894
|
-
|
|
5898
|
+
React35__namespace.useEffect(() => {
|
|
5895
5899
|
if (value !== void 0) {
|
|
5896
5900
|
setInternalValues(Array.isArray(value) ? value : [value]);
|
|
5897
5901
|
}
|
|
@@ -5944,7 +5948,7 @@ function Slider({
|
|
|
5944
5948
|
)
|
|
5945
5949
|
}
|
|
5946
5950
|
),
|
|
5947
|
-
Array.from({ length: internalValues.length }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5951
|
+
Array.from({ length: internalValues.length }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(React35__namespace.Fragment, { children: renderThumb() }, index))
|
|
5948
5952
|
]
|
|
5949
5953
|
}
|
|
5950
5954
|
);
|
|
@@ -6060,10 +6064,10 @@ function Cropper2({
|
|
|
6060
6064
|
rounded = false,
|
|
6061
6065
|
portal = false
|
|
6062
6066
|
}) {
|
|
6063
|
-
const [finalImageUrl, setFinalImageUrl] =
|
|
6064
|
-
const [croppedAreaPixels, setCroppedAreaPixels] =
|
|
6065
|
-
const [zoom, setZoom] =
|
|
6066
|
-
const handleCropChange =
|
|
6067
|
+
const [finalImageUrl, setFinalImageUrl] = React35.useState(null);
|
|
6068
|
+
const [croppedAreaPixels, setCroppedAreaPixels] = React35.useState(null);
|
|
6069
|
+
const [zoom, setZoom] = React35.useState(1);
|
|
6070
|
+
const handleCropChange = React35.useCallback((pixels) => {
|
|
6067
6071
|
setCroppedAreaPixels(pixels);
|
|
6068
6072
|
}, []);
|
|
6069
6073
|
const handleApply = async () => {
|
|
@@ -6096,7 +6100,7 @@ function Cropper2({
|
|
|
6096
6100
|
onOpenChange?.(false);
|
|
6097
6101
|
onCancelCrop?.();
|
|
6098
6102
|
};
|
|
6099
|
-
|
|
6103
|
+
React35.useEffect(() => {
|
|
6100
6104
|
const currentFinalUrl = finalImageUrl;
|
|
6101
6105
|
return () => {
|
|
6102
6106
|
if (currentFinalUrl && currentFinalUrl.startsWith("blob:")) {
|
|
@@ -6219,8 +6223,8 @@ var ProfileImage = ({
|
|
|
6219
6223
|
icon
|
|
6220
6224
|
}) => {
|
|
6221
6225
|
const maxSize = maxSizeMB * 1024 * 1024;
|
|
6222
|
-
const id =
|
|
6223
|
-
const withCropper =
|
|
6226
|
+
const id = React35.useId();
|
|
6227
|
+
const withCropper = React35.useMemo(() => !!cropperProps, [cropperProps]);
|
|
6224
6228
|
const handleFileChange = (file2, blob) => {
|
|
6225
6229
|
if (!file2) {
|
|
6226
6230
|
return;
|
|
@@ -6263,23 +6267,23 @@ var ProfileImage = ({
|
|
|
6263
6267
|
handleFileChange(file2?.file);
|
|
6264
6268
|
}
|
|
6265
6269
|
});
|
|
6266
|
-
const [finalImageUrl, setFinalImageUrl] =
|
|
6270
|
+
const [finalImageUrl, setFinalImageUrl] = React35.useState(
|
|
6267
6271
|
image || null
|
|
6268
6272
|
);
|
|
6269
|
-
const [isDialogOpen, setIsDialogOpen] =
|
|
6270
|
-
|
|
6273
|
+
const [isDialogOpen, setIsDialogOpen] = React35.useState(false);
|
|
6274
|
+
React35.useEffect(() => {
|
|
6271
6275
|
onError?.(errors);
|
|
6272
|
-
}, [errors]);
|
|
6276
|
+
}, [errors, onError]);
|
|
6273
6277
|
const [file] = files;
|
|
6274
6278
|
const fileId = file?.id;
|
|
6275
|
-
const previousFileIdRef =
|
|
6279
|
+
const previousFileIdRef = React35.useRef(null);
|
|
6276
6280
|
const previewUrl = file?.preview || null;
|
|
6277
|
-
const profileImagePreview =
|
|
6281
|
+
const profileImagePreview = React35.useMemo(() => {
|
|
6278
6282
|
if (withCropper) return finalImageUrl;
|
|
6279
6283
|
return previewUrl;
|
|
6280
6284
|
}, [previewUrl, withCropper, finalImageUrl]);
|
|
6281
|
-
const initialRenderRef =
|
|
6282
|
-
|
|
6285
|
+
const initialRenderRef = React35.useRef(true);
|
|
6286
|
+
React35.useEffect(() => {
|
|
6283
6287
|
if (!withCropper) return;
|
|
6284
6288
|
if (fileId && fileId !== previousFileIdRef.current && !initialRenderRef.current) {
|
|
6285
6289
|
setIsDialogOpen(true);
|
|
@@ -6452,19 +6456,19 @@ function RadioGroupItem({
|
|
|
6452
6456
|
}
|
|
6453
6457
|
);
|
|
6454
6458
|
}
|
|
6455
|
-
var StepperContext =
|
|
6456
|
-
var StepItemContext =
|
|
6459
|
+
var StepperContext = React35.createContext(void 0);
|
|
6460
|
+
var StepItemContext = React35.createContext(
|
|
6457
6461
|
void 0
|
|
6458
6462
|
);
|
|
6459
6463
|
var useStepper = () => {
|
|
6460
|
-
const context =
|
|
6464
|
+
const context = React35.useContext(StepperContext);
|
|
6461
6465
|
if (!context) {
|
|
6462
6466
|
throw new Error("useStepper must be used within a Stepper");
|
|
6463
6467
|
}
|
|
6464
6468
|
return context;
|
|
6465
6469
|
};
|
|
6466
6470
|
var useStepItem = () => {
|
|
6467
|
-
const context =
|
|
6471
|
+
const context = React35.useContext(StepItemContext);
|
|
6468
6472
|
if (!context) {
|
|
6469
6473
|
throw new Error("useStepItem must be used within a StepperItem");
|
|
6470
6474
|
}
|
|
@@ -6478,8 +6482,8 @@ function Stepper({
|
|
|
6478
6482
|
className,
|
|
6479
6483
|
...props
|
|
6480
6484
|
}) {
|
|
6481
|
-
const [activeStep, setInternalStep] =
|
|
6482
|
-
const setActiveStep =
|
|
6485
|
+
const [activeStep, setInternalStep] = React35__namespace.useState(defaultValue);
|
|
6486
|
+
const setActiveStep = React35__namespace.useCallback(
|
|
6483
6487
|
(step) => {
|
|
6484
6488
|
if (value === void 0) {
|
|
6485
6489
|
setInternalStep(step);
|
|
@@ -6565,10 +6569,22 @@ function StepperTrigger({
|
|
|
6565
6569
|
className,
|
|
6566
6570
|
children,
|
|
6567
6571
|
isClickable = true,
|
|
6572
|
+
onClick,
|
|
6568
6573
|
...props
|
|
6569
6574
|
}) {
|
|
6570
6575
|
const { setActiveStep } = useStepper();
|
|
6571
6576
|
const { step, isDisabled } = useStepItem();
|
|
6577
|
+
const handleClick = React35__namespace.useCallback(
|
|
6578
|
+
(e) => {
|
|
6579
|
+
if (isClickable) {
|
|
6580
|
+
setActiveStep(step);
|
|
6581
|
+
onClick?.(e);
|
|
6582
|
+
}
|
|
6583
|
+
e.preventDefault();
|
|
6584
|
+
e.stopPropagation();
|
|
6585
|
+
},
|
|
6586
|
+
[isClickable, step, onClick, setActiveStep]
|
|
6587
|
+
);
|
|
6572
6588
|
if (asChild) {
|
|
6573
6589
|
const Comp = asChild ? reactSlot.Slot : "span";
|
|
6574
6590
|
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { "data-slot": "stepper-trigger", className, children });
|
|
@@ -6593,9 +6609,10 @@ function StepperTrigger({
|
|
|
6593
6609
|
`,
|
|
6594
6610
|
className
|
|
6595
6611
|
),
|
|
6596
|
-
onClick:
|
|
6612
|
+
onClick: handleClick,
|
|
6597
6613
|
disabled: isDisabled,
|
|
6598
6614
|
...props,
|
|
6615
|
+
type: "button",
|
|
6599
6616
|
children
|
|
6600
6617
|
}
|
|
6601
6618
|
);
|
|
@@ -6759,6 +6776,1190 @@ function StepperSeparator({
|
|
|
6759
6776
|
}
|
|
6760
6777
|
return line;
|
|
6761
6778
|
}
|
|
6779
|
+
var BannerVariant = /* @__PURE__ */ ((BannerVariant2) => {
|
|
6780
|
+
BannerVariant2["outline"] = "outline";
|
|
6781
|
+
BannerVariant2["filled"] = "filled";
|
|
6782
|
+
return BannerVariant2;
|
|
6783
|
+
})(BannerVariant || {});
|
|
6784
|
+
var BannerType = /* @__PURE__ */ ((BannerType2) => {
|
|
6785
|
+
BannerType2["info"] = "info";
|
|
6786
|
+
BannerType2["success"] = "success";
|
|
6787
|
+
BannerType2["warning"] = "warning";
|
|
6788
|
+
BannerType2["error"] = "error";
|
|
6789
|
+
return BannerType2;
|
|
6790
|
+
})(BannerType || {});
|
|
6791
|
+
var bannerAlertVariants = classVarianceAuthority.cva("rounded-bannerAlert w-full", {
|
|
6792
|
+
variants: {
|
|
6793
|
+
variant: {
|
|
6794
|
+
outline: "border border-box-border",
|
|
6795
|
+
filled: "border-none"
|
|
6796
|
+
},
|
|
6797
|
+
type: {
|
|
6798
|
+
info: "",
|
|
6799
|
+
success: "",
|
|
6800
|
+
warning: "",
|
|
6801
|
+
error: ""
|
|
6802
|
+
}
|
|
6803
|
+
},
|
|
6804
|
+
compoundVariants: [
|
|
6805
|
+
{
|
|
6806
|
+
variant: "outline",
|
|
6807
|
+
type: "info",
|
|
6808
|
+
class: "bg-bannerAlert-outline-info-background"
|
|
6809
|
+
},
|
|
6810
|
+
{
|
|
6811
|
+
variant: "outline",
|
|
6812
|
+
type: "success",
|
|
6813
|
+
class: "bg-bannerAlert-outline-success-background"
|
|
6814
|
+
},
|
|
6815
|
+
{
|
|
6816
|
+
variant: "outline",
|
|
6817
|
+
type: "warning",
|
|
6818
|
+
class: "bg-bannerAlert-outline-warning-background"
|
|
6819
|
+
},
|
|
6820
|
+
{
|
|
6821
|
+
variant: "outline",
|
|
6822
|
+
type: "error",
|
|
6823
|
+
class: "bg-bannerAlert-outline-error-background"
|
|
6824
|
+
},
|
|
6825
|
+
{
|
|
6826
|
+
variant: "filled",
|
|
6827
|
+
type: "info",
|
|
6828
|
+
class: "bg-bannerAlert-filled-info-background"
|
|
6829
|
+
},
|
|
6830
|
+
{
|
|
6831
|
+
variant: "filled",
|
|
6832
|
+
type: "success",
|
|
6833
|
+
class: "bg-bannerAlert-filled-success-background"
|
|
6834
|
+
},
|
|
6835
|
+
{
|
|
6836
|
+
variant: "filled",
|
|
6837
|
+
type: "warning",
|
|
6838
|
+
class: "bg-bannerAlert-filled-warning-background"
|
|
6839
|
+
},
|
|
6840
|
+
{
|
|
6841
|
+
variant: "filled",
|
|
6842
|
+
type: "error",
|
|
6843
|
+
class: "bg-bannerAlert-filled-error-background"
|
|
6844
|
+
}
|
|
6845
|
+
]
|
|
6846
|
+
});
|
|
6847
|
+
var bannerAlertIconVariants = classVarianceAuthority.cva("size-5", {
|
|
6848
|
+
variants: {
|
|
6849
|
+
variant: {
|
|
6850
|
+
outline: "",
|
|
6851
|
+
filled: ""
|
|
6852
|
+
},
|
|
6853
|
+
type: {
|
|
6854
|
+
info: "",
|
|
6855
|
+
success: "",
|
|
6856
|
+
warning: "",
|
|
6857
|
+
error: ""
|
|
6858
|
+
}
|
|
6859
|
+
},
|
|
6860
|
+
compoundVariants: [
|
|
6861
|
+
{
|
|
6862
|
+
variant: "outline",
|
|
6863
|
+
type: "info",
|
|
6864
|
+
class: "text-bannerAlert-outline-info-icon"
|
|
6865
|
+
},
|
|
6866
|
+
{
|
|
6867
|
+
variant: "outline",
|
|
6868
|
+
type: "success",
|
|
6869
|
+
class: "text-bannerAlert-outline-success-icon"
|
|
6870
|
+
},
|
|
6871
|
+
{
|
|
6872
|
+
variant: "outline",
|
|
6873
|
+
type: "warning",
|
|
6874
|
+
class: "text-bannerAlert-outline-warning-icon"
|
|
6875
|
+
},
|
|
6876
|
+
{
|
|
6877
|
+
variant: "outline",
|
|
6878
|
+
type: "error",
|
|
6879
|
+
class: "text-bannerAlert-outline-error-icon"
|
|
6880
|
+
},
|
|
6881
|
+
{
|
|
6882
|
+
variant: "filled",
|
|
6883
|
+
type: "info",
|
|
6884
|
+
class: "text-bannerAlert-filled-info-icon"
|
|
6885
|
+
},
|
|
6886
|
+
{
|
|
6887
|
+
variant: "filled",
|
|
6888
|
+
type: "success",
|
|
6889
|
+
class: "text-bannerAlert-filled-success-icon"
|
|
6890
|
+
},
|
|
6891
|
+
{
|
|
6892
|
+
variant: "filled",
|
|
6893
|
+
type: "warning",
|
|
6894
|
+
class: "text-bannerAlert-filled-warning-icon"
|
|
6895
|
+
},
|
|
6896
|
+
{
|
|
6897
|
+
variant: "filled",
|
|
6898
|
+
type: "error",
|
|
6899
|
+
class: "text-bannerAlert-filled-error-icon"
|
|
6900
|
+
}
|
|
6901
|
+
]
|
|
6902
|
+
});
|
|
6903
|
+
var BannerAlertIcon = ({
|
|
6904
|
+
variant: variant3,
|
|
6905
|
+
type
|
|
6906
|
+
}) => {
|
|
6907
|
+
const iconClass = bannerAlertIconVariants({ variant: variant3, type });
|
|
6908
|
+
const icons = {
|
|
6909
|
+
info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: iconClass }),
|
|
6910
|
+
success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheckBigIcon, { className: iconClass }),
|
|
6911
|
+
warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, { className: iconClass }),
|
|
6912
|
+
error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: iconClass })
|
|
6913
|
+
};
|
|
6914
|
+
return icons[type];
|
|
6915
|
+
};
|
|
6916
|
+
var BannerAlert = ({
|
|
6917
|
+
variant: variant3,
|
|
6918
|
+
type,
|
|
6919
|
+
title,
|
|
6920
|
+
description,
|
|
6921
|
+
onClose,
|
|
6922
|
+
children
|
|
6923
|
+
}) => {
|
|
6924
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: bannerAlertVariants({ variant: variant3, type }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative py-4 ps-12 pe-4", !!onClose && "pe-12"), children: [
|
|
6925
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds absolute top-4 left-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerAlertIcon, { variant: variant3, type }) }),
|
|
6926
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex-1 flex flex-col gap-3", children: [
|
|
6927
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds w-full flex flex-col gap-1", children: [
|
|
6928
|
+
title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds font-semibold leading-5 text-bannerAlert-title text-sm", children: title }),
|
|
6929
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds leading-5 text-bannerAlert-description text-sm", children: description })
|
|
6930
|
+
] }),
|
|
6931
|
+
children
|
|
6932
|
+
] }),
|
|
6933
|
+
!!onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds absolute top-2 right-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, icon: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) }) })
|
|
6934
|
+
] }) });
|
|
6935
|
+
};
|
|
6936
|
+
var dropAnimation = {
|
|
6937
|
+
sideEffects: core.defaultDropAnimationSideEffects({
|
|
6938
|
+
styles: {
|
|
6939
|
+
active: {
|
|
6940
|
+
opacity: "0.6"
|
|
6941
|
+
}
|
|
6942
|
+
}
|
|
6943
|
+
})
|
|
6944
|
+
};
|
|
6945
|
+
var DEFAULT_MEASURING = {
|
|
6946
|
+
droppable: {
|
|
6947
|
+
strategy: core.MeasuringStrategy.Always
|
|
6948
|
+
}
|
|
6949
|
+
};
|
|
6950
|
+
var DEFAULT_VIRTUAL_CARD_HEIGHT = 96;
|
|
6951
|
+
var DEFAULT_LOAD_MORE_OFFSET = 120;
|
|
6952
|
+
var KanbanColumnContext = React35__namespace.createContext(null);
|
|
6953
|
+
var KanbanColumn = React35__namespace.forwardRef(
|
|
6954
|
+
({ className, ...props }, ref) => {
|
|
6955
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("min-h-[320px]", className), ...props });
|
|
6956
|
+
}
|
|
6957
|
+
);
|
|
6958
|
+
KanbanColumn.displayName = "KanbanColumn";
|
|
6959
|
+
var KanbanColumnHeader = React35__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
6960
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex", className), ...props });
|
|
6961
|
+
});
|
|
6962
|
+
KanbanColumnHeader.displayName = "KanbanColumnHeader";
|
|
6963
|
+
var KanbanColumnTitle = React35__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
6964
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6965
|
+
"h3",
|
|
6966
|
+
{
|
|
6967
|
+
ref,
|
|
6968
|
+
className: cn("text-heading-6 font-semibold text-neutral-900", className),
|
|
6969
|
+
...props
|
|
6970
|
+
}
|
|
6971
|
+
);
|
|
6972
|
+
});
|
|
6973
|
+
KanbanColumnTitle.displayName = "KanbanColumnTitle";
|
|
6974
|
+
var KanbanColumnFooter = React35__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
6975
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6976
|
+
"div",
|
|
6977
|
+
{
|
|
6978
|
+
ref,
|
|
6979
|
+
className: cn(
|
|
6980
|
+
"border-t border-box-border px-5 py-4 text-xs text-neutral-500",
|
|
6981
|
+
className
|
|
6982
|
+
),
|
|
6983
|
+
...props
|
|
6984
|
+
}
|
|
6985
|
+
);
|
|
6986
|
+
});
|
|
6987
|
+
KanbanColumnFooter.displayName = "KanbanColumnFooter";
|
|
6988
|
+
var KanbanCard = React35__namespace.forwardRef(
|
|
6989
|
+
({ className, isDragging, isOverlay, ...props }, ref) => {
|
|
6990
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6991
|
+
"div",
|
|
6992
|
+
{
|
|
6993
|
+
ref,
|
|
6994
|
+
className: cn(
|
|
6995
|
+
"group relative rounded-2xl border border-box-border/80 bg-box-background-primary px-5 py-4 text-left shadow-[0_12px_30px_-20px_rgba(16,24,40,0.28)] transition-all duration-150 hover:-translate-y-[1px] hover:shadow-[0_18px_42px_-22px_rgba(16,24,40,0.35)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-button-primary-border-focus",
|
|
6996
|
+
isDragging && "ring-2 ring-button-primary-border-focus shadow-[0_24px_52px_-22px_rgba(16,24,40,0.45)]",
|
|
6997
|
+
isOverlay && "ring-4 ring-button-primary-border-focus/60 shadow-[0_26px_56px_-20px_rgba(16,24,40,0.5)]",
|
|
6998
|
+
className
|
|
6999
|
+
),
|
|
7000
|
+
...props
|
|
7001
|
+
}
|
|
7002
|
+
);
|
|
7003
|
+
}
|
|
7004
|
+
);
|
|
7005
|
+
KanbanCard.displayName = "KanbanCard";
|
|
7006
|
+
var KanbanColumnDragHandle = React35__namespace.forwardRef(({ className, children, ...props }, ref) => {
|
|
7007
|
+
const context = React35__namespace.useContext(KanbanColumnContext);
|
|
7008
|
+
if (!context) {
|
|
7009
|
+
throw new Error(
|
|
7010
|
+
"KanbanColumnDragHandle must be used inside a KanbanBoard column"
|
|
7011
|
+
);
|
|
7012
|
+
}
|
|
7013
|
+
const mergedRef = React35__namespace.useCallback(
|
|
7014
|
+
(node) => {
|
|
7015
|
+
context.setActivatorNodeRef(node);
|
|
7016
|
+
if (typeof ref === "function") {
|
|
7017
|
+
ref(node);
|
|
7018
|
+
} else if (ref) {
|
|
7019
|
+
ref.current = node;
|
|
7020
|
+
}
|
|
7021
|
+
},
|
|
7022
|
+
[context, ref]
|
|
7023
|
+
);
|
|
7024
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7025
|
+
"button",
|
|
7026
|
+
{
|
|
7027
|
+
ref: mergedRef,
|
|
7028
|
+
type: "button",
|
|
7029
|
+
className: cn(
|
|
7030
|
+
"inline-flex size-6 items-center justify-center rounded-full border border-transparent bg-transparent text-neutral-500 transition-colors hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-button-primary-border-focus",
|
|
7031
|
+
className
|
|
7032
|
+
),
|
|
7033
|
+
"aria-label": "Reorder column",
|
|
7034
|
+
...context.attributes,
|
|
7035
|
+
...context.listeners,
|
|
7036
|
+
...props,
|
|
7037
|
+
children: children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds sr-only", children: "Mover coluna" })
|
|
7038
|
+
}
|
|
7039
|
+
);
|
|
7040
|
+
});
|
|
7041
|
+
KanbanColumnDragHandle.displayName = "KanbanColumnDragHandle";
|
|
7042
|
+
function defaultRenderColumnHeader(context) {
|
|
7043
|
+
const { column, cardCount } = context;
|
|
7044
|
+
return /* @__PURE__ */ jsxRuntime.jsx(KanbanColumnHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds space-y-2", children: [
|
|
7045
|
+
/* @__PURE__ */ jsxRuntime.jsx(KanbanColumnTitle, { className: "nebula-ds text-heading-6 font-semibold text-typography-heading-6", children: column.title }),
|
|
7046
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds space-y-1", children: [
|
|
7047
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds inline-flex items-center rounded-full border border-button-secondary-border-default bg-button-secondary-background-default px-3 py-1 text-xs font-medium text-tag-text", children: cardCount }),
|
|
7048
|
+
column.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nebula-ds text-xs text-neutral-500", children: column.description }) : null
|
|
7049
|
+
] })
|
|
7050
|
+
] }) });
|
|
7051
|
+
}
|
|
7052
|
+
function defaultRenderEmptyState() {
|
|
7053
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds w-full rounded-xl border border-dashed border-neutral-200 p-4 text-center text-sm text-neutral-500", children: "Empty column" });
|
|
7054
|
+
}
|
|
7055
|
+
function getCardSortDisabled(card, column) {
|
|
7056
|
+
const disableDroppable = column.allowDrop === false;
|
|
7057
|
+
const disableDraggable = card.isDraggable === false;
|
|
7058
|
+
if (!disableDroppable && !disableDraggable) {
|
|
7059
|
+
return false;
|
|
7060
|
+
}
|
|
7061
|
+
return {
|
|
7062
|
+
draggable: disableDraggable,
|
|
7063
|
+
droppable: disableDroppable
|
|
7064
|
+
};
|
|
7065
|
+
}
|
|
7066
|
+
function calculateManualInsertionIndex({
|
|
7067
|
+
overData,
|
|
7068
|
+
fromColumnId,
|
|
7069
|
+
targetColumnId,
|
|
7070
|
+
columns
|
|
7071
|
+
}) {
|
|
7072
|
+
const targetColumn = columns.find((column) => column.id === targetColumnId);
|
|
7073
|
+
if (!targetColumn) {
|
|
7074
|
+
return null;
|
|
7075
|
+
}
|
|
7076
|
+
if (overData.type === "column-droppable") {
|
|
7077
|
+
const activeIsSameColumn2 = targetColumnId === fromColumnId;
|
|
7078
|
+
if (activeIsSameColumn2) {
|
|
7079
|
+
return targetColumn.cards.length - 1;
|
|
7080
|
+
}
|
|
7081
|
+
return targetColumn.cards.length;
|
|
7082
|
+
}
|
|
7083
|
+
const activeIsSameColumn = targetColumnId === fromColumnId;
|
|
7084
|
+
const overIndex = overData.index;
|
|
7085
|
+
if (activeIsSameColumn) {
|
|
7086
|
+
return clampInsertIndex(overIndex, targetColumn.cards.length - 1);
|
|
7087
|
+
}
|
|
7088
|
+
return clampInsertIndex(overIndex, targetColumn.cards.length);
|
|
7089
|
+
}
|
|
7090
|
+
function moveCardBetweenColumns({
|
|
7091
|
+
columns,
|
|
7092
|
+
card,
|
|
7093
|
+
cardId,
|
|
7094
|
+
fromColumnId,
|
|
7095
|
+
toColumnId,
|
|
7096
|
+
toIndex,
|
|
7097
|
+
getCardId
|
|
7098
|
+
}) {
|
|
7099
|
+
if (fromColumnId === toColumnId) {
|
|
7100
|
+
return columns.map((column) => {
|
|
7101
|
+
if (column.id !== fromColumnId) {
|
|
7102
|
+
return column;
|
|
7103
|
+
}
|
|
7104
|
+
const currentIndex = column.cards.findIndex(
|
|
7105
|
+
(item) => getCardId(item) === cardId
|
|
7106
|
+
);
|
|
7107
|
+
if (currentIndex === -1) {
|
|
7108
|
+
return column;
|
|
7109
|
+
}
|
|
7110
|
+
const maxIndex = column.cards.length > 0 ? column.cards.length - 1 : 0;
|
|
7111
|
+
const clampedIndex = clampIndex(toIndex, maxIndex);
|
|
7112
|
+
if (currentIndex === clampedIndex) {
|
|
7113
|
+
return column;
|
|
7114
|
+
}
|
|
7115
|
+
return {
|
|
7116
|
+
...column,
|
|
7117
|
+
cards: sortable.arrayMove(column.cards, currentIndex, clampedIndex)
|
|
7118
|
+
};
|
|
7119
|
+
});
|
|
7120
|
+
}
|
|
7121
|
+
return columns.map((column) => {
|
|
7122
|
+
if (column.id === fromColumnId) {
|
|
7123
|
+
return {
|
|
7124
|
+
...column,
|
|
7125
|
+
cards: column.cards.filter((item) => getCardId(item) !== cardId)
|
|
7126
|
+
};
|
|
7127
|
+
}
|
|
7128
|
+
if (column.id === toColumnId) {
|
|
7129
|
+
const filteredCards = column.cards.filter(
|
|
7130
|
+
(item) => getCardId(item) !== cardId
|
|
7131
|
+
);
|
|
7132
|
+
const nextCards = [...filteredCards];
|
|
7133
|
+
const insertIndex = clampInsertIndex(toIndex, filteredCards.length);
|
|
7134
|
+
nextCards.splice(insertIndex, 0, card);
|
|
7135
|
+
return {
|
|
7136
|
+
...column,
|
|
7137
|
+
cards: nextCards
|
|
7138
|
+
};
|
|
7139
|
+
}
|
|
7140
|
+
return column;
|
|
7141
|
+
});
|
|
7142
|
+
}
|
|
7143
|
+
function clampIndex(value, max) {
|
|
7144
|
+
if (max < 0) {
|
|
7145
|
+
return 0;
|
|
7146
|
+
}
|
|
7147
|
+
return Math.min(Math.max(value, 0), max);
|
|
7148
|
+
}
|
|
7149
|
+
function clampInsertIndex(value, length) {
|
|
7150
|
+
if (length < 0) {
|
|
7151
|
+
return 0;
|
|
7152
|
+
}
|
|
7153
|
+
if (value < 0) {
|
|
7154
|
+
return 0;
|
|
7155
|
+
}
|
|
7156
|
+
if (value > length) {
|
|
7157
|
+
return length;
|
|
7158
|
+
}
|
|
7159
|
+
return value;
|
|
7160
|
+
}
|
|
7161
|
+
function columnMoveCrossesLockedColumns({
|
|
7162
|
+
columns,
|
|
7163
|
+
fromIndex,
|
|
7164
|
+
toIndex
|
|
7165
|
+
}) {
|
|
7166
|
+
if (fromIndex === toIndex) {
|
|
7167
|
+
return false;
|
|
7168
|
+
}
|
|
7169
|
+
const [start, end] = fromIndex < toIndex ? [fromIndex + 1, toIndex] : [toIndex, fromIndex - 1];
|
|
7170
|
+
for (let index = start; index <= end; index += 1) {
|
|
7171
|
+
const column = columns[index];
|
|
7172
|
+
if (column && column.canDrag === false) {
|
|
7173
|
+
return true;
|
|
7174
|
+
}
|
|
7175
|
+
}
|
|
7176
|
+
const targetColumn = columns[toIndex];
|
|
7177
|
+
if (targetColumn?.canDrag === false) {
|
|
7178
|
+
return true;
|
|
7179
|
+
}
|
|
7180
|
+
return false;
|
|
7181
|
+
}
|
|
7182
|
+
function KanbanSortableCard({
|
|
7183
|
+
card,
|
|
7184
|
+
cardIndex,
|
|
7185
|
+
column,
|
|
7186
|
+
columnIndex,
|
|
7187
|
+
renderCard,
|
|
7188
|
+
getCardId,
|
|
7189
|
+
activeCardId,
|
|
7190
|
+
virtualizer,
|
|
7191
|
+
virtualizationEnabled = false,
|
|
7192
|
+
cardId,
|
|
7193
|
+
isManualOrdering,
|
|
7194
|
+
isDropTarget
|
|
7195
|
+
}) {
|
|
7196
|
+
const sortable$1 = sortable.useSortable({
|
|
7197
|
+
id: cardId ?? getCardId(card),
|
|
7198
|
+
data: {
|
|
7199
|
+
type: "card",
|
|
7200
|
+
card,
|
|
7201
|
+
columnId: column.id,
|
|
7202
|
+
index: cardIndex,
|
|
7203
|
+
ordering: column.ordering ?? "manual"
|
|
7204
|
+
},
|
|
7205
|
+
disabled: getCardSortDisabled(card, column),
|
|
7206
|
+
animateLayoutChanges: (args) => {
|
|
7207
|
+
if ((column.ordering ?? "manual") === "external") {
|
|
7208
|
+
return false;
|
|
7209
|
+
}
|
|
7210
|
+
return sortable.defaultAnimateLayoutChanges({
|
|
7211
|
+
...args,
|
|
7212
|
+
wasDragging: true
|
|
7213
|
+
});
|
|
7214
|
+
}
|
|
7215
|
+
});
|
|
7216
|
+
const {
|
|
7217
|
+
setNodeRef,
|
|
7218
|
+
attributes,
|
|
7219
|
+
listeners,
|
|
7220
|
+
transform,
|
|
7221
|
+
transition,
|
|
7222
|
+
isDragging
|
|
7223
|
+
} = sortable$1;
|
|
7224
|
+
const composedRef = React35__namespace.useCallback(
|
|
7225
|
+
(node) => {
|
|
7226
|
+
setNodeRef(node);
|
|
7227
|
+
if (virtualizationEnabled && node) {
|
|
7228
|
+
virtualizer?.measureElement(node);
|
|
7229
|
+
}
|
|
7230
|
+
},
|
|
7231
|
+
[setNodeRef, virtualizer, virtualizationEnabled]
|
|
7232
|
+
);
|
|
7233
|
+
const cardContent = renderCard({
|
|
7234
|
+
card,
|
|
7235
|
+
column,
|
|
7236
|
+
columnIndex,
|
|
7237
|
+
index: cardIndex,
|
|
7238
|
+
isDragging,
|
|
7239
|
+
isOverlay: false
|
|
7240
|
+
});
|
|
7241
|
+
const resolvedCardId = cardId ?? getCardId(card);
|
|
7242
|
+
const isActiveCard = activeCardId === resolvedCardId;
|
|
7243
|
+
const showManualPreview = isManualOrdering && isDropTarget && isActiveCard;
|
|
7244
|
+
const cardStyles = {
|
|
7245
|
+
transform: utilities.CSS.Translate.toString(transform),
|
|
7246
|
+
transition
|
|
7247
|
+
};
|
|
7248
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7249
|
+
"div",
|
|
7250
|
+
{
|
|
7251
|
+
ref: composedRef,
|
|
7252
|
+
style: cardStyles,
|
|
7253
|
+
"data-card-id": resolvedCardId,
|
|
7254
|
+
className: cn(
|
|
7255
|
+
"relative touch-pan-y transition-transform duration-150",
|
|
7256
|
+
isDragging && "z-10"
|
|
7257
|
+
),
|
|
7258
|
+
...attributes,
|
|
7259
|
+
...listeners,
|
|
7260
|
+
children: [
|
|
7261
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7262
|
+
"div",
|
|
7263
|
+
{
|
|
7264
|
+
className: cn(
|
|
7265
|
+
"transition-[opacity,transform] duration-150",
|
|
7266
|
+
isActiveCard ? "pointer-events-none opacity-0" : "opacity-100",
|
|
7267
|
+
isDragging && "scale-[0.99]"
|
|
7268
|
+
),
|
|
7269
|
+
children: cardContent
|
|
7270
|
+
}
|
|
7271
|
+
),
|
|
7272
|
+
showManualPreview ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds pointer-events-none absolute inset-0 rounded-2xl border-2 border-dashed border-button-primary-border-focus bg-button-primary-border-focus/10" }) : null
|
|
7273
|
+
]
|
|
7274
|
+
}
|
|
7275
|
+
);
|
|
7276
|
+
}
|
|
7277
|
+
var KanbanColumnBodyInner = ({
|
|
7278
|
+
column,
|
|
7279
|
+
columnIndex,
|
|
7280
|
+
renderCard,
|
|
7281
|
+
renderEmptyState,
|
|
7282
|
+
getCardId,
|
|
7283
|
+
activeCardId,
|
|
7284
|
+
columnContext,
|
|
7285
|
+
isManualOrdering,
|
|
7286
|
+
isDropTarget
|
|
7287
|
+
}, ref) => {
|
|
7288
|
+
const scrollRef = React35__namespace.useRef(null);
|
|
7289
|
+
const combinedRef = React35__namespace.useCallback(
|
|
7290
|
+
(node) => {
|
|
7291
|
+
scrollRef.current = node;
|
|
7292
|
+
if (typeof ref === "function") {
|
|
7293
|
+
ref(node);
|
|
7294
|
+
} else if (ref) {
|
|
7295
|
+
ref.current = node;
|
|
7296
|
+
}
|
|
7297
|
+
},
|
|
7298
|
+
[ref]
|
|
7299
|
+
);
|
|
7300
|
+
const virtualization = column.virtualization;
|
|
7301
|
+
const virtualizationEnabled = Boolean(virtualization?.enabled);
|
|
7302
|
+
const cardIds = React35__namespace.useMemo(
|
|
7303
|
+
() => column.cards.map((card) => getCardId(card)),
|
|
7304
|
+
[column.cards, getCardId]
|
|
7305
|
+
);
|
|
7306
|
+
const virtualizer = reactVirtual.useVirtualizer({
|
|
7307
|
+
count: virtualizationEnabled ? column.cards.length : 0,
|
|
7308
|
+
getScrollElement: () => scrollRef.current,
|
|
7309
|
+
estimateSize: () => virtualization?.estimateCardHeight ?? DEFAULT_VIRTUAL_CARD_HEIGHT,
|
|
7310
|
+
overscan: virtualization?.overscan ?? 6,
|
|
7311
|
+
enabled: virtualizationEnabled
|
|
7312
|
+
});
|
|
7313
|
+
const { onLoadMore, hasMore, isLoadingMore, loadMoreOffset } = column;
|
|
7314
|
+
React35__namespace.useEffect(() => {
|
|
7315
|
+
if (!onLoadMore || !hasMore || isLoadingMore) {
|
|
7316
|
+
return;
|
|
7317
|
+
}
|
|
7318
|
+
const node = scrollRef.current;
|
|
7319
|
+
if (!node) {
|
|
7320
|
+
return;
|
|
7321
|
+
}
|
|
7322
|
+
const handleScroll = () => {
|
|
7323
|
+
const remaining = node.scrollHeight - node.scrollTop - node.clientHeight;
|
|
7324
|
+
const offset = loadMoreOffset ?? DEFAULT_LOAD_MORE_OFFSET;
|
|
7325
|
+
if (remaining <= offset) {
|
|
7326
|
+
onLoadMore?.();
|
|
7327
|
+
}
|
|
7328
|
+
};
|
|
7329
|
+
node.addEventListener("scroll", handleScroll);
|
|
7330
|
+
return () => {
|
|
7331
|
+
node.removeEventListener("scroll", handleScroll);
|
|
7332
|
+
};
|
|
7333
|
+
}, [hasMore, isLoadingMore, loadMoreOffset, onLoadMore]);
|
|
7334
|
+
const columnBodyClasses = cn(
|
|
7335
|
+
"flex-1 overflow-y-auto px-4 pb-4 pt-1",
|
|
7336
|
+
column.cards.length === 0 && "flex items-center justify-center"
|
|
7337
|
+
);
|
|
7338
|
+
const emptyState = renderEmptyState?.(columnContext) ?? column.emptyState ?? defaultRenderEmptyState();
|
|
7339
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: combinedRef, className: columnBodyClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(sortable.SortableContext, { items: cardIds, strategy: sortable.verticalListSortingStrategy, children: [
|
|
7340
|
+
column.cards.length === 0 ? isManualOrdering && isDropTarget && activeCardId ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex h-24 items-center justify-center rounded-2xl border-2 border-dashed border-button-primary-border-focus bg-button-primary-border-focus/10" }) : emptyState : virtualizationEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
7341
|
+
"div",
|
|
7342
|
+
{
|
|
7343
|
+
style: {
|
|
7344
|
+
height: virtualizer.getTotalSize(),
|
|
7345
|
+
position: "relative"
|
|
7346
|
+
},
|
|
7347
|
+
children: virtualizer.getVirtualItems().map((virtualRow) => {
|
|
7348
|
+
const card = column.cards[virtualRow.index];
|
|
7349
|
+
if (!card) {
|
|
7350
|
+
return null;
|
|
7351
|
+
}
|
|
7352
|
+
const cardId = getCardId(card);
|
|
7353
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7354
|
+
"div",
|
|
7355
|
+
{
|
|
7356
|
+
"data-index": virtualRow.index,
|
|
7357
|
+
style: {
|
|
7358
|
+
position: "absolute",
|
|
7359
|
+
top: 0,
|
|
7360
|
+
left: 0,
|
|
7361
|
+
width: "100%",
|
|
7362
|
+
transform: `translateY(${virtualRow.start}px)`
|
|
7363
|
+
},
|
|
7364
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7365
|
+
KanbanSortableCard,
|
|
7366
|
+
{
|
|
7367
|
+
card,
|
|
7368
|
+
cardIndex: virtualRow.index,
|
|
7369
|
+
column,
|
|
7370
|
+
columnIndex,
|
|
7371
|
+
renderCard,
|
|
7372
|
+
getCardId,
|
|
7373
|
+
activeCardId,
|
|
7374
|
+
virtualizer,
|
|
7375
|
+
virtualizationEnabled,
|
|
7376
|
+
cardId,
|
|
7377
|
+
isManualOrdering,
|
|
7378
|
+
isDropTarget
|
|
7379
|
+
}
|
|
7380
|
+
)
|
|
7381
|
+
},
|
|
7382
|
+
virtualRow.key
|
|
7383
|
+
);
|
|
7384
|
+
})
|
|
7385
|
+
}
|
|
7386
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex flex-col gap-4", children: column.cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
7387
|
+
KanbanSortableCard,
|
|
7388
|
+
{
|
|
7389
|
+
card,
|
|
7390
|
+
cardIndex: index,
|
|
7391
|
+
column,
|
|
7392
|
+
columnIndex,
|
|
7393
|
+
renderCard,
|
|
7394
|
+
getCardId,
|
|
7395
|
+
activeCardId,
|
|
7396
|
+
isManualOrdering,
|
|
7397
|
+
isDropTarget
|
|
7398
|
+
},
|
|
7399
|
+
getCardId(card)
|
|
7400
|
+
)) }),
|
|
7401
|
+
column.hasMore && column.isLoadingMore ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds mt-3 flex justify-center text-xs text-neutral-500", children: "..." }) : null
|
|
7402
|
+
] }) });
|
|
7403
|
+
};
|
|
7404
|
+
var KanbanColumnBodyBase = React35__namespace.forwardRef(KanbanColumnBodyInner);
|
|
7405
|
+
KanbanColumnBodyBase.displayName = "KanbanColumnBody";
|
|
7406
|
+
var KanbanColumnBody = KanbanColumnBodyBase;
|
|
7407
|
+
var KANBAN_COLUMN_BASE_CLASSNAME = "flex h-full w-full min-w-[360px] max-w-[360px] flex-col rounded-2xl box-content border bg-table-background transition-[box-shadow,transform,background-color]";
|
|
7408
|
+
function KanbanSortableColumn({
|
|
7409
|
+
column,
|
|
7410
|
+
columnIndex,
|
|
7411
|
+
className,
|
|
7412
|
+
renderCard,
|
|
7413
|
+
renderColumnHeader,
|
|
7414
|
+
renderColumnFooter,
|
|
7415
|
+
renderEmptyState,
|
|
7416
|
+
getCardId,
|
|
7417
|
+
isManualTarget,
|
|
7418
|
+
isExternalTarget,
|
|
7419
|
+
columnContext,
|
|
7420
|
+
activeCardId
|
|
7421
|
+
}) {
|
|
7422
|
+
const {
|
|
7423
|
+
setNodeRef,
|
|
7424
|
+
setActivatorNodeRef,
|
|
7425
|
+
listeners,
|
|
7426
|
+
attributes,
|
|
7427
|
+
transform,
|
|
7428
|
+
transition,
|
|
7429
|
+
isDragging
|
|
7430
|
+
} = sortable.useSortable({
|
|
7431
|
+
id: column.id,
|
|
7432
|
+
data: {
|
|
7433
|
+
type: "column",
|
|
7434
|
+
column,
|
|
7435
|
+
index: columnIndex
|
|
7436
|
+
},
|
|
7437
|
+
disabled: column.canDrag === false
|
|
7438
|
+
});
|
|
7439
|
+
const { setNodeRef: setDroppableRef } = core.useDroppable({
|
|
7440
|
+
id: `${column.id}-droppable`,
|
|
7441
|
+
data: {
|
|
7442
|
+
type: "column-droppable",
|
|
7443
|
+
columnId: column.id,
|
|
7444
|
+
ordering: column.ordering ?? "manual",
|
|
7445
|
+
allowDrop: column.allowDrop !== false
|
|
7446
|
+
},
|
|
7447
|
+
disabled: column.allowDrop === false
|
|
7448
|
+
});
|
|
7449
|
+
const columnContextValue = React35__namespace.useMemo(
|
|
7450
|
+
() => ({
|
|
7451
|
+
columnId: column.id,
|
|
7452
|
+
setActivatorNodeRef,
|
|
7453
|
+
listeners,
|
|
7454
|
+
attributes,
|
|
7455
|
+
isDragging,
|
|
7456
|
+
isDragDisabled: column.canDrag === false
|
|
7457
|
+
}),
|
|
7458
|
+
[
|
|
7459
|
+
attributes,
|
|
7460
|
+
column.canDrag,
|
|
7461
|
+
column.id,
|
|
7462
|
+
isDragging,
|
|
7463
|
+
listeners,
|
|
7464
|
+
setActivatorNodeRef
|
|
7465
|
+
]
|
|
7466
|
+
);
|
|
7467
|
+
const ordering = column.ordering ?? "manual";
|
|
7468
|
+
const isManualOrdering = ordering === "manual";
|
|
7469
|
+
const columnClassNames = cn(
|
|
7470
|
+
KANBAN_COLUMN_BASE_CLASSNAME,
|
|
7471
|
+
isDragging && "translate-y-[1px]",
|
|
7472
|
+
column.canDrag === false && "cursor-default",
|
|
7473
|
+
isManualTarget && isManualOrdering && "ring-2 ring-button-primary-border-focus ring-offset-2 ring-offset-transparent",
|
|
7474
|
+
isExternalTarget && !isManualOrdering && "ring-2 ring-button-primary-border-focus ring-offset-2 ring-offset-transparent",
|
|
7475
|
+
className
|
|
7476
|
+
);
|
|
7477
|
+
return /* @__PURE__ */ jsxRuntime.jsx(KanbanColumnContext.Provider, { value: columnContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7478
|
+
KanbanColumn,
|
|
7479
|
+
{
|
|
7480
|
+
ref: setNodeRef,
|
|
7481
|
+
className: columnClassNames,
|
|
7482
|
+
style: {
|
|
7483
|
+
transform: utilities.CSS.Translate.toString(transform),
|
|
7484
|
+
transition
|
|
7485
|
+
},
|
|
7486
|
+
"data-column-id": column.id,
|
|
7487
|
+
"data-ordering": column.ordering ?? "manual",
|
|
7488
|
+
children: [
|
|
7489
|
+
renderColumnHeader ? renderColumnHeader(columnContext) : defaultRenderColumnHeader(columnContext),
|
|
7490
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7491
|
+
KanbanColumnBody,
|
|
7492
|
+
{
|
|
7493
|
+
ref: setDroppableRef,
|
|
7494
|
+
column,
|
|
7495
|
+
columnIndex,
|
|
7496
|
+
renderCard,
|
|
7497
|
+
renderEmptyState,
|
|
7498
|
+
getCardId,
|
|
7499
|
+
activeCardId,
|
|
7500
|
+
columnContext,
|
|
7501
|
+
isManualOrdering,
|
|
7502
|
+
isDropTarget: columnContext.isDropTarget
|
|
7503
|
+
}
|
|
7504
|
+
),
|
|
7505
|
+
column.footer || renderColumnFooter ? renderColumnFooter ? renderColumnFooter(columnContext) : /* @__PURE__ */ jsxRuntime.jsx(KanbanColumnFooter, { children: column.footer }) : null
|
|
7506
|
+
]
|
|
7507
|
+
}
|
|
7508
|
+
) });
|
|
7509
|
+
}
|
|
7510
|
+
function renderCardOverlay({
|
|
7511
|
+
activeCard,
|
|
7512
|
+
columns,
|
|
7513
|
+
renderCard
|
|
7514
|
+
}) {
|
|
7515
|
+
const column = columns.find((item) => item.id === activeCard.columnId);
|
|
7516
|
+
if (!column) {
|
|
7517
|
+
return null;
|
|
7518
|
+
}
|
|
7519
|
+
return renderCard({
|
|
7520
|
+
card: activeCard.card,
|
|
7521
|
+
column,
|
|
7522
|
+
columnIndex: columns.indexOf(column),
|
|
7523
|
+
index: column.cards.findIndex((card) => card.id === activeCard.card.id),
|
|
7524
|
+
isDragging: true,
|
|
7525
|
+
isOverlay: true
|
|
7526
|
+
});
|
|
7527
|
+
}
|
|
7528
|
+
function renderColumnOverlay({
|
|
7529
|
+
activeColumn,
|
|
7530
|
+
renderCard,
|
|
7531
|
+
renderColumnHeader,
|
|
7532
|
+
renderColumnFooter,
|
|
7533
|
+
renderEmptyState,
|
|
7534
|
+
columnClassName,
|
|
7535
|
+
sanitizedColumns
|
|
7536
|
+
}) {
|
|
7537
|
+
const column = sanitizedColumns.find((item) => item.id === activeColumn.id);
|
|
7538
|
+
if (!column) {
|
|
7539
|
+
return null;
|
|
7540
|
+
}
|
|
7541
|
+
const columnContext = {
|
|
7542
|
+
column,
|
|
7543
|
+
columnIndex: sanitizedColumns.indexOf(column),
|
|
7544
|
+
cardCount: column.cards.length,
|
|
7545
|
+
isDropTarget: false,
|
|
7546
|
+
isDropTargetExternal: false,
|
|
7547
|
+
isDragDisabled: column.canDrag === false
|
|
7548
|
+
};
|
|
7549
|
+
const computedColumnClassName = typeof columnClassName === "function" ? columnClassName(columnContext) : columnClassName;
|
|
7550
|
+
const overlayColumnContext = {
|
|
7551
|
+
columnId: activeColumn.id,
|
|
7552
|
+
setActivatorNodeRef: () => {
|
|
7553
|
+
},
|
|
7554
|
+
listeners: void 0,
|
|
7555
|
+
attributes: {},
|
|
7556
|
+
isDragging: false,
|
|
7557
|
+
isDragDisabled: true
|
|
7558
|
+
};
|
|
7559
|
+
return /* @__PURE__ */ jsxRuntime.jsx(KanbanColumnContext.Provider, { value: overlayColumnContext, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7560
|
+
KanbanColumn,
|
|
7561
|
+
{
|
|
7562
|
+
className: cn(KANBAN_COLUMN_BASE_CLASSNAME, computedColumnClassName),
|
|
7563
|
+
children: [
|
|
7564
|
+
renderColumnHeader ? renderColumnHeader(columnContext) : defaultRenderColumnHeader(columnContext),
|
|
7565
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex flex-col gap-4 px-4 pb-4 pt-1", children: column.cards.length === 0 ? renderEmptyState?.(columnContext) ?? column.emptyState ?? defaultRenderEmptyState() : column.cards.map(
|
|
7566
|
+
(card, index) => renderCard({
|
|
7567
|
+
card,
|
|
7568
|
+
column,
|
|
7569
|
+
columnIndex: columnContext.columnIndex,
|
|
7570
|
+
index,
|
|
7571
|
+
isDragging: false,
|
|
7572
|
+
isOverlay: true
|
|
7573
|
+
})
|
|
7574
|
+
) }),
|
|
7575
|
+
column.footer || renderColumnFooter ? renderColumnFooter ? renderColumnFooter(columnContext) : /* @__PURE__ */ jsxRuntime.jsx(KanbanColumnFooter, { children: column.footer }) : null
|
|
7576
|
+
]
|
|
7577
|
+
}
|
|
7578
|
+
) });
|
|
7579
|
+
}
|
|
7580
|
+
function KanbanBoard({
|
|
7581
|
+
columns,
|
|
7582
|
+
renderCard,
|
|
7583
|
+
renderColumnHeader,
|
|
7584
|
+
renderColumnFooter,
|
|
7585
|
+
renderEmptyState,
|
|
7586
|
+
getCardId: getCardIdProp,
|
|
7587
|
+
onCardDrop,
|
|
7588
|
+
onColumnDrop,
|
|
7589
|
+
className,
|
|
7590
|
+
columnClassName,
|
|
7591
|
+
collisionDetection,
|
|
7592
|
+
modifiers,
|
|
7593
|
+
sensors: sensorsProp,
|
|
7594
|
+
measuring
|
|
7595
|
+
}) {
|
|
7596
|
+
const getCardId = React35__namespace.useCallback(
|
|
7597
|
+
(card) => getCardIdProp ? getCardIdProp(card) : card.id,
|
|
7598
|
+
[getCardIdProp]
|
|
7599
|
+
);
|
|
7600
|
+
const defaultSensors = core.useSensors(
|
|
7601
|
+
core.useSensor(core.PointerSensor, {
|
|
7602
|
+
activationConstraint: {
|
|
7603
|
+
distance: 6
|
|
7604
|
+
}
|
|
7605
|
+
}),
|
|
7606
|
+
core.useSensor(core.TouchSensor, {
|
|
7607
|
+
activationConstraint: {
|
|
7608
|
+
delay: 120,
|
|
7609
|
+
tolerance: 6
|
|
7610
|
+
}
|
|
7611
|
+
}),
|
|
7612
|
+
core.useSensor(core.KeyboardSensor, {
|
|
7613
|
+
coordinateGetter: sortable.sortableKeyboardCoordinates
|
|
7614
|
+
})
|
|
7615
|
+
);
|
|
7616
|
+
const sensors = sensorsProp ?? defaultSensors;
|
|
7617
|
+
const measuringConfig = measuring ?? DEFAULT_MEASURING;
|
|
7618
|
+
const columnMap = React35__namespace.useMemo(
|
|
7619
|
+
() => new Map(columns.map((column) => [column.id, column])),
|
|
7620
|
+
[columns]
|
|
7621
|
+
);
|
|
7622
|
+
const manualDropPosition = React35__namespace.useRef(null);
|
|
7623
|
+
const [activeCard, setActiveCard] = React35__namespace.useState(null);
|
|
7624
|
+
const [activeColumn, setActiveColumn] = React35__namespace.useState(null);
|
|
7625
|
+
const [hoveredColumnId, setHoveredColumnId] = React35__namespace.useState(null);
|
|
7626
|
+
const [projectedColumns, setProjectedColumns] = React35__namespace.useState(null);
|
|
7627
|
+
const sanitizedColumns = projectedColumns ?? columns;
|
|
7628
|
+
React35__namespace.useEffect(() => {
|
|
7629
|
+
if (!activeCard && !activeColumn) {
|
|
7630
|
+
setProjectedColumns(null);
|
|
7631
|
+
}
|
|
7632
|
+
}, [columns, activeCard, activeColumn]);
|
|
7633
|
+
const handleDragStart = React35__namespace.useCallback(
|
|
7634
|
+
(event) => {
|
|
7635
|
+
const data = event.active.data.current;
|
|
7636
|
+
if (!data) {
|
|
7637
|
+
return;
|
|
7638
|
+
}
|
|
7639
|
+
if (data.type === "card") {
|
|
7640
|
+
setActiveCard({
|
|
7641
|
+
id: getCardId(data.card),
|
|
7642
|
+
columnId: data.columnId,
|
|
7643
|
+
card: data.card
|
|
7644
|
+
});
|
|
7645
|
+
setHoveredColumnId(data.columnId);
|
|
7646
|
+
}
|
|
7647
|
+
if (data.type === "column") {
|
|
7648
|
+
setActiveColumn({
|
|
7649
|
+
id: data.column.id,
|
|
7650
|
+
column: data.column,
|
|
7651
|
+
index: data.index
|
|
7652
|
+
});
|
|
7653
|
+
}
|
|
7654
|
+
},
|
|
7655
|
+
[getCardId]
|
|
7656
|
+
);
|
|
7657
|
+
const handleDragOver = React35__namespace.useCallback(
|
|
7658
|
+
(event) => {
|
|
7659
|
+
const { active, over } = event;
|
|
7660
|
+
if (!over) {
|
|
7661
|
+
setHoveredColumnId(null);
|
|
7662
|
+
return;
|
|
7663
|
+
}
|
|
7664
|
+
const activeData = active.data.current;
|
|
7665
|
+
const overData = over.data.current;
|
|
7666
|
+
if (!activeData) {
|
|
7667
|
+
return;
|
|
7668
|
+
}
|
|
7669
|
+
if (activeData.type === "card") {
|
|
7670
|
+
if (!activeCard) {
|
|
7671
|
+
return;
|
|
7672
|
+
}
|
|
7673
|
+
const fromColumnId = activeCard.columnId;
|
|
7674
|
+
const activeCardId = getCardId(activeData.card);
|
|
7675
|
+
const baseColumns = projectedColumns ?? columns;
|
|
7676
|
+
if (overData?.type === "card" || overData?.type === "column-droppable") {
|
|
7677
|
+
const targetColumnId = overData.columnId;
|
|
7678
|
+
const targetColumn = columnMap.get(targetColumnId);
|
|
7679
|
+
if (!targetColumn || targetColumn.allowDrop === false) {
|
|
7680
|
+
setHoveredColumnId(null);
|
|
7681
|
+
return;
|
|
7682
|
+
}
|
|
7683
|
+
const ordering = targetColumn.ordering ?? "manual";
|
|
7684
|
+
setHoveredColumnId(targetColumnId);
|
|
7685
|
+
if (ordering === "manual") {
|
|
7686
|
+
const nextIndex = calculateManualInsertionIndex({
|
|
7687
|
+
overData,
|
|
7688
|
+
fromColumnId,
|
|
7689
|
+
targetColumnId,
|
|
7690
|
+
columns: baseColumns
|
|
7691
|
+
});
|
|
7692
|
+
if (nextIndex === null) {
|
|
7693
|
+
return;
|
|
7694
|
+
}
|
|
7695
|
+
const currentPosition = manualDropPosition.current;
|
|
7696
|
+
const positionChanged = !currentPosition || currentPosition.columnId !== targetColumnId || currentPosition.index !== nextIndex;
|
|
7697
|
+
if (positionChanged) {
|
|
7698
|
+
setProjectedColumns(() => {
|
|
7699
|
+
return moveCardBetweenColumns({
|
|
7700
|
+
columns,
|
|
7701
|
+
card: activeData.card,
|
|
7702
|
+
cardId: activeCardId,
|
|
7703
|
+
fromColumnId,
|
|
7704
|
+
toColumnId: targetColumnId,
|
|
7705
|
+
toIndex: nextIndex,
|
|
7706
|
+
getCardId
|
|
7707
|
+
});
|
|
7708
|
+
});
|
|
7709
|
+
manualDropPosition.current = {
|
|
7710
|
+
columnId: targetColumnId,
|
|
7711
|
+
index: nextIndex
|
|
7712
|
+
};
|
|
7713
|
+
}
|
|
7714
|
+
} else {
|
|
7715
|
+
setProjectedColumns(null);
|
|
7716
|
+
manualDropPosition.current = null;
|
|
7717
|
+
}
|
|
7718
|
+
} else {
|
|
7719
|
+
setHoveredColumnId(null);
|
|
7720
|
+
manualDropPosition.current = null;
|
|
7721
|
+
}
|
|
7722
|
+
}
|
|
7723
|
+
if (activeData.type === "column" && activeColumn) {
|
|
7724
|
+
if (!overData || overData.type !== "column" && overData.type !== "column-droppable") {
|
|
7725
|
+
setProjectedColumns(null);
|
|
7726
|
+
setHoveredColumnId(null);
|
|
7727
|
+
manualDropPosition.current = null;
|
|
7728
|
+
return;
|
|
7729
|
+
}
|
|
7730
|
+
setHoveredColumnId(null);
|
|
7731
|
+
manualDropPosition.current = null;
|
|
7732
|
+
const baseColumns = projectedColumns ?? columns;
|
|
7733
|
+
const fromIndex = baseColumns.findIndex(
|
|
7734
|
+
(column) => column.id === activeColumn.id
|
|
7735
|
+
);
|
|
7736
|
+
const targetColumnId = overData.type === "column" ? overData.column.id : overData.columnId;
|
|
7737
|
+
const targetIndex = baseColumns.findIndex(
|
|
7738
|
+
(column) => column.id === targetColumnId
|
|
7739
|
+
);
|
|
7740
|
+
if (targetIndex === -1 || targetIndex === fromIndex) {
|
|
7741
|
+
setProjectedColumns(baseColumns === columns ? null : baseColumns);
|
|
7742
|
+
return;
|
|
7743
|
+
}
|
|
7744
|
+
if (columnMoveCrossesLockedColumns({
|
|
7745
|
+
columns: baseColumns,
|
|
7746
|
+
fromIndex,
|
|
7747
|
+
toIndex: targetIndex
|
|
7748
|
+
})) {
|
|
7749
|
+
return;
|
|
7750
|
+
}
|
|
7751
|
+
setProjectedColumns(sortable.arrayMove(baseColumns, fromIndex, targetIndex));
|
|
7752
|
+
}
|
|
7753
|
+
},
|
|
7754
|
+
[activeCard, activeColumn, columns, columnMap, getCardId, projectedColumns]
|
|
7755
|
+
);
|
|
7756
|
+
const resetDragState = React35__namespace.useCallback(() => {
|
|
7757
|
+
setActiveCard(null);
|
|
7758
|
+
setActiveColumn(null);
|
|
7759
|
+
setHoveredColumnId(null);
|
|
7760
|
+
setProjectedColumns(null);
|
|
7761
|
+
manualDropPosition.current = null;
|
|
7762
|
+
}, []);
|
|
7763
|
+
const handleDragEnd = React35__namespace.useCallback(
|
|
7764
|
+
(event) => {
|
|
7765
|
+
const { active, over } = event;
|
|
7766
|
+
const activeData = active.data.current;
|
|
7767
|
+
const overData = over?.data.current;
|
|
7768
|
+
if (!activeData) {
|
|
7769
|
+
resetDragState();
|
|
7770
|
+
return;
|
|
7771
|
+
}
|
|
7772
|
+
const pendingManualPosition = manualDropPosition.current;
|
|
7773
|
+
manualDropPosition.current = null;
|
|
7774
|
+
if (activeData.type === "card" && activeCard) {
|
|
7775
|
+
if (!over || !overData) {
|
|
7776
|
+
resetDragState();
|
|
7777
|
+
return;
|
|
7778
|
+
}
|
|
7779
|
+
if (overData.type !== "card" && overData.type !== "column-droppable") {
|
|
7780
|
+
resetDragState();
|
|
7781
|
+
return;
|
|
7782
|
+
}
|
|
7783
|
+
const fromColumnId = activeCard.columnId;
|
|
7784
|
+
const toColumnId = overData.columnId;
|
|
7785
|
+
const ordering = columnMap.get(toColumnId)?.ordering ?? "manual";
|
|
7786
|
+
const sourceColumn = columns.find(
|
|
7787
|
+
(column) => column.id === fromColumnId
|
|
7788
|
+
);
|
|
7789
|
+
const fromIndex = sourceColumn?.cards.findIndex(
|
|
7790
|
+
(card) => getCardId(card) === activeCard.id
|
|
7791
|
+
) ?? 0;
|
|
7792
|
+
let toIndex = null;
|
|
7793
|
+
if (ordering === "manual") {
|
|
7794
|
+
if (pendingManualPosition && pendingManualPosition.columnId === toColumnId) {
|
|
7795
|
+
toIndex = pendingManualPosition.index;
|
|
7796
|
+
} else {
|
|
7797
|
+
const targetColumn = columns.find(
|
|
7798
|
+
(column) => column.id === toColumnId
|
|
7799
|
+
);
|
|
7800
|
+
if (targetColumn && overData.type === "card") {
|
|
7801
|
+
toIndex = targetColumn.cards.findIndex(
|
|
7802
|
+
(card) => getCardId(card) === getCardId(overData.card)
|
|
7803
|
+
);
|
|
7804
|
+
} else if (targetColumn && overData.type === "column-droppable") {
|
|
7805
|
+
if (fromColumnId === toColumnId) {
|
|
7806
|
+
toIndex = targetColumn.cards.length - 1;
|
|
7807
|
+
} else {
|
|
7808
|
+
toIndex = targetColumn.cards.length;
|
|
7809
|
+
}
|
|
7810
|
+
}
|
|
7811
|
+
}
|
|
7812
|
+
}
|
|
7813
|
+
if (ordering === "external") {
|
|
7814
|
+
toIndex = null;
|
|
7815
|
+
}
|
|
7816
|
+
if (toIndex === null && toColumnId === fromColumnId && ordering === "external") {
|
|
7817
|
+
resetDragState();
|
|
7818
|
+
return;
|
|
7819
|
+
}
|
|
7820
|
+
if (toColumnId === fromColumnId && toIndex !== null && toIndex === fromIndex) {
|
|
7821
|
+
resetDragState();
|
|
7822
|
+
return;
|
|
7823
|
+
}
|
|
7824
|
+
onCardDrop?.({
|
|
7825
|
+
event,
|
|
7826
|
+
card: activeCard.card,
|
|
7827
|
+
cardId: activeCard.id,
|
|
7828
|
+
fromColumnId,
|
|
7829
|
+
toColumnId,
|
|
7830
|
+
fromIndex,
|
|
7831
|
+
toIndex,
|
|
7832
|
+
ordering,
|
|
7833
|
+
isDifferentColumn: toColumnId !== fromColumnId
|
|
7834
|
+
});
|
|
7835
|
+
}
|
|
7836
|
+
if (activeData.type === "column" && activeColumn) {
|
|
7837
|
+
if (!over || !overData || overData.type !== "column" && overData.type !== "column-droppable") {
|
|
7838
|
+
resetDragState();
|
|
7839
|
+
return;
|
|
7840
|
+
}
|
|
7841
|
+
const finalColumns = projectedColumns ?? columns;
|
|
7842
|
+
const targetColumnId = overData.type === "column" ? overData.column.id : overData.columnId;
|
|
7843
|
+
const fromIndex = activeColumn.index;
|
|
7844
|
+
const targetIndex = finalColumns.findIndex(
|
|
7845
|
+
(column) => column.id === targetColumnId
|
|
7846
|
+
);
|
|
7847
|
+
const destinationIndex = finalColumns.findIndex(
|
|
7848
|
+
(column) => column.id === activeColumn.id
|
|
7849
|
+
);
|
|
7850
|
+
if (targetIndex === -1 || destinationIndex === -1 || destinationIndex === fromIndex) {
|
|
7851
|
+
resetDragState();
|
|
7852
|
+
return;
|
|
7853
|
+
}
|
|
7854
|
+
if (columnMoveCrossesLockedColumns({
|
|
7855
|
+
columns: finalColumns,
|
|
7856
|
+
fromIndex,
|
|
7857
|
+
toIndex: destinationIndex
|
|
7858
|
+
})) {
|
|
7859
|
+
resetDragState();
|
|
7860
|
+
return;
|
|
7861
|
+
}
|
|
7862
|
+
onColumnDrop?.({
|
|
7863
|
+
event,
|
|
7864
|
+
column: activeColumn.column,
|
|
7865
|
+
columnId: activeColumn.id,
|
|
7866
|
+
fromIndex,
|
|
7867
|
+
toIndex: destinationIndex
|
|
7868
|
+
});
|
|
7869
|
+
}
|
|
7870
|
+
resetDragState();
|
|
7871
|
+
},
|
|
7872
|
+
[
|
|
7873
|
+
activeCard,
|
|
7874
|
+
activeColumn,
|
|
7875
|
+
columnMap,
|
|
7876
|
+
columns,
|
|
7877
|
+
getCardId,
|
|
7878
|
+
onCardDrop,
|
|
7879
|
+
onColumnDrop,
|
|
7880
|
+
projectedColumns,
|
|
7881
|
+
resetDragState
|
|
7882
|
+
]
|
|
7883
|
+
);
|
|
7884
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7885
|
+
core.DndContext,
|
|
7886
|
+
{
|
|
7887
|
+
collisionDetection,
|
|
7888
|
+
modifiers,
|
|
7889
|
+
sensors,
|
|
7890
|
+
measuring: measuringConfig,
|
|
7891
|
+
onDragStart: handleDragStart,
|
|
7892
|
+
onDragOver: handleDragOver,
|
|
7893
|
+
onDragEnd: handleDragEnd,
|
|
7894
|
+
onDragCancel: resetDragState,
|
|
7895
|
+
children: [
|
|
7896
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7897
|
+
sortable.SortableContext,
|
|
7898
|
+
{
|
|
7899
|
+
items: sanitizedColumns.map((column) => column.id),
|
|
7900
|
+
strategy: sortable.horizontalListSortingStrategy,
|
|
7901
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7902
|
+
"div",
|
|
7903
|
+
{
|
|
7904
|
+
className: cn(
|
|
7905
|
+
"flex h-full w-full gap-4 overflow-x-auto p-1",
|
|
7906
|
+
className
|
|
7907
|
+
),
|
|
7908
|
+
children: sanitizedColumns.map((column, index) => {
|
|
7909
|
+
const ordering = column.ordering ?? "manual";
|
|
7910
|
+
const isDropTarget = hoveredColumnId === column.id;
|
|
7911
|
+
const context = {
|
|
7912
|
+
column,
|
|
7913
|
+
columnIndex: index,
|
|
7914
|
+
cardCount: column.cards.length,
|
|
7915
|
+
isDropTarget,
|
|
7916
|
+
isDropTargetExternal: isDropTarget && ordering === "external",
|
|
7917
|
+
isDragDisabled: column.canDrag === false
|
|
7918
|
+
};
|
|
7919
|
+
const computedColumnClassName = typeof columnClassName === "function" ? columnClassName(context) : columnClassName;
|
|
7920
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7921
|
+
KanbanSortableColumn,
|
|
7922
|
+
{
|
|
7923
|
+
column,
|
|
7924
|
+
columnIndex: index,
|
|
7925
|
+
className: computedColumnClassName,
|
|
7926
|
+
renderCard,
|
|
7927
|
+
renderColumnHeader,
|
|
7928
|
+
renderColumnFooter,
|
|
7929
|
+
renderEmptyState,
|
|
7930
|
+
getCardId,
|
|
7931
|
+
isManualTarget: isDropTarget && ordering === "manual",
|
|
7932
|
+
isExternalTarget: isDropTarget && ordering === "external",
|
|
7933
|
+
columnContext: context,
|
|
7934
|
+
activeCardId: activeCard?.id ?? null
|
|
7935
|
+
},
|
|
7936
|
+
column.id
|
|
7937
|
+
);
|
|
7938
|
+
})
|
|
7939
|
+
}
|
|
7940
|
+
)
|
|
7941
|
+
}
|
|
7942
|
+
),
|
|
7943
|
+
/* @__PURE__ */ jsxRuntime.jsxs(core.DragOverlay, { dropAnimation, children: [
|
|
7944
|
+
activeCard && renderCardOverlay({
|
|
7945
|
+
activeCard,
|
|
7946
|
+
columns,
|
|
7947
|
+
renderCard
|
|
7948
|
+
}),
|
|
7949
|
+
!activeCard && activeColumn ? renderColumnOverlay({
|
|
7950
|
+
activeColumn,
|
|
7951
|
+
renderCard,
|
|
7952
|
+
renderColumnHeader,
|
|
7953
|
+
renderColumnFooter,
|
|
7954
|
+
renderEmptyState,
|
|
7955
|
+
columnClassName,
|
|
7956
|
+
sanitizedColumns
|
|
7957
|
+
}) : null
|
|
7958
|
+
] })
|
|
7959
|
+
]
|
|
7960
|
+
}
|
|
7961
|
+
);
|
|
7962
|
+
}
|
|
6762
7963
|
|
|
6763
7964
|
// src/tailwind.ts
|
|
6764
7965
|
function content({ base = "./" } = {}) {
|
|
@@ -6799,6 +8000,9 @@ exports.AlertTitle = AlertTitle;
|
|
|
6799
8000
|
exports.Async = StyledAsync;
|
|
6800
8001
|
exports.AsyncCreatable = StyledAsyncCreatable;
|
|
6801
8002
|
exports.Badge = Badge;
|
|
8003
|
+
exports.BannerAlert = BannerAlert;
|
|
8004
|
+
exports.BannerType = BannerType;
|
|
8005
|
+
exports.BannerVariant = BannerVariant;
|
|
6802
8006
|
exports.Box = Box;
|
|
6803
8007
|
exports.Breadcrumb = Breadcrumb;
|
|
6804
8008
|
exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
|
|
@@ -6859,6 +8063,13 @@ exports.InputDateTimePickerSingle = InputDateTimePickerSingle;
|
|
|
6859
8063
|
exports.InputPhone = InputPhone;
|
|
6860
8064
|
exports.InputText = InputText;
|
|
6861
8065
|
exports.InputTime = InputTime;
|
|
8066
|
+
exports.KanbanBoard = KanbanBoard;
|
|
8067
|
+
exports.KanbanCard = KanbanCard;
|
|
8068
|
+
exports.KanbanColumn = KanbanColumn;
|
|
8069
|
+
exports.KanbanColumnDragHandle = KanbanColumnDragHandle;
|
|
8070
|
+
exports.KanbanColumnFooter = KanbanColumnFooter;
|
|
8071
|
+
exports.KanbanColumnHeader = KanbanColumnHeader;
|
|
8072
|
+
exports.KanbanColumnTitle = KanbanColumnTitle;
|
|
6862
8073
|
exports.Label = Label;
|
|
6863
8074
|
exports.Link = Link;
|
|
6864
8075
|
exports.NebulaI18nProvider = NebulaI18nProvider;
|