react-better-html 1.1.120 → 1.1.122

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +4 -0
  2. package/dist/index.d.ts +4 -0
  3. package/dist/index.js +116 -86
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +116 -86
  6. package/dist/index.mjs.map +1 -1
  7. 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>[];
@@ -768,11 +769,14 @@ type TooltipComponent = {
768
769
  declare const TooltipComponent: TooltipComponent;
769
770
  type TooltipItemProps<Value = unknown> = {
770
771
  icon?: IconName | AnyOtherString;
772
+ iconColor?: string;
771
773
  text?: string;
774
+ textColor?: string;
772
775
  description?: string;
773
776
  isActive?: boolean;
774
777
  value?: Value;
775
778
  id?: string;
779
+ disabled?: boolean;
776
780
  onClick?: () => void;
777
781
  onClickWithValue?: (value: Value) => void;
778
782
  };
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>[];
@@ -768,11 +769,14 @@ type TooltipComponent = {
768
769
  declare const TooltipComponent: TooltipComponent;
769
770
  type TooltipItemProps<Value = unknown> = {
770
771
  icon?: IconName | AnyOtherString;
772
+ iconColor?: string;
771
773
  text?: string;
774
+ textColor?: string;
772
775
  description?: string;
773
776
  isActive?: boolean;
774
777
  value?: Value;
775
778
  id?: string;
779
+ disabled?: boolean;
776
780
  onClick?: () => void;
777
781
  onClickWithValue?: (value: Value) => void;
778
782
  };
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
- filter: brightness(${props.colorTheme === "light" ? 0.95 : 0.7});
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 expandRow = (0, import_react23.useMemo)(() => columns.find((column) => column.type === "expand"), [columns]);
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 (expandRow) {
7127
+ if (expandColumn) {
7122
7128
  setExpandedRows((oldValue) => {
7123
7129
  if (oldValue[index] === void 0) {
7124
- const newValue = expandRow.onlyOneExpanded ? [] : [...oldValue];
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, expandRow]
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 expandColumn = columns.find((column) => column.type === "expand");
7266
- if (!expandColumn) return;
7267
- return expandColumn.render?.(...props2);
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 || expandRow !== 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 || expandRow ? "isClickable" : void 0,
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
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
7586
- Button_default.secondary,
7587
- {
7588
- text: filterPresetsText[preset],
7589
- value: preset,
7590
- onClickWithValue: onClickFilterPreset
7591
- },
7592
- preset
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,66 +7903,88 @@ 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)(Div_default, { position: "relative", onClick: onClickHolder, onMouseEnter, onMouseLeave, children: [
7900
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", isTabAccessed, ref: triggerHolderRef, children }),
7901
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
7902
- TooltipContainer,
7903
- {
7904
- theme: theme2,
7905
- position,
7906
- align,
7907
- withArrow,
7908
- arrowSize,
7909
- gap,
7910
- isOpen,
7911
- role: "tooltip",
7912
- ref: tooltipContainerRef,
7913
- children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
7914
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
7915
- Div_default.box,
7916
- {
7917
- position: "relative",
7918
- width: contentWidth,
7919
- minWidth: contentMinWidth,
7920
- backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
7921
- boxShadow: "0px 10px 20px #00000020",
7922
- paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
7923
- paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
7924
- overflow: asContextMenu ? "hidden" : void 0,
7925
- children: content
7926
- }
7927
- ),
7928
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
7929
- Div_default,
7930
- {
7931
- position: "absolute",
7932
- width: position === "left" || position === "right" ? totalGap : "100%",
7933
- height: position === "top" || position === "bottom" ? totalGap : "100%",
7934
- top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
7935
- bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
7936
- left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
7937
- right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
7938
- borderTopLeftRadius: 999,
7939
- borderTopRightRadius: 999
7940
- }
7941
- ),
7942
- withArrow && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
7943
- Arrow,
7944
- {
7945
- position,
7946
- align,
7947
- sideSpace: theme2.styles.borderRadius,
7948
- size: arrowSize,
7949
- color: backgroundColor ?? theme2.colors.backgroundContent,
7950
- isOpen
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
- TooltipComponent.item = (0, import_react24.forwardRef)(function Item({ icon, text, description, isActive, value, id, onClick, onClickWithValue }, ref) {
7975
+ TooltipComponent.item = (0, import_react24.forwardRef)(function Item({
7976
+ icon,
7977
+ iconColor,
7978
+ text,
7979
+ textColor,
7980
+ description,
7981
+ isActive,
7982
+ value,
7983
+ id,
7984
+ disabled,
7985
+ onClick,
7986
+ onClickWithValue
7987
+ }, ref) {
7959
7988
  const theme2 = useTheme();
7960
7989
  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
7961
7990
  Div_default.row,
@@ -7963,20 +7992,21 @@ TooltipComponent.item = (0, import_react24.forwardRef)(function Item({ icon, tex
7963
7992
  alignItems: "center",
7964
7993
  gap: theme2.styles.space,
7965
7994
  backgroundColor: theme2.colors.backgroundContent,
7966
- filterHover: "brightness(0.9)",
7995
+ filterHover: !disabled ? "brightness(0.9)" : "brightness(0.94)",
7967
7996
  paddingBlock: theme2.styles.gap,
7968
7997
  paddingInline: theme2.styles.space,
7969
- cursor: "pointer",
7998
+ cursor: disabled ? "not-allowed" : "pointer",
7970
7999
  isTabAccessed: true,
7971
8000
  id,
8001
+ opacity: disabled ? 0.4 : void 0,
7972
8002
  value,
7973
- onClick,
7974
- onClickWithValue,
8003
+ onClick: !disabled ? onClick : void 0,
8004
+ onClickWithValue: !disabled ? onClickWithValue : void 0,
7975
8005
  ref,
7976
8006
  children: [
7977
- icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name: icon, color: !isActive ? theme2.colors.textSecondary : void 0 }),
8007
+ icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
7978
8008
  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
7979
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, children: text }),
8009
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
7980
8010
  description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
7981
8011
  ] })
7982
8012
  ]