react-better-html 1.1.119 → 1.1.121
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +112 -85
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +112 -85
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -3016,7 +3016,7 @@ var ModalComponent = forwardRef6(function Modal({
|
|
|
3016
3016
|
document.body
|
|
3017
3017
|
);
|
|
3018
3018
|
});
|
|
3019
|
-
ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
|
|
3019
|
+
ModalComponent.confirmation = forwardRef6(function Confirmation({ message, continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
|
|
3020
3020
|
const theme2 = useTheme();
|
|
3021
3021
|
const modalRef = useRef2(null);
|
|
3022
3022
|
const onCancelElement = useCallback5(() => {
|
|
@@ -3029,7 +3029,7 @@ ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButton
|
|
|
3029
3029
|
}, [onContinue]);
|
|
3030
3030
|
useImperativeHandle(ref, () => modalRef.current, []);
|
|
3031
3031
|
return /* @__PURE__ */ jsxs5(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
|
|
3032
|
-
/* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }),
|
|
3032
|
+
/* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
|
|
3033
3033
|
/* @__PURE__ */ jsxs5(
|
|
3034
3034
|
Div_default.row,
|
|
3035
3035
|
{
|
|
@@ -3045,7 +3045,7 @@ ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButton
|
|
|
3045
3045
|
)
|
|
3046
3046
|
] });
|
|
3047
3047
|
});
|
|
3048
|
-
ModalComponent.destructive = forwardRef6(function Destructive2({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
|
|
3048
|
+
ModalComponent.destructive = forwardRef6(function Destructive2({ message, deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
|
|
3049
3049
|
const theme2 = useTheme();
|
|
3050
3050
|
const modalRef = useRef2(null);
|
|
3051
3051
|
const onCancelElement = useCallback5(() => {
|
|
@@ -3058,7 +3058,7 @@ ModalComponent.destructive = forwardRef6(function Destructive2({ deleteButtonLoa
|
|
|
3058
3058
|
}, [onDelete]);
|
|
3059
3059
|
useImperativeHandle(ref, () => modalRef.current, []);
|
|
3060
3060
|
return /* @__PURE__ */ jsxs5(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
|
|
3061
|
-
/* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
|
|
3061
|
+
/* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
|
|
3062
3062
|
/* @__PURE__ */ jsxs5(
|
|
3063
3063
|
Div_default.row,
|
|
3064
3064
|
{
|
|
@@ -6890,7 +6890,10 @@ var TableStyledComponent = styled10.table.withConfig({
|
|
|
6890
6890
|
transition: ${props.theme.styles.transition};
|
|
6891
6891
|
|
|
6892
6892
|
&:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
|
|
6893
|
-
|
|
6893
|
+
background-color: ${darkenColor(
|
|
6894
|
+
props.theme.colors.backgroundContent,
|
|
6895
|
+
props.colorTheme === "light" ? 0.05 : 0.15
|
|
6896
|
+
)};
|
|
6894
6897
|
}
|
|
6895
6898
|
` : ""}
|
|
6896
6899
|
|
|
@@ -6927,6 +6930,7 @@ var TdStyledComponent = styled10.td.withConfig({
|
|
|
6927
6930
|
var filterPresetsText = {
|
|
6928
6931
|
today: "Today",
|
|
6929
6932
|
yesterday: "Yesterday",
|
|
6933
|
+
tomorrow: "Tomorrow",
|
|
6930
6934
|
thisWeek: "This week",
|
|
6931
6935
|
thisMonth: "This month",
|
|
6932
6936
|
thisYear: "This year",
|
|
@@ -6990,7 +6994,7 @@ var TableComponent = forwardRef15(function Table({
|
|
|
6990
6994
|
filterModalRef.current?.close();
|
|
6991
6995
|
}
|
|
6992
6996
|
});
|
|
6993
|
-
const
|
|
6997
|
+
const expandColumn = useMemo7(() => columns.find((column) => column.type === "expand"), [columns]);
|
|
6994
6998
|
const renderCellContent = useCallback10(
|
|
6995
6999
|
(column, item, itemIndex) => {
|
|
6996
7000
|
switch (column.type) {
|
|
@@ -7014,6 +7018,9 @@ var TableComponent = forwardRef15(function Table({
|
|
|
7014
7018
|
{
|
|
7015
7019
|
checked: checkedValue,
|
|
7016
7020
|
value: item,
|
|
7021
|
+
onClick: (event) => {
|
|
7022
|
+
event.stopPropagation();
|
|
7023
|
+
},
|
|
7017
7024
|
onChange: (checked, value) => {
|
|
7018
7025
|
setCheckedItems(
|
|
7019
7026
|
(oldValue) => oldValue.map(
|
|
@@ -7045,10 +7052,10 @@ var TableComponent = forwardRef15(function Table({
|
|
|
7045
7052
|
);
|
|
7046
7053
|
const onClickRowElement = useCallback10(
|
|
7047
7054
|
(item, index) => {
|
|
7048
|
-
if (
|
|
7055
|
+
if (expandColumn) {
|
|
7049
7056
|
setExpandedRows((oldValue) => {
|
|
7050
7057
|
if (oldValue[index] === void 0) {
|
|
7051
|
-
const newValue =
|
|
7058
|
+
const newValue = expandColumn.onlyOneExpanded ? [] : [...oldValue];
|
|
7052
7059
|
newValue[index] = true;
|
|
7053
7060
|
return newValue;
|
|
7054
7061
|
}
|
|
@@ -7056,7 +7063,7 @@ var TableComponent = forwardRef15(function Table({
|
|
|
7056
7063
|
});
|
|
7057
7064
|
} else onClickRow?.(item, index);
|
|
7058
7065
|
},
|
|
7059
|
-
[onClickRow,
|
|
7066
|
+
[onClickRow, expandColumn]
|
|
7060
7067
|
);
|
|
7061
7068
|
const onClickAllCheckboxesElement = useCallback10(
|
|
7062
7069
|
(checked) => {
|
|
@@ -7121,6 +7128,12 @@ var TableComponent = forwardRef15(function Table({
|
|
|
7121
7128
|
max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
|
|
7122
7129
|
});
|
|
7123
7130
|
break;
|
|
7131
|
+
case "tomorrow":
|
|
7132
|
+
filterForm.setFieldsValue({
|
|
7133
|
+
min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 1))),
|
|
7134
|
+
max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 1)))
|
|
7135
|
+
});
|
|
7136
|
+
break;
|
|
7124
7137
|
case "thisWeek":
|
|
7125
7138
|
filterForm.setFieldsValue({
|
|
7126
7139
|
min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 7))),
|
|
@@ -7183,9 +7196,9 @@ var TableComponent = forwardRef15(function Table({
|
|
|
7183
7196
|
);
|
|
7184
7197
|
const renderExpandedRow = useCallback10(
|
|
7185
7198
|
(...props2) => {
|
|
7186
|
-
const
|
|
7187
|
-
if (!
|
|
7188
|
-
return
|
|
7199
|
+
const expandColumn2 = columns.find((column) => column.type === "expand");
|
|
7200
|
+
if (!expandColumn2) return;
|
|
7201
|
+
return expandColumn2.render?.(...props2);
|
|
7189
7202
|
},
|
|
7190
7203
|
[columns]
|
|
7191
7204
|
);
|
|
@@ -7306,7 +7319,7 @@ var TableComponent = forwardRef15(function Table({
|
|
|
7306
7319
|
TableStyledComponent,
|
|
7307
7320
|
{
|
|
7308
7321
|
isStriped,
|
|
7309
|
-
withHover: onClickRow !== void 0 ||
|
|
7322
|
+
withHover: onClickRow !== void 0 || expandColumn !== void 0,
|
|
7310
7323
|
withStickyHeader,
|
|
7311
7324
|
colorTheme,
|
|
7312
7325
|
theme: theme2,
|
|
@@ -7352,12 +7365,15 @@ var TableComponent = forwardRef15(function Table({
|
|
|
7352
7365
|
/* @__PURE__ */ jsx20(
|
|
7353
7366
|
"tr",
|
|
7354
7367
|
{
|
|
7355
|
-
className: onClickRow ||
|
|
7368
|
+
className: onClickRow || expandColumn ? "isClickable" : void 0,
|
|
7356
7369
|
onClick: () => onClickRowElement(item, rowIndex),
|
|
7357
7370
|
children: columns.map((column, colIndex) => /* @__PURE__ */ jsx20(
|
|
7358
7371
|
TdStyledComponent,
|
|
7359
7372
|
{
|
|
7360
7373
|
textAlign: column.align,
|
|
7374
|
+
onClick: (event) => {
|
|
7375
|
+
if (column.clickStopPropagation) event.stopPropagation();
|
|
7376
|
+
},
|
|
7361
7377
|
children: renderCellContent(column, item, rowIndex)
|
|
7362
7378
|
},
|
|
7363
7379
|
column.type + column.label + colIndex
|
|
@@ -7493,23 +7509,24 @@ var TableComponent = forwardRef15(function Table({
|
|
|
7493
7509
|
cancelButtonText: "Clear",
|
|
7494
7510
|
onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
|
|
7495
7511
|
children: [
|
|
7496
|
-
/* @__PURE__ */
|
|
7512
|
+
/* @__PURE__ */ jsx20(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
|
|
7497
7513
|
/* @__PURE__ */ jsx20(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
|
|
7498
7514
|
/* @__PURE__ */ jsx20(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
|
|
7499
|
-
] }),
|
|
7515
|
+
] }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
|
|
7516
|
+
/* @__PURE__ */ jsx20(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
|
|
7517
|
+
/* @__PURE__ */ jsx20(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
|
|
7518
|
+
] }) }),
|
|
7500
7519
|
openedFilterColumn.presets && /* @__PURE__ */ jsxs16(Div_default.column, { gap: theme2.styles.gap / 2, children: [
|
|
7501
7520
|
/* @__PURE__ */ jsx20(Label_default, { text: "Presets" }),
|
|
7502
|
-
/* @__PURE__ */ jsx20(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) =>
|
|
7503
|
-
|
|
7504
|
-
|
|
7505
|
-
|
|
7506
|
-
|
|
7507
|
-
|
|
7508
|
-
|
|
7509
|
-
|
|
7510
|
-
|
|
7511
|
-
);
|
|
7512
|
-
}) })
|
|
7521
|
+
/* @__PURE__ */ jsx20(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx20(
|
|
7522
|
+
Button_default.secondary,
|
|
7523
|
+
{
|
|
7524
|
+
text: filterPresetsText[preset],
|
|
7525
|
+
value: preset,
|
|
7526
|
+
onClickWithValue: onClickFilterPreset
|
|
7527
|
+
},
|
|
7528
|
+
preset
|
|
7529
|
+
)) })
|
|
7513
7530
|
] })
|
|
7514
7531
|
]
|
|
7515
7532
|
}
|
|
@@ -7814,64 +7831,74 @@ var TooltipComponent = forwardRef16(function Tooltip({
|
|
|
7814
7831
|
},
|
|
7815
7832
|
[isOpen, openTooltip, closeTooltip]
|
|
7816
7833
|
);
|
|
7817
|
-
return /* @__PURE__ */ jsxs17(
|
|
7818
|
-
|
|
7819
|
-
|
|
7820
|
-
|
|
7821
|
-
|
|
7822
|
-
|
|
7823
|
-
|
|
7824
|
-
|
|
7825
|
-
|
|
7826
|
-
|
|
7827
|
-
|
|
7828
|
-
|
|
7829
|
-
|
|
7830
|
-
|
|
7831
|
-
|
|
7832
|
-
|
|
7833
|
-
|
|
7834
|
-
|
|
7835
|
-
|
|
7836
|
-
|
|
7837
|
-
|
|
7838
|
-
|
|
7839
|
-
|
|
7840
|
-
|
|
7841
|
-
|
|
7842
|
-
|
|
7843
|
-
|
|
7844
|
-
|
|
7845
|
-
|
|
7846
|
-
|
|
7847
|
-
|
|
7848
|
-
|
|
7849
|
-
|
|
7850
|
-
|
|
7851
|
-
|
|
7852
|
-
|
|
7853
|
-
|
|
7854
|
-
|
|
7855
|
-
|
|
7856
|
-
|
|
7857
|
-
|
|
7858
|
-
|
|
7859
|
-
|
|
7860
|
-
|
|
7861
|
-
|
|
7862
|
-
|
|
7863
|
-
|
|
7864
|
-
|
|
7865
|
-
|
|
7866
|
-
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7870
|
-
|
|
7871
|
-
|
|
7872
|
-
|
|
7873
|
-
|
|
7874
|
-
|
|
7834
|
+
return /* @__PURE__ */ jsxs17(
|
|
7835
|
+
Div_default,
|
|
7836
|
+
{
|
|
7837
|
+
position: "relative",
|
|
7838
|
+
width: "fit-content",
|
|
7839
|
+
onClick: onClickHolder,
|
|
7840
|
+
onMouseEnter,
|
|
7841
|
+
onMouseLeave,
|
|
7842
|
+
children: [
|
|
7843
|
+
/* @__PURE__ */ jsx21(Div_default, { width: "fit-content", isTabAccessed, ref: triggerHolderRef, children }),
|
|
7844
|
+
/* @__PURE__ */ jsx21(
|
|
7845
|
+
TooltipContainer,
|
|
7846
|
+
{
|
|
7847
|
+
theme: theme2,
|
|
7848
|
+
position,
|
|
7849
|
+
align,
|
|
7850
|
+
withArrow,
|
|
7851
|
+
arrowSize,
|
|
7852
|
+
gap,
|
|
7853
|
+
isOpen,
|
|
7854
|
+
role: "tooltip",
|
|
7855
|
+
ref: tooltipContainerRef,
|
|
7856
|
+
children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs17(Div_default, { position: "relative", ref: contentRef, children: [
|
|
7857
|
+
/* @__PURE__ */ jsx21(
|
|
7858
|
+
Div_default.box,
|
|
7859
|
+
{
|
|
7860
|
+
position: "relative",
|
|
7861
|
+
width: contentWidth,
|
|
7862
|
+
minWidth: contentMinWidth,
|
|
7863
|
+
backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
|
|
7864
|
+
boxShadow: "0px 10px 20px #00000020",
|
|
7865
|
+
paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
|
|
7866
|
+
paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
|
|
7867
|
+
overflow: asContextMenu ? "hidden" : void 0,
|
|
7868
|
+
children: content
|
|
7869
|
+
}
|
|
7870
|
+
),
|
|
7871
|
+
/* @__PURE__ */ jsx21(
|
|
7872
|
+
Div_default,
|
|
7873
|
+
{
|
|
7874
|
+
position: "absolute",
|
|
7875
|
+
width: position === "left" || position === "right" ? totalGap : "100%",
|
|
7876
|
+
height: position === "top" || position === "bottom" ? totalGap : "100%",
|
|
7877
|
+
top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
|
|
7878
|
+
bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
|
|
7879
|
+
left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
|
|
7880
|
+
right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
|
|
7881
|
+
borderTopLeftRadius: 999,
|
|
7882
|
+
borderTopRightRadius: 999
|
|
7883
|
+
}
|
|
7884
|
+
),
|
|
7885
|
+
withArrow && /* @__PURE__ */ jsx21(
|
|
7886
|
+
Arrow,
|
|
7887
|
+
{
|
|
7888
|
+
position,
|
|
7889
|
+
align,
|
|
7890
|
+
sideSpace: theme2.styles.borderRadius,
|
|
7891
|
+
size: arrowSize,
|
|
7892
|
+
color: backgroundColor ?? theme2.colors.backgroundContent,
|
|
7893
|
+
isOpen
|
|
7894
|
+
}
|
|
7895
|
+
)
|
|
7896
|
+
] })
|
|
7897
|
+
}
|
|
7898
|
+
)
|
|
7899
|
+
]
|
|
7900
|
+
}
|
|
7901
|
+
);
|
|
7875
7902
|
});
|
|
7876
7903
|
TooltipComponent.item = forwardRef16(function Item({ icon, text, description, isActive, value, id, onClick, onClickWithValue }, ref) {
|
|
7877
7904
|
const theme2 = useTheme();
|