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.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
- filter: brightness(${props.colorTheme === "light" ? 0.95 : 0.7});
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 expandRow = useMemo7(() => columns.find((column) => column.type === "expand"), [columns]);
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 (expandRow) {
7055
+ if (expandColumn) {
7049
7056
  setExpandedRows((oldValue) => {
7050
7057
  if (oldValue[index] === void 0) {
7051
- const newValue = expandRow.onlyOneExpanded ? [] : [...oldValue];
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, expandRow]
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 expandColumn = columns.find((column) => column.type === "expand");
7187
- if (!expandColumn) return;
7188
- return expandColumn.render?.(...props2);
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 || expandRow !== 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 || expandRow ? "isClickable" : void 0,
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__ */ jsxs16(FormRow_default, { children: [
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
- return /* @__PURE__ */ jsx20(
7504
- Button_default.secondary,
7505
- {
7506
- text: filterPresetsText[preset],
7507
- value: preset,
7508
- onClickWithValue: onClickFilterPreset
7509
- },
7510
- preset
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(Div_default, { position: "relative", onClick: onClickHolder, onMouseEnter, onMouseLeave, children: [
7818
- /* @__PURE__ */ jsx21(Div_default, { width: "100%", isTabAccessed, ref: triggerHolderRef, children }),
7819
- /* @__PURE__ */ jsx21(
7820
- TooltipContainer,
7821
- {
7822
- theme: theme2,
7823
- position,
7824
- align,
7825
- withArrow,
7826
- arrowSize,
7827
- gap,
7828
- isOpen,
7829
- role: "tooltip",
7830
- ref: tooltipContainerRef,
7831
- children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs17(Div_default, { position: "relative", ref: contentRef, children: [
7832
- /* @__PURE__ */ jsx21(
7833
- Div_default.box,
7834
- {
7835
- position: "relative",
7836
- width: contentWidth,
7837
- minWidth: contentMinWidth,
7838
- backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
7839
- boxShadow: "0px 10px 20px #00000020",
7840
- paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
7841
- paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
7842
- overflow: asContextMenu ? "hidden" : void 0,
7843
- children: content
7844
- }
7845
- ),
7846
- /* @__PURE__ */ jsx21(
7847
- Div_default,
7848
- {
7849
- position: "absolute",
7850
- width: position === "left" || position === "right" ? totalGap : "100%",
7851
- height: position === "top" || position === "bottom" ? totalGap : "100%",
7852
- top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
7853
- bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
7854
- left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
7855
- right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
7856
- borderTopLeftRadius: 999,
7857
- borderTopRightRadius: 999
7858
- }
7859
- ),
7860
- withArrow && /* @__PURE__ */ jsx21(
7861
- Arrow,
7862
- {
7863
- position,
7864
- align,
7865
- sideSpace: theme2.styles.borderRadius,
7866
- size: arrowSize,
7867
- color: backgroundColor ?? theme2.colors.backgroundContent,
7868
- isOpen
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();