@dbcdk/react-components 0.0.98 → 0.0.102
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/components/accordion/Accordion.d.ts +3 -1
- package/dist/components/accordion/components/AccordionRow.d.ts +3 -1
- package/dist/components/card/Card.d.ts +2 -0
- package/dist/components/headline/Headline.d.ts +2 -1
- package/dist/components/inline-status/InlineStatus.d.ts +11 -0
- package/dist/components/page/Page.d.ts +3 -1
- package/dist/components/page-layout/components/{layout-footer/LayoutFooter.d.ts → footer/Footer.d.ts} +5 -4
- package/dist/components/segmented-progress-bar/SegmentedProgressBar.d.ts +2 -1
- package/dist/index.cjs +630 -547
- package/dist/index.css +216 -70
- package/dist/index.d.ts +2 -1
- package/dist/index.js +180 -98
- package/dist/styles/styles.css +7 -3
- package/dist/styles/themes/dbc/colors.css +14 -9
- package/dist/styles.css +7 -3
- package/dist/tanstack.cjs +114 -114
- package/dist/tanstack.css +12 -8
- package/dist/tanstack.js +34 -34
- package/package.json +1 -1
- package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.d.ts +0 -1
package/dist/tanstack.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var reactTable = require('@tanstack/react-table');
|
|
4
|
-
var
|
|
4
|
+
var React8 = require('react');
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var lucideReact = require('lucide-react');
|
|
7
7
|
var reactDom = require('react-dom');
|
|
@@ -24,7 +24,7 @@ function _interopNamespace(e) {
|
|
|
24
24
|
return Object.freeze(n);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
var
|
|
27
|
+
var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
|
|
28
28
|
|
|
29
29
|
// src/components/table/components/column-resizer/ColumnResizer.module.css
|
|
30
30
|
var ColumnResizer_default = {
|
|
@@ -49,11 +49,11 @@ var Pagination_default = {
|
|
|
49
49
|
container: "Pagination_container2",
|
|
50
50
|
range: "Pagination_range2"
|
|
51
51
|
};
|
|
52
|
-
var TooltipContext =
|
|
52
|
+
var TooltipContext = React8.createContext(null);
|
|
53
53
|
|
|
54
54
|
// src/components/overlay/tooltip/useTooltipTrigger.tsx
|
|
55
55
|
function useTooltipTrigger(options) {
|
|
56
|
-
const ctx =
|
|
56
|
+
const ctx = React8.useContext(TooltipContext);
|
|
57
57
|
if (!ctx) throw new Error("useTooltipTrigger must be used within <TooltipProvider>.");
|
|
58
58
|
const {
|
|
59
59
|
content,
|
|
@@ -66,21 +66,21 @@ function useTooltipTrigger(options) {
|
|
|
66
66
|
focusOpenMode = "focus-visible",
|
|
67
67
|
closeOnPointerDown = true
|
|
68
68
|
} = options;
|
|
69
|
-
const id =
|
|
70
|
-
const triggerElRef =
|
|
69
|
+
const id = React8.useId();
|
|
70
|
+
const triggerElRef = React8.useRef(null);
|
|
71
71
|
const isControlled = open !== void 0;
|
|
72
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
72
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(defaultOpen);
|
|
73
73
|
const isOpen = isControlled ? !!open : uncontrolledOpen;
|
|
74
|
-
const openTimer =
|
|
75
|
-
const closeTimer =
|
|
74
|
+
const openTimer = React8.useRef(null);
|
|
75
|
+
const closeTimer = React8.useRef(null);
|
|
76
76
|
const clearTimers = () => {
|
|
77
77
|
if (openTimer.current) window.clearTimeout(openTimer.current);
|
|
78
78
|
if (closeTimer.current) window.clearTimeout(closeTimer.current);
|
|
79
79
|
openTimer.current = null;
|
|
80
80
|
closeTimer.current = null;
|
|
81
81
|
};
|
|
82
|
-
const lastSentRef =
|
|
83
|
-
const show =
|
|
82
|
+
const lastSentRef = React8.useRef(null);
|
|
83
|
+
const show = React8.useCallback(() => {
|
|
84
84
|
if (!content) return;
|
|
85
85
|
ctx.show({
|
|
86
86
|
id,
|
|
@@ -91,17 +91,17 @@ function useTooltipTrigger(options) {
|
|
|
91
91
|
});
|
|
92
92
|
lastSentRef.current = { content, placement, offset };
|
|
93
93
|
}, [ctx, id, content, placement, offset]);
|
|
94
|
-
const hide =
|
|
94
|
+
const hide = React8.useCallback(() => {
|
|
95
95
|
ctx.hide(id);
|
|
96
96
|
}, [ctx, id]);
|
|
97
|
-
|
|
97
|
+
React8.useEffect(() => {
|
|
98
98
|
if (!isOpen) {
|
|
99
99
|
hide();
|
|
100
100
|
return;
|
|
101
101
|
}
|
|
102
102
|
show();
|
|
103
103
|
}, [isOpen, show, hide]);
|
|
104
|
-
|
|
104
|
+
React8.useEffect(() => {
|
|
105
105
|
var _a;
|
|
106
106
|
if (!isOpen) return;
|
|
107
107
|
if (((_a = ctx.active) == null ? void 0 : _a.id) !== id) return;
|
|
@@ -171,7 +171,6 @@ var Button_default = {
|
|
|
171
171
|
rounded: "Button_rounded2",
|
|
172
172
|
link: "Button_link2",
|
|
173
173
|
icon: "Button_icon2",
|
|
174
|
-
xs: "Button_xs2",
|
|
175
174
|
sm: "Button_sm2",
|
|
176
175
|
lg: "Button_lg2",
|
|
177
176
|
fullWidth: "Button_fullWidth2",
|
|
@@ -182,7 +181,8 @@ var Button_default = {
|
|
|
182
181
|
active: "Button_active2",
|
|
183
182
|
success: "Button_success2",
|
|
184
183
|
danger: "Button_danger2",
|
|
185
|
-
inline: "Button_inline2"
|
|
184
|
+
inline: "Button_inline2",
|
|
185
|
+
xs: "Button_xs2"
|
|
186
186
|
};
|
|
187
187
|
function cx(...parts) {
|
|
188
188
|
return parts.filter(Boolean).join(" ");
|
|
@@ -196,7 +196,7 @@ function mergeRefs(...refs) {
|
|
|
196
196
|
}
|
|
197
197
|
};
|
|
198
198
|
}
|
|
199
|
-
var Button =
|
|
199
|
+
var Button = React8__namespace.forwardRef(function Button2({
|
|
200
200
|
variant = "outlined",
|
|
201
201
|
shape = "default",
|
|
202
202
|
size = "md",
|
|
@@ -225,8 +225,8 @@ var Button = React9__namespace.forwardRef(function Button2({
|
|
|
225
225
|
userClassName
|
|
226
226
|
);
|
|
227
227
|
const tooltipEnabled = Boolean(tooltip);
|
|
228
|
-
const childRef = isLink &&
|
|
229
|
-
const mergedRef =
|
|
228
|
+
const childRef = isLink && React8__namespace.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
|
|
229
|
+
const mergedRef = React8__namespace.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
|
|
230
230
|
const { triggerProps, id: tooltipId } = useTooltipTrigger({
|
|
231
231
|
content: tooltipEnabled ? tooltip : null,
|
|
232
232
|
placement: tooltipPlacement,
|
|
@@ -243,7 +243,7 @@ var Button = React9__namespace.forwardRef(function Button2({
|
|
|
243
243
|
loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
|
|
244
244
|
] });
|
|
245
245
|
let buttonEl;
|
|
246
|
-
if (isLink &&
|
|
246
|
+
if (isLink && React8__namespace.isValidElement(children)) {
|
|
247
247
|
const childClassName = typeof children.props.className === "string" ? children.props.className : "";
|
|
248
248
|
const { disabled, onClick, ...linkButtonProps } = buttonProps;
|
|
249
249
|
const handleClick = (e) => {
|
|
@@ -253,7 +253,7 @@ var Button = React9__namespace.forwardRef(function Button2({
|
|
|
253
253
|
}
|
|
254
254
|
onClick == null ? void 0 : onClick(e);
|
|
255
255
|
};
|
|
256
|
-
buttonEl =
|
|
256
|
+
buttonEl = React8__namespace.cloneElement(children, {
|
|
257
257
|
...linkButtonProps,
|
|
258
258
|
ref: mergedRef,
|
|
259
259
|
className: cx(childClassName, computedClassName, Button_default.buttonLink),
|
|
@@ -424,9 +424,9 @@ function Checkbox({
|
|
|
424
424
|
id,
|
|
425
425
|
"data-cy": dataCy
|
|
426
426
|
}) {
|
|
427
|
-
const [internal, setInternal] =
|
|
427
|
+
const [internal, setInternal] = React8.useState(false);
|
|
428
428
|
const isChecked = controlled != null ? controlled : internal;
|
|
429
|
-
const generatedId =
|
|
429
|
+
const generatedId = React8.useId();
|
|
430
430
|
const controlId = id != null ? id : `checkbox-${generatedId}`;
|
|
431
431
|
const toggle = (e) => {
|
|
432
432
|
if (disabled) return;
|
|
@@ -515,7 +515,7 @@ function RadioButton({
|
|
|
515
515
|
id,
|
|
516
516
|
"data-cy": dataCy
|
|
517
517
|
}) {
|
|
518
|
-
const generatedId =
|
|
518
|
+
const generatedId = React8.useId();
|
|
519
519
|
const controlId = id != null ? id : `radio-${generatedId}`;
|
|
520
520
|
const isChecked = selectedValue !== void 0 ? selectedValue === value : Boolean(checked);
|
|
521
521
|
const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: RadioButtons_default.container, "data-cy": dataCy, children: [
|
|
@@ -575,9 +575,9 @@ var INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex
|
|
|
575
575
|
function getMenuItems(el) {
|
|
576
576
|
return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
|
|
577
577
|
}
|
|
578
|
-
var MenuBase =
|
|
578
|
+
var MenuBase = React8__namespace.forwardRef(
|
|
579
579
|
({ children, className, itemRole = "menuitem", gap, onKeyDown, ...props }, ref) => {
|
|
580
|
-
const internalRef =
|
|
580
|
+
const internalRef = React8__namespace.useRef(null);
|
|
581
581
|
const handleKeyDown = (e) => {
|
|
582
582
|
const ul = internalRef.current;
|
|
583
583
|
if (!ul) return;
|
|
@@ -620,16 +620,16 @@ var MenuBase = React9__namespace.forwardRef(
|
|
|
620
620
|
}
|
|
621
621
|
);
|
|
622
622
|
MenuBase.displayName = "Menu";
|
|
623
|
-
var isInteractiveEl = (el) =>
|
|
623
|
+
var isInteractiveEl = (el) => React8__namespace.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
|
|
624
624
|
function applyMenuItemPropsToElement(child, opts) {
|
|
625
625
|
var _a, _b, _c, _d;
|
|
626
626
|
const { active, selected, disabled, role, tabIndex = 0, className } = opts;
|
|
627
627
|
const childClass = [Menu_default.item, active ? Menu_default.active : "", selected ? Menu_default.selected : ""].filter(Boolean).join(" ");
|
|
628
|
-
const nextImmediate =
|
|
628
|
+
const nextImmediate = React8__namespace.cloneElement(child, {
|
|
629
629
|
className: [child.props.className, Menu_default.interactiveChild, className].filter(Boolean).join(" ")
|
|
630
630
|
});
|
|
631
631
|
if (typeof child.type === "string" && (child.type === "a" || child.type === "button")) {
|
|
632
|
-
return
|
|
632
|
+
return React8__namespace.cloneElement(child, {
|
|
633
633
|
role: (_a = child.props.role) != null ? _a : role,
|
|
634
634
|
tabIndex: (_b = child.props.tabIndex) != null ? _b : tabIndex,
|
|
635
635
|
"aria-selected": selected || void 0,
|
|
@@ -638,7 +638,7 @@ function applyMenuItemPropsToElement(child, opts) {
|
|
|
638
638
|
...child.type === "button" ? { disabled } : {}
|
|
639
639
|
});
|
|
640
640
|
}
|
|
641
|
-
return
|
|
641
|
+
return React8__namespace.cloneElement(nextImmediate, {
|
|
642
642
|
role: (_c = nextImmediate.props.role) != null ? _c : role,
|
|
643
643
|
tabIndex: (_d = nextImmediate.props.tabIndex) != null ? _d : tabIndex,
|
|
644
644
|
"aria-selected": selected || void 0,
|
|
@@ -647,7 +647,7 @@ function applyMenuItemPropsToElement(child, opts) {
|
|
|
647
647
|
disabled
|
|
648
648
|
});
|
|
649
649
|
}
|
|
650
|
-
var MenuItem =
|
|
650
|
+
var MenuItem = React8__namespace.forwardRef(
|
|
651
651
|
({ children, active, selected, disabled, className, itemRole, variant, ...liProps }, ref) => {
|
|
652
652
|
const resolvedRole = itemRole != null ? itemRole : "menuitem";
|
|
653
653
|
const isBordered = variant === "bordered";
|
|
@@ -685,7 +685,7 @@ var MenuItem = React9__namespace.forwardRef(
|
|
|
685
685
|
}
|
|
686
686
|
);
|
|
687
687
|
MenuItem.displayName = "Menu.Item";
|
|
688
|
-
var MenuCheckItem =
|
|
688
|
+
var MenuCheckItem = React8__namespace.forwardRef(
|
|
689
689
|
({
|
|
690
690
|
label,
|
|
691
691
|
checked,
|
|
@@ -751,7 +751,7 @@ var MenuCheckItem = React9__namespace.forwardRef(
|
|
|
751
751
|
}
|
|
752
752
|
);
|
|
753
753
|
MenuCheckItem.displayName = "Menu.CheckItem";
|
|
754
|
-
var MenuRadioItem =
|
|
754
|
+
var MenuRadioItem = React8__namespace.forwardRef(
|
|
755
755
|
({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
|
|
756
756
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
757
757
|
"li",
|
|
@@ -791,7 +791,7 @@ var MenuRadioItem = React9__namespace.forwardRef(
|
|
|
791
791
|
}
|
|
792
792
|
);
|
|
793
793
|
MenuRadioItem.displayName = "Menu.RadioItem";
|
|
794
|
-
var MenuSeparator =
|
|
794
|
+
var MenuSeparator = React8__namespace.forwardRef(
|
|
795
795
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
796
796
|
"li",
|
|
797
797
|
{
|
|
@@ -803,7 +803,7 @@ var MenuSeparator = React9__namespace.forwardRef(
|
|
|
803
803
|
)
|
|
804
804
|
);
|
|
805
805
|
MenuSeparator.displayName = "Menu.Separator";
|
|
806
|
-
var MenuHeader =
|
|
806
|
+
var MenuHeader = React8__namespace.forwardRef(
|
|
807
807
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
808
808
|
"li",
|
|
809
809
|
{
|
|
@@ -876,7 +876,7 @@ function parseMinWidthPx(minWidth, elForEm) {
|
|
|
876
876
|
}
|
|
877
877
|
return 0;
|
|
878
878
|
}
|
|
879
|
-
var Popover =
|
|
879
|
+
var Popover = React8.forwardRef(function Popover2({
|
|
880
880
|
trigger: Trigger,
|
|
881
881
|
children,
|
|
882
882
|
open,
|
|
@@ -896,39 +896,39 @@ var Popover = React9.forwardRef(function Popover2({
|
|
|
896
896
|
anchorRef,
|
|
897
897
|
overlayRef
|
|
898
898
|
}, ref) {
|
|
899
|
-
const internalId =
|
|
899
|
+
const internalId = React8.useId();
|
|
900
900
|
const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
|
|
901
901
|
const isControlled = open !== void 0;
|
|
902
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
902
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(defaultOpen);
|
|
903
903
|
const isOpen = isControlled ? !!open : uncontrolledOpen;
|
|
904
|
-
const [pos, setPos] =
|
|
905
|
-
const [positioned, setPositioned] =
|
|
906
|
-
const [triggerWidth, setTriggerWidth] =
|
|
907
|
-
const containerRef =
|
|
908
|
-
const contentRef =
|
|
909
|
-
const triggerElRef =
|
|
910
|
-
const lastCloseReasonRef =
|
|
911
|
-
const [mounted, setMounted] =
|
|
912
|
-
|
|
913
|
-
const setOpen =
|
|
904
|
+
const [pos, setPos] = React8.useState({ top: 0, left: 0 });
|
|
905
|
+
const [positioned, setPositioned] = React8.useState(false);
|
|
906
|
+
const [triggerWidth, setTriggerWidth] = React8.useState(null);
|
|
907
|
+
const containerRef = React8.useRef(null);
|
|
908
|
+
const contentRef = React8.useRef(null);
|
|
909
|
+
const triggerElRef = React8.useRef(null);
|
|
910
|
+
const lastCloseReasonRef = React8.useRef("unknown");
|
|
911
|
+
const [mounted, setMounted] = React8.useState(false);
|
|
912
|
+
React8.useEffect(() => setMounted(true), []);
|
|
913
|
+
const setOpen = React8.useCallback(
|
|
914
914
|
(next) => {
|
|
915
915
|
if (!isControlled) setUncontrolledOpen(next);
|
|
916
916
|
onOpenChange == null ? void 0 : onOpenChange(next);
|
|
917
917
|
},
|
|
918
918
|
[isControlled, onOpenChange]
|
|
919
919
|
);
|
|
920
|
-
const openPopover =
|
|
920
|
+
const openPopover = React8.useCallback(() => {
|
|
921
921
|
setPositioned(false);
|
|
922
922
|
setOpen(true);
|
|
923
923
|
}, [setOpen]);
|
|
924
|
-
const closePopover =
|
|
924
|
+
const closePopover = React8.useCallback(
|
|
925
925
|
(reason = "api") => {
|
|
926
926
|
lastCloseReasonRef.current = reason;
|
|
927
927
|
setOpen(false);
|
|
928
928
|
},
|
|
929
929
|
[setOpen]
|
|
930
930
|
);
|
|
931
|
-
const togglePopover =
|
|
931
|
+
const togglePopover = React8.useCallback(
|
|
932
932
|
(e) => {
|
|
933
933
|
var _a, _b;
|
|
934
934
|
triggerElRef.current = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : e.currentTarget) != null ? _b : containerRef.current;
|
|
@@ -937,7 +937,7 @@ var Popover = React9.forwardRef(function Popover2({
|
|
|
937
937
|
},
|
|
938
938
|
[isOpen, closePopover, openPopover, anchorRef]
|
|
939
939
|
);
|
|
940
|
-
|
|
940
|
+
React8.useImperativeHandle(
|
|
941
941
|
ref,
|
|
942
942
|
() => ({
|
|
943
943
|
close: () => closePopover("api"),
|
|
@@ -946,7 +946,7 @@ var Popover = React9.forwardRef(function Popover2({
|
|
|
946
946
|
}),
|
|
947
947
|
[closePopover, openPopover, isOpen]
|
|
948
948
|
);
|
|
949
|
-
const computeAndSetPosition =
|
|
949
|
+
const computeAndSetPosition = React8.useCallback(() => {
|
|
950
950
|
var _a, _b;
|
|
951
951
|
const content = contentRef.current;
|
|
952
952
|
if (!content) return;
|
|
@@ -1011,11 +1011,11 @@ var Popover = React9.forwardRef(function Popover2({
|
|
|
1011
1011
|
setPos({ top: clampedTop, left: clampedLeft });
|
|
1012
1012
|
setPositioned(true);
|
|
1013
1013
|
}, [anchorRef, edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
|
|
1014
|
-
|
|
1014
|
+
React8.useLayoutEffect(() => {
|
|
1015
1015
|
if (!isOpen) return;
|
|
1016
1016
|
computeAndSetPosition();
|
|
1017
1017
|
}, [isOpen, computeAndSetPosition]);
|
|
1018
|
-
|
|
1018
|
+
React8.useEffect(() => {
|
|
1019
1019
|
var _a, _b, _c;
|
|
1020
1020
|
if (!isOpen) return;
|
|
1021
1021
|
const content = contentRef.current;
|
|
@@ -1055,7 +1055,7 @@ var Popover = React9.forwardRef(function Popover2({
|
|
|
1055
1055
|
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
1056
1056
|
};
|
|
1057
1057
|
}, [isOpen, closePopover, computeAndSetPosition, autoFocusContent, anchorRef]);
|
|
1058
|
-
|
|
1058
|
+
React8.useEffect(() => {
|
|
1059
1059
|
var _a, _b;
|
|
1060
1060
|
if (isOpen) return;
|
|
1061
1061
|
if (!returnFocus) return;
|
|
@@ -1063,7 +1063,7 @@ var Popover = React9.forwardRef(function Popover2({
|
|
|
1063
1063
|
(_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
1064
1064
|
}, [isOpen, returnFocus]);
|
|
1065
1065
|
const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "dbc-muted-text", size: 20 });
|
|
1066
|
-
const setOverlayRef =
|
|
1066
|
+
const setOverlayRef = React8__namespace.useCallback(
|
|
1067
1067
|
(node) => {
|
|
1068
1068
|
assignRef(overlayRef, node);
|
|
1069
1069
|
},
|
|
@@ -1134,18 +1134,18 @@ function Pagination({
|
|
|
1134
1134
|
showFirstLast = true,
|
|
1135
1135
|
showGoToPage = true
|
|
1136
1136
|
}) {
|
|
1137
|
-
const popoverRef =
|
|
1138
|
-
const pageSizeRef =
|
|
1139
|
-
const formatNumber =
|
|
1140
|
-
const totalPages =
|
|
1137
|
+
const popoverRef = React8.useRef(null);
|
|
1138
|
+
const pageSizeRef = React8.useRef(null);
|
|
1139
|
+
const formatNumber = React8.useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
|
|
1140
|
+
const totalPages = React8.useMemo(
|
|
1141
1141
|
() => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
|
|
1142
1142
|
[itemsCount, take]
|
|
1143
1143
|
);
|
|
1144
|
-
const currentPage =
|
|
1144
|
+
const currentPage = React8.useMemo(() => {
|
|
1145
1145
|
const p = Math.floor(skip / Math.max(1, take)) + 1;
|
|
1146
1146
|
return Math.min(Math.max(1, p), totalPages);
|
|
1147
1147
|
}, [skip, take, totalPages]);
|
|
1148
|
-
const emit =
|
|
1148
|
+
const emit = React8.useCallback(
|
|
1149
1149
|
(page, nextTake = take) => {
|
|
1150
1150
|
const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
|
|
1151
1151
|
const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
|
|
@@ -1159,21 +1159,21 @@ function Pagination({
|
|
|
1159
1159
|
},
|
|
1160
1160
|
[onPageChange, take, itemsCount]
|
|
1161
1161
|
);
|
|
1162
|
-
const firstPage =
|
|
1163
|
-
const lastPage =
|
|
1164
|
-
const prevPage =
|
|
1165
|
-
const nextPage =
|
|
1166
|
-
const goToPage =
|
|
1162
|
+
const firstPage = React8.useCallback(() => emit(1), [emit]);
|
|
1163
|
+
const lastPage = React8.useCallback(() => emit(totalPages), [emit, totalPages]);
|
|
1164
|
+
const prevPage = React8.useCallback(() => emit(currentPage - 1), [emit, currentPage]);
|
|
1165
|
+
const nextPage = React8.useCallback(() => emit(currentPage + 1), [emit, currentPage]);
|
|
1166
|
+
const goToPage = React8.useCallback((page) => emit(page), [emit]);
|
|
1167
1167
|
const canPrev = currentPage > 1;
|
|
1168
1168
|
const canNext = currentPage < totalPages;
|
|
1169
|
-
const rangeLabel =
|
|
1169
|
+
const rangeLabel = React8.useMemo(() => {
|
|
1170
1170
|
if (itemsCount <= 0) return "0 af 0";
|
|
1171
1171
|
const first = skip + 1;
|
|
1172
1172
|
const last = Math.min(skip + take, itemsCount);
|
|
1173
1173
|
return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
|
|
1174
1174
|
}, [formatNumber, itemsCount, skip, take]);
|
|
1175
|
-
const pages =
|
|
1176
|
-
const handlePageSizeChange =
|
|
1175
|
+
const pages = React8.useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
|
|
1176
|
+
const handlePageSizeChange = React8.useCallback((size) => emit(1, size), [emit]);
|
|
1177
1177
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Pagination_default.container, children: [
|
|
1178
1178
|
showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1179
1179
|
Button,
|
|
@@ -1266,11 +1266,11 @@ function Pagination({
|
|
|
1266
1266
|
)
|
|
1267
1267
|
] });
|
|
1268
1268
|
}
|
|
1269
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1269
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React8.useLayoutEffect : React8.useEffect;
|
|
1270
1270
|
function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
|
|
1271
|
-
const [maxHeight, setMaxHeight] =
|
|
1272
|
-
const raf =
|
|
1273
|
-
const measure =
|
|
1271
|
+
const [maxHeight, setMaxHeight] = React8.useState(min);
|
|
1272
|
+
const raf = React8.useRef(null);
|
|
1273
|
+
const measure = React8.useCallback(() => {
|
|
1274
1274
|
if (typeof window === "undefined" || !ref.current) return;
|
|
1275
1275
|
const el = ref.current;
|
|
1276
1276
|
const rect = el.getBoundingClientRect();
|
|
@@ -1282,7 +1282,7 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
|
|
|
1282
1282
|
const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
|
|
1283
1283
|
setMaxHeight((prev) => prev === next ? prev : next);
|
|
1284
1284
|
}, [ref, bottomOffset, min, includeMarginTop]);
|
|
1285
|
-
const scheduleMeasure =
|
|
1285
|
+
const scheduleMeasure = React8.useCallback(() => {
|
|
1286
1286
|
if (typeof window === "undefined") return;
|
|
1287
1287
|
if (raf.current != null) {
|
|
1288
1288
|
cancelAnimationFrame(raf.current);
|
|
@@ -1295,7 +1295,7 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
|
|
|
1295
1295
|
useIsomorphicLayoutEffect(() => {
|
|
1296
1296
|
measure();
|
|
1297
1297
|
}, [measure]);
|
|
1298
|
-
|
|
1298
|
+
React8.useEffect(() => {
|
|
1299
1299
|
var _a;
|
|
1300
1300
|
if (typeof window === "undefined" || !ref.current) return;
|
|
1301
1301
|
const target = ref.current;
|
|
@@ -1328,7 +1328,7 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
|
|
|
1328
1328
|
}
|
|
1329
1329
|
};
|
|
1330
1330
|
}, [ref, watchRef, scheduleMeasure]);
|
|
1331
|
-
const style =
|
|
1331
|
+
const style = React8.useMemo(
|
|
1332
1332
|
() => ({
|
|
1333
1333
|
maxHeight,
|
|
1334
1334
|
overflow: "auto"
|
|
@@ -1524,7 +1524,7 @@ function useTableRowInteractions({
|
|
|
1524
1524
|
onRowClick,
|
|
1525
1525
|
onRowSelect
|
|
1526
1526
|
}) {
|
|
1527
|
-
const handleRowClick =
|
|
1527
|
+
const handleRowClick = React8.useCallback(
|
|
1528
1528
|
(e) => {
|
|
1529
1529
|
var _a;
|
|
1530
1530
|
const target = e.target;
|
|
@@ -1541,7 +1541,7 @@ function useTableRowInteractions({
|
|
|
1541
1541
|
},
|
|
1542
1542
|
[canSelect, isSelected, onRowClick, onRowSelect, row, rowId]
|
|
1543
1543
|
);
|
|
1544
|
-
const handleRowKeyDown =
|
|
1544
|
+
const handleRowKeyDown = React8.useCallback(
|
|
1545
1545
|
(e) => {
|
|
1546
1546
|
if (!onRowClick) return;
|
|
1547
1547
|
if (!shouldToggleOnKey(e.key)) return;
|
|
@@ -1658,7 +1658,7 @@ function TableRow({
|
|
|
1658
1658
|
columns.map((column) => {
|
|
1659
1659
|
var _a2, _b, _c, _d;
|
|
1660
1660
|
const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
|
|
1661
|
-
|
|
1661
|
+
column.allowOverflow;
|
|
1662
1662
|
const cellValue = getCellDisplayValue(row, column);
|
|
1663
1663
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1664
1664
|
"td",
|
|
@@ -1678,7 +1678,7 @@ function TableRow({
|
|
|
1678
1678
|
className: Table_default.cellContent,
|
|
1679
1679
|
"data-align": (_c = column.align) != null ? _c : "left",
|
|
1680
1680
|
"data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
|
|
1681
|
-
children:
|
|
1681
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
|
|
1682
1682
|
}
|
|
1683
1683
|
)
|
|
1684
1684
|
},
|
|
@@ -1952,10 +1952,10 @@ function Table({
|
|
|
1952
1952
|
onPageChange,
|
|
1953
1953
|
...rest
|
|
1954
1954
|
}) {
|
|
1955
|
-
const visibleColumns =
|
|
1956
|
-
const selectionInputName =
|
|
1957
|
-
const internalTableRootRef =
|
|
1958
|
-
const tableRootRefWrapper =
|
|
1955
|
+
const visibleColumns = React8.useMemo(() => getVisibleColumns(columns), [columns]);
|
|
1956
|
+
const selectionInputName = React8.useId();
|
|
1957
|
+
const internalTableRootRef = React8.useRef(null);
|
|
1958
|
+
const tableRootRefWrapper = React8.useRef(tableRootRef);
|
|
1959
1959
|
const hasSelection = Boolean(selectedRows && onRowSelect);
|
|
1960
1960
|
const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
|
|
1961
1961
|
const paginationOffset = hasPagination ? 72 : 0;
|
|
@@ -1965,7 +1965,7 @@ function Table({
|
|
|
1965
1965
|
});
|
|
1966
1966
|
const fillViewportActive = fillViewport && containScrolling && maxHeight >= 500;
|
|
1967
1967
|
const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
|
|
1968
|
-
const setTableRootRef =
|
|
1968
|
+
const setTableRootRef = React8.useCallback((node) => {
|
|
1969
1969
|
internalTableRootRef.current = node;
|
|
1970
1970
|
if (typeof tableRootRefWrapper.current === "function") {
|
|
1971
1971
|
tableRootRefWrapper.current(node);
|
|
@@ -1973,7 +1973,7 @@ function Table({
|
|
|
1973
1973
|
tableRootRefWrapper.current.current = node;
|
|
1974
1974
|
}
|
|
1975
1975
|
}, []);
|
|
1976
|
-
const handlePageChange =
|
|
1976
|
+
const handlePageChange = React8.useCallback(
|
|
1977
1977
|
(e) => {
|
|
1978
1978
|
onPageChange == null ? void 0 : onPageChange(e);
|
|
1979
1979
|
},
|
|
@@ -2280,19 +2280,19 @@ function TanstackTable(props) {
|
|
|
2280
2280
|
...tableProps
|
|
2281
2281
|
} = props;
|
|
2282
2282
|
const isControlledSorting = controlledSorting != null;
|
|
2283
|
-
const [uiSorting, setUiSorting] =
|
|
2284
|
-
|
|
2283
|
+
const [uiSorting, setUiSorting] = React8__namespace.useState(controlledSorting != null ? controlledSorting : []);
|
|
2284
|
+
React8__namespace.useEffect(() => {
|
|
2285
2285
|
if (!isControlledSorting) return;
|
|
2286
2286
|
if (sortingEqual(uiSorting, controlledSorting)) return;
|
|
2287
2287
|
setUiSorting(controlledSorting);
|
|
2288
2288
|
}, [isControlledSorting, controlledSorting, uiSorting]);
|
|
2289
|
-
const columnVisibility =
|
|
2289
|
+
const columnVisibility = React8__namespace.useMemo(
|
|
2290
2290
|
() => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
|
|
2291
2291
|
[columns, visibleColumnIds]
|
|
2292
2292
|
);
|
|
2293
|
-
const [columnSizing, setColumnSizing] =
|
|
2294
|
-
const containerRef =
|
|
2295
|
-
const [availableWidth, setAvailableWidth] =
|
|
2293
|
+
const [columnSizing, setColumnSizing] = React8__namespace.useState({});
|
|
2294
|
+
const containerRef = React8__namespace.useRef(null);
|
|
2295
|
+
const [availableWidth, setAvailableWidth] = React8__namespace.useState(void 0);
|
|
2296
2296
|
const table = reactTable.useReactTable({
|
|
2297
2297
|
data,
|
|
2298
2298
|
columns,
|
|
@@ -2318,7 +2318,7 @@ function TanstackTable(props) {
|
|
|
2318
2318
|
size: DEFAULT_COLUMN_PX
|
|
2319
2319
|
}
|
|
2320
2320
|
});
|
|
2321
|
-
|
|
2321
|
+
React8__namespace.useLayoutEffect(() => {
|
|
2322
2322
|
const el = containerRef.current;
|
|
2323
2323
|
if (!el) return;
|
|
2324
2324
|
const updateWidth = () => {
|
|
@@ -2334,7 +2334,7 @@ function TanstackTable(props) {
|
|
|
2334
2334
|
observer.observe(el);
|
|
2335
2335
|
return () => observer.disconnect();
|
|
2336
2336
|
}, []);
|
|
2337
|
-
const distributedLayout =
|
|
2337
|
+
const distributedLayout = React8__namespace.useMemo(() => {
|
|
2338
2338
|
if (availableWidth == null) return null;
|
|
2339
2339
|
return buildDistributedColumnWidths({
|
|
2340
2340
|
table,
|
|
@@ -2345,7 +2345,7 @@ function TanstackTable(props) {
|
|
|
2345
2345
|
});
|
|
2346
2346
|
}, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
|
|
2347
2347
|
const initialLayoutReady = availableWidth != null;
|
|
2348
|
-
const resolvedLayout =
|
|
2348
|
+
const resolvedLayout = React8__namespace.useMemo(() => {
|
|
2349
2349
|
const next = {};
|
|
2350
2350
|
table.getVisibleLeafColumns().forEach((column) => {
|
|
2351
2351
|
next[column.id] = {
|
|
@@ -2354,13 +2354,13 @@ function TanstackTable(props) {
|
|
|
2354
2354
|
});
|
|
2355
2355
|
return next;
|
|
2356
2356
|
}, [table, distributedLayout]);
|
|
2357
|
-
const columnItems =
|
|
2357
|
+
const columnItems = React8__namespace.useMemo(
|
|
2358
2358
|
() => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
|
|
2359
2359
|
[columns, columnVisibility, resolvedLayout]
|
|
2360
2360
|
);
|
|
2361
2361
|
const visibleData = table.getRowModel().rows.map((r) => r.original);
|
|
2362
2362
|
const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
|
|
2363
|
-
const handleSortChange =
|
|
2363
|
+
const handleSortChange = React8__namespace.useCallback(
|
|
2364
2364
|
(column, direction) => {
|
|
2365
2365
|
const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
|
|
2366
2366
|
if (optimisticSortingUi) setUiSorting(next);
|
|
@@ -2368,7 +2368,7 @@ function TanstackTable(props) {
|
|
|
2368
2368
|
},
|
|
2369
2369
|
[optimisticSortingUi, onSortingChange]
|
|
2370
2370
|
);
|
|
2371
|
-
const headerExtras =
|
|
2371
|
+
const headerExtras = React8__namespace.useCallback(
|
|
2372
2372
|
({ index }) => {
|
|
2373
2373
|
var _a, _b, _c, _d;
|
|
2374
2374
|
const headerGroups = table.getHeaderGroups();
|
|
@@ -2417,17 +2417,17 @@ function TableSettings({
|
|
|
2417
2417
|
handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
|
|
2418
2418
|
close == null ? void 0 : close();
|
|
2419
2419
|
};
|
|
2420
|
-
const hideableColumns =
|
|
2421
|
-
const allPresetIds =
|
|
2422
|
-
const standardPresetIds =
|
|
2420
|
+
const hideableColumns = React8.useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
|
|
2421
|
+
const allPresetIds = React8.useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
|
|
2422
|
+
const standardPresetIds = React8.useMemo(
|
|
2423
2423
|
() => hideableColumns.filter((c) => {
|
|
2424
2424
|
var _a;
|
|
2425
2425
|
return ((_a = c.meta) == null ? void 0 : _a.hidden) !== true;
|
|
2426
2426
|
}).map((c) => c.id),
|
|
2427
2427
|
[hideableColumns]
|
|
2428
2428
|
);
|
|
2429
|
-
const visibleSet =
|
|
2430
|
-
const visibleCount =
|
|
2429
|
+
const visibleSet = React8.useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]);
|
|
2430
|
+
const visibleCount = React8.useMemo(() => {
|
|
2431
2431
|
return hideableColumns.reduce((acc, c) => {
|
|
2432
2432
|
var _a;
|
|
2433
2433
|
return acc + (visibleSet.has((_a = c.id) != null ? _a : "") ? 1 : 0);
|
|
@@ -2446,11 +2446,11 @@ function TableSettings({
|
|
|
2446
2446
|
else next.delete(id);
|
|
2447
2447
|
setVisibleIds(Array.from(next));
|
|
2448
2448
|
};
|
|
2449
|
-
const isAllActive =
|
|
2449
|
+
const isAllActive = React8.useMemo(() => {
|
|
2450
2450
|
if (!hideableColumns.length) return false;
|
|
2451
2451
|
return hideableColumns.every((c) => c.id && visibleSet.has(c.id));
|
|
2452
2452
|
}, [hideableColumns, visibleSet]);
|
|
2453
|
-
const isStandardActive =
|
|
2453
|
+
const isStandardActive = React8.useMemo(() => {
|
|
2454
2454
|
if (!hideableColumns.length) return false;
|
|
2455
2455
|
const std = new Set(standardPresetIds);
|
|
2456
2456
|
return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
|
|
@@ -2600,23 +2600,23 @@ function useTableSettings({
|
|
|
2600
2600
|
defaultVisibleColumnIds,
|
|
2601
2601
|
storage = localStorageTableSettingsStorage
|
|
2602
2602
|
}) {
|
|
2603
|
-
const defaults =
|
|
2603
|
+
const defaults = React8.useMemo(() => {
|
|
2604
2604
|
return {
|
|
2605
2605
|
viewMode: defaultViewMode,
|
|
2606
2606
|
visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns)
|
|
2607
2607
|
};
|
|
2608
2608
|
}, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
|
|
2609
|
-
const [state, setState] =
|
|
2610
|
-
|
|
2609
|
+
const [state, setState] = React8.useState(defaults);
|
|
2610
|
+
React8.useEffect(() => {
|
|
2611
2611
|
const stored = storage.get(storageKey);
|
|
2612
2612
|
const next = mergeDefaults(stored, defaults);
|
|
2613
2613
|
setState(next);
|
|
2614
2614
|
}, [storageKey, storage, defaults]);
|
|
2615
|
-
const persist =
|
|
2615
|
+
const persist = React8.useCallback(
|
|
2616
2616
|
(next) => storage.set(storageKey, next),
|
|
2617
2617
|
[storage, storageKey]
|
|
2618
2618
|
);
|
|
2619
|
-
const setViewMode =
|
|
2619
|
+
const setViewMode = React8.useCallback(
|
|
2620
2620
|
(mode) => {
|
|
2621
2621
|
setState((prev) => {
|
|
2622
2622
|
if (prev.viewMode === mode) return prev;
|
|
@@ -2627,7 +2627,7 @@ function useTableSettings({
|
|
|
2627
2627
|
},
|
|
2628
2628
|
[persist]
|
|
2629
2629
|
);
|
|
2630
|
-
const toggleViewMode =
|
|
2630
|
+
const toggleViewMode = React8.useCallback(() => {
|
|
2631
2631
|
setState((prev) => {
|
|
2632
2632
|
const nextMode = prev.viewMode === "wrapped" ? "compact" : "wrapped";
|
|
2633
2633
|
const next = { ...prev, viewMode: nextMode };
|
|
@@ -2635,7 +2635,7 @@ function useTableSettings({
|
|
|
2635
2635
|
return next;
|
|
2636
2636
|
});
|
|
2637
2637
|
}, [persist]);
|
|
2638
|
-
const setVisibleColumnIds =
|
|
2638
|
+
const setVisibleColumnIds = React8.useCallback(
|
|
2639
2639
|
(ids) => {
|
|
2640
2640
|
setState((prev) => {
|
|
2641
2641
|
const next = { ...prev, visibleColumnIds: ids };
|