react-better-html 1.1.120 → 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 +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +96 -79
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +96 -79
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -702,6 +702,7 @@ type TableColumn<DataItem> = {
|
|
|
702
702
|
minWidth?: string | number;
|
|
703
703
|
maxWidth?: string | number;
|
|
704
704
|
align?: "left" | "center" | "right";
|
|
705
|
+
clickStopPropagation?: boolean;
|
|
705
706
|
} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem> | ExpandColumn<DataItem>) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
|
|
706
707
|
type TableProps<DataItem> = {
|
|
707
708
|
columns: TableColumn<DataItem>[];
|
package/dist/index.d.ts
CHANGED
|
@@ -702,6 +702,7 @@ type TableColumn<DataItem> = {
|
|
|
702
702
|
minWidth?: string | number;
|
|
703
703
|
maxWidth?: string | number;
|
|
704
704
|
align?: "left" | "center" | "right";
|
|
705
|
+
clickStopPropagation?: boolean;
|
|
705
706
|
} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem> | ExpandColumn<DataItem>) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
|
|
706
707
|
type TableProps<DataItem> = {
|
|
707
708
|
columns: TableColumn<DataItem>[];
|
package/dist/index.js
CHANGED
|
@@ -6962,7 +6962,10 @@ var TableStyledComponent = import_styled_components11.default.table.withConfig({
|
|
|
6962
6962
|
transition: ${props.theme.styles.transition};
|
|
6963
6963
|
|
|
6964
6964
|
&:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
|
|
6965
|
-
|
|
6965
|
+
background-color: ${darkenColor(
|
|
6966
|
+
props.theme.colors.backgroundContent,
|
|
6967
|
+
props.colorTheme === "light" ? 0.05 : 0.15
|
|
6968
|
+
)};
|
|
6966
6969
|
}
|
|
6967
6970
|
` : ""}
|
|
6968
6971
|
|
|
@@ -7063,7 +7066,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
|
|
|
7063
7066
|
filterModalRef.current?.close();
|
|
7064
7067
|
}
|
|
7065
7068
|
});
|
|
7066
|
-
const
|
|
7069
|
+
const expandColumn = (0, import_react23.useMemo)(() => columns.find((column) => column.type === "expand"), [columns]);
|
|
7067
7070
|
const renderCellContent = (0, import_react23.useCallback)(
|
|
7068
7071
|
(column, item, itemIndex) => {
|
|
7069
7072
|
switch (column.type) {
|
|
@@ -7087,6 +7090,9 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
|
|
|
7087
7090
|
{
|
|
7088
7091
|
checked: checkedValue,
|
|
7089
7092
|
value: item,
|
|
7093
|
+
onClick: (event) => {
|
|
7094
|
+
event.stopPropagation();
|
|
7095
|
+
},
|
|
7090
7096
|
onChange: (checked, value) => {
|
|
7091
7097
|
setCheckedItems(
|
|
7092
7098
|
(oldValue) => oldValue.map(
|
|
@@ -7118,10 +7124,10 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
|
|
|
7118
7124
|
);
|
|
7119
7125
|
const onClickRowElement = (0, import_react23.useCallback)(
|
|
7120
7126
|
(item, index) => {
|
|
7121
|
-
if (
|
|
7127
|
+
if (expandColumn) {
|
|
7122
7128
|
setExpandedRows((oldValue) => {
|
|
7123
7129
|
if (oldValue[index] === void 0) {
|
|
7124
|
-
const newValue =
|
|
7130
|
+
const newValue = expandColumn.onlyOneExpanded ? [] : [...oldValue];
|
|
7125
7131
|
newValue[index] = true;
|
|
7126
7132
|
return newValue;
|
|
7127
7133
|
}
|
|
@@ -7129,7 +7135,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
|
|
|
7129
7135
|
});
|
|
7130
7136
|
} else onClickRow?.(item, index);
|
|
7131
7137
|
},
|
|
7132
|
-
[onClickRow,
|
|
7138
|
+
[onClickRow, expandColumn]
|
|
7133
7139
|
);
|
|
7134
7140
|
const onClickAllCheckboxesElement = (0, import_react23.useCallback)(
|
|
7135
7141
|
(checked) => {
|
|
@@ -7262,9 +7268,9 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
|
|
|
7262
7268
|
);
|
|
7263
7269
|
const renderExpandedRow = (0, import_react23.useCallback)(
|
|
7264
7270
|
(...props2) => {
|
|
7265
|
-
const
|
|
7266
|
-
if (!
|
|
7267
|
-
return
|
|
7271
|
+
const expandColumn2 = columns.find((column) => column.type === "expand");
|
|
7272
|
+
if (!expandColumn2) return;
|
|
7273
|
+
return expandColumn2.render?.(...props2);
|
|
7268
7274
|
},
|
|
7269
7275
|
[columns]
|
|
7270
7276
|
);
|
|
@@ -7385,7 +7391,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
|
|
|
7385
7391
|
TableStyledComponent,
|
|
7386
7392
|
{
|
|
7387
7393
|
isStriped,
|
|
7388
|
-
withHover: onClickRow !== void 0 ||
|
|
7394
|
+
withHover: onClickRow !== void 0 || expandColumn !== void 0,
|
|
7389
7395
|
withStickyHeader,
|
|
7390
7396
|
colorTheme,
|
|
7391
7397
|
theme: theme2,
|
|
@@ -7431,12 +7437,15 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
|
|
|
7431
7437
|
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
7432
7438
|
"tr",
|
|
7433
7439
|
{
|
|
7434
|
-
className: onClickRow ||
|
|
7440
|
+
className: onClickRow || expandColumn ? "isClickable" : void 0,
|
|
7435
7441
|
onClick: () => onClickRowElement(item, rowIndex),
|
|
7436
7442
|
children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
7437
7443
|
TdStyledComponent,
|
|
7438
7444
|
{
|
|
7439
7445
|
textAlign: column.align,
|
|
7446
|
+
onClick: (event) => {
|
|
7447
|
+
if (column.clickStopPropagation) event.stopPropagation();
|
|
7448
|
+
},
|
|
7440
7449
|
children: renderCellContent(column, item, rowIndex)
|
|
7441
7450
|
},
|
|
7442
7451
|
column.type + column.label + colIndex
|
|
@@ -7581,17 +7590,15 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
|
|
|
7581
7590
|
] }) }),
|
|
7582
7591
|
openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
|
|
7583
7592
|
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label_default, { text: "Presets" }),
|
|
7584
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) =>
|
|
7585
|
-
|
|
7586
|
-
|
|
7587
|
-
|
|
7588
|
-
|
|
7589
|
-
|
|
7590
|
-
|
|
7591
|
-
|
|
7592
|
-
|
|
7593
|
-
);
|
|
7594
|
-
}) })
|
|
7593
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
7594
|
+
Button_default.secondary,
|
|
7595
|
+
{
|
|
7596
|
+
text: filterPresetsText[preset],
|
|
7597
|
+
value: preset,
|
|
7598
|
+
onClickWithValue: onClickFilterPreset
|
|
7599
|
+
},
|
|
7600
|
+
preset
|
|
7601
|
+
)) })
|
|
7595
7602
|
] })
|
|
7596
7603
|
]
|
|
7597
7604
|
}
|
|
@@ -7896,64 +7903,74 @@ var TooltipComponent = (0, import_react24.forwardRef)(function Tooltip({
|
|
|
7896
7903
|
},
|
|
7897
7904
|
[isOpen, openTooltip, closeTooltip]
|
|
7898
7905
|
);
|
|
7899
|
-
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
7900
|
-
|
|
7901
|
-
|
|
7902
|
-
|
|
7903
|
-
|
|
7904
|
-
|
|
7905
|
-
|
|
7906
|
-
|
|
7907
|
-
|
|
7908
|
-
|
|
7909
|
-
|
|
7910
|
-
|
|
7911
|
-
|
|
7912
|
-
|
|
7913
|
-
|
|
7914
|
-
|
|
7915
|
-
|
|
7916
|
-
|
|
7917
|
-
|
|
7918
|
-
|
|
7919
|
-
|
|
7920
|
-
|
|
7921
|
-
|
|
7922
|
-
|
|
7923
|
-
|
|
7924
|
-
|
|
7925
|
-
|
|
7926
|
-
|
|
7927
|
-
|
|
7928
|
-
|
|
7929
|
-
|
|
7930
|
-
|
|
7931
|
-
|
|
7932
|
-
|
|
7933
|
-
|
|
7934
|
-
|
|
7935
|
-
|
|
7936
|
-
|
|
7937
|
-
|
|
7938
|
-
|
|
7939
|
-
|
|
7940
|
-
|
|
7941
|
-
|
|
7942
|
-
|
|
7943
|
-
|
|
7944
|
-
|
|
7945
|
-
|
|
7946
|
-
|
|
7947
|
-
|
|
7948
|
-
|
|
7949
|
-
|
|
7950
|
-
|
|
7951
|
-
|
|
7952
|
-
|
|
7953
|
-
|
|
7954
|
-
|
|
7955
|
-
|
|
7956
|
-
|
|
7906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
7907
|
+
Div_default,
|
|
7908
|
+
{
|
|
7909
|
+
position: "relative",
|
|
7910
|
+
width: "fit-content",
|
|
7911
|
+
onClick: onClickHolder,
|
|
7912
|
+
onMouseEnter,
|
|
7913
|
+
onMouseLeave,
|
|
7914
|
+
children: [
|
|
7915
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "fit-content", isTabAccessed, ref: triggerHolderRef, children }),
|
|
7916
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
7917
|
+
TooltipContainer,
|
|
7918
|
+
{
|
|
7919
|
+
theme: theme2,
|
|
7920
|
+
position,
|
|
7921
|
+
align,
|
|
7922
|
+
withArrow,
|
|
7923
|
+
arrowSize,
|
|
7924
|
+
gap,
|
|
7925
|
+
isOpen,
|
|
7926
|
+
role: "tooltip",
|
|
7927
|
+
ref: tooltipContainerRef,
|
|
7928
|
+
children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
|
|
7929
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
7930
|
+
Div_default.box,
|
|
7931
|
+
{
|
|
7932
|
+
position: "relative",
|
|
7933
|
+
width: contentWidth,
|
|
7934
|
+
minWidth: contentMinWidth,
|
|
7935
|
+
backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
|
|
7936
|
+
boxShadow: "0px 10px 20px #00000020",
|
|
7937
|
+
paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
|
|
7938
|
+
paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
|
|
7939
|
+
overflow: asContextMenu ? "hidden" : void 0,
|
|
7940
|
+
children: content
|
|
7941
|
+
}
|
|
7942
|
+
),
|
|
7943
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
7944
|
+
Div_default,
|
|
7945
|
+
{
|
|
7946
|
+
position: "absolute",
|
|
7947
|
+
width: position === "left" || position === "right" ? totalGap : "100%",
|
|
7948
|
+
height: position === "top" || position === "bottom" ? totalGap : "100%",
|
|
7949
|
+
top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
|
|
7950
|
+
bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
|
|
7951
|
+
left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
|
|
7952
|
+
right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
|
|
7953
|
+
borderTopLeftRadius: 999,
|
|
7954
|
+
borderTopRightRadius: 999
|
|
7955
|
+
}
|
|
7956
|
+
),
|
|
7957
|
+
withArrow && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
7958
|
+
Arrow,
|
|
7959
|
+
{
|
|
7960
|
+
position,
|
|
7961
|
+
align,
|
|
7962
|
+
sideSpace: theme2.styles.borderRadius,
|
|
7963
|
+
size: arrowSize,
|
|
7964
|
+
color: backgroundColor ?? theme2.colors.backgroundContent,
|
|
7965
|
+
isOpen
|
|
7966
|
+
}
|
|
7967
|
+
)
|
|
7968
|
+
] })
|
|
7969
|
+
}
|
|
7970
|
+
)
|
|
7971
|
+
]
|
|
7972
|
+
}
|
|
7973
|
+
);
|
|
7957
7974
|
});
|
|
7958
7975
|
TooltipComponent.item = (0, import_react24.forwardRef)(function Item({ icon, text, description, isActive, value, id, onClick, onClickWithValue }, ref) {
|
|
7959
7976
|
const theme2 = useTheme();
|