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.
Files changed (7) hide show
  1. package/dist/index.d.mts +4 -1
  2. package/dist/index.d.ts +4 -1
  3. package/dist/index.js +112 -85
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +112 -85
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -293,11 +293,13 @@ type ModalRef = {
293
293
  type ModalComponent = {
294
294
  (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
295
295
  confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
296
+ message?: string;
296
297
  continueButtonLoaderName?: LoaderName | AnyOtherString;
297
298
  onContinue?: () => void;
298
299
  onCancel?: () => void;
299
300
  }>) => React.ReactElement;
300
301
  destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
302
+ message?: string;
301
303
  deleteButtonLoaderName?: LoaderName | AnyOtherString;
302
304
  onDelete?: () => void;
303
305
  onCancel?: () => void;
@@ -644,7 +646,7 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
644
646
  withText: typeof ColorThemeSwitchComponent.withText;
645
647
  };
646
648
 
647
- type FilterPreset = "today" | "yesterday" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
649
+ type FilterPreset = "today" | "yesterday" | "tomorrow" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
648
650
  type TableFilterData = {
649
651
  type: "number";
650
652
  min?: number;
@@ -700,6 +702,7 @@ type TableColumn<DataItem> = {
700
702
  minWidth?: string | number;
701
703
  maxWidth?: string | number;
702
704
  align?: "left" | "center" | "right";
705
+ clickStopPropagation?: boolean;
703
706
  } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem> | ExpandColumn<DataItem>) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
704
707
  type TableProps<DataItem> = {
705
708
  columns: TableColumn<DataItem>[];
package/dist/index.d.ts CHANGED
@@ -293,11 +293,13 @@ type ModalRef = {
293
293
  type ModalComponent = {
294
294
  (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
295
295
  confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
296
+ message?: string;
296
297
  continueButtonLoaderName?: LoaderName | AnyOtherString;
297
298
  onContinue?: () => void;
298
299
  onCancel?: () => void;
299
300
  }>) => React.ReactElement;
300
301
  destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
302
+ message?: string;
301
303
  deleteButtonLoaderName?: LoaderName | AnyOtherString;
302
304
  onDelete?: () => void;
303
305
  onCancel?: () => void;
@@ -644,7 +646,7 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
644
646
  withText: typeof ColorThemeSwitchComponent.withText;
645
647
  };
646
648
 
647
- type FilterPreset = "today" | "yesterday" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
649
+ type FilterPreset = "today" | "yesterday" | "tomorrow" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
648
650
  type TableFilterData = {
649
651
  type: "number";
650
652
  min?: number;
@@ -700,6 +702,7 @@ type TableColumn<DataItem> = {
700
702
  minWidth?: string | number;
701
703
  maxWidth?: string | number;
702
704
  align?: "left" | "center" | "right";
705
+ clickStopPropagation?: boolean;
703
706
  } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem> | ExpandColumn<DataItem>) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
704
707
  type TableProps<DataItem> = {
705
708
  columns: TableColumn<DataItem>[];
package/dist/index.js CHANGED
@@ -3098,7 +3098,7 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
3098
3098
  document.body
3099
3099
  );
3100
3100
  });
3101
- ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
3101
+ ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmation({ message, continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
3102
3102
  const theme2 = useTheme();
3103
3103
  const modalRef = (0, import_react11.useRef)(null);
3104
3104
  const onCancelElement = (0, import_react11.useCallback)(() => {
@@ -3111,7 +3111,7 @@ ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmati
3111
3111
  }, [onContinue]);
3112
3112
  (0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
3113
3113
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
3114
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }),
3114
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
3115
3115
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3116
3116
  Div_default.row,
3117
3117
  {
@@ -3127,7 +3127,7 @@ ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmati
3127
3127
  )
3128
3128
  ] });
3129
3129
  });
3130
- ModalComponent.destructive = (0, import_react11.forwardRef)(function Destructive2({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
3130
+ ModalComponent.destructive = (0, import_react11.forwardRef)(function Destructive2({ message, deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
3131
3131
  const theme2 = useTheme();
3132
3132
  const modalRef = (0, import_react11.useRef)(null);
3133
3133
  const onCancelElement = (0, import_react11.useCallback)(() => {
@@ -3140,7 +3140,7 @@ ModalComponent.destructive = (0, import_react11.forwardRef)(function Destructive
3140
3140
  }, [onDelete]);
3141
3141
  (0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
3142
3142
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
3143
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
3143
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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." }),
3144
3144
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3145
3145
  Div_default.row,
3146
3146
  {
@@ -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
 
@@ -6999,6 +7002,7 @@ var TdStyledComponent = import_styled_components11.default.td.withConfig({
6999
7002
  var filterPresetsText = {
7000
7003
  today: "Today",
7001
7004
  yesterday: "Yesterday",
7005
+ tomorrow: "Tomorrow",
7002
7006
  thisWeek: "This week",
7003
7007
  thisMonth: "This month",
7004
7008
  thisYear: "This year",
@@ -7062,7 +7066,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7062
7066
  filterModalRef.current?.close();
7063
7067
  }
7064
7068
  });
7065
- 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]);
7066
7070
  const renderCellContent = (0, import_react23.useCallback)(
7067
7071
  (column, item, itemIndex) => {
7068
7072
  switch (column.type) {
@@ -7086,6 +7090,9 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7086
7090
  {
7087
7091
  checked: checkedValue,
7088
7092
  value: item,
7093
+ onClick: (event) => {
7094
+ event.stopPropagation();
7095
+ },
7089
7096
  onChange: (checked, value) => {
7090
7097
  setCheckedItems(
7091
7098
  (oldValue) => oldValue.map(
@@ -7117,10 +7124,10 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7117
7124
  );
7118
7125
  const onClickRowElement = (0, import_react23.useCallback)(
7119
7126
  (item, index) => {
7120
- if (expandRow) {
7127
+ if (expandColumn) {
7121
7128
  setExpandedRows((oldValue) => {
7122
7129
  if (oldValue[index] === void 0) {
7123
- const newValue = expandRow.onlyOneExpanded ? [] : [...oldValue];
7130
+ const newValue = expandColumn.onlyOneExpanded ? [] : [...oldValue];
7124
7131
  newValue[index] = true;
7125
7132
  return newValue;
7126
7133
  }
@@ -7128,7 +7135,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7128
7135
  });
7129
7136
  } else onClickRow?.(item, index);
7130
7137
  },
7131
- [onClickRow, expandRow]
7138
+ [onClickRow, expandColumn]
7132
7139
  );
7133
7140
  const onClickAllCheckboxesElement = (0, import_react23.useCallback)(
7134
7141
  (checked) => {
@@ -7193,6 +7200,12 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7193
7200
  max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
7194
7201
  });
7195
7202
  break;
7203
+ case "tomorrow":
7204
+ filterForm.setFieldsValue({
7205
+ min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 1))),
7206
+ max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 1)))
7207
+ });
7208
+ break;
7196
7209
  case "thisWeek":
7197
7210
  filterForm.setFieldsValue({
7198
7211
  min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 7))),
@@ -7255,9 +7268,9 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7255
7268
  );
7256
7269
  const renderExpandedRow = (0, import_react23.useCallback)(
7257
7270
  (...props2) => {
7258
- const expandColumn = columns.find((column) => column.type === "expand");
7259
- if (!expandColumn) return;
7260
- return expandColumn.render?.(...props2);
7271
+ const expandColumn2 = columns.find((column) => column.type === "expand");
7272
+ if (!expandColumn2) return;
7273
+ return expandColumn2.render?.(...props2);
7261
7274
  },
7262
7275
  [columns]
7263
7276
  );
@@ -7378,7 +7391,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7378
7391
  TableStyledComponent,
7379
7392
  {
7380
7393
  isStriped,
7381
- withHover: onClickRow !== void 0 || expandRow !== void 0,
7394
+ withHover: onClickRow !== void 0 || expandColumn !== void 0,
7382
7395
  withStickyHeader,
7383
7396
  colorTheme,
7384
7397
  theme: theme2,
@@ -7424,12 +7437,15 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7424
7437
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
7425
7438
  "tr",
7426
7439
  {
7427
- className: onClickRow || expandRow ? "isClickable" : void 0,
7440
+ className: onClickRow || expandColumn ? "isClickable" : void 0,
7428
7441
  onClick: () => onClickRowElement(item, rowIndex),
7429
7442
  children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
7430
7443
  TdStyledComponent,
7431
7444
  {
7432
7445
  textAlign: column.align,
7446
+ onClick: (event) => {
7447
+ if (column.clickStopPropagation) event.stopPropagation();
7448
+ },
7433
7449
  children: renderCellContent(column, item, rowIndex)
7434
7450
  },
7435
7451
  column.type + column.label + colIndex
@@ -7565,23 +7581,24 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
7565
7581
  cancelButtonText: "Clear",
7566
7582
  onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
7567
7583
  children: [
7568
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FormRow_default, { children: [
7584
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
7569
7585
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
7570
7586
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
7571
- ] }),
7587
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
7588
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
7589
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
7590
+ ] }) }),
7572
7591
  openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
7573
7592
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label_default, { text: "Presets" }),
7574
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => {
7575
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
7576
- Button_default.secondary,
7577
- {
7578
- text: filterPresetsText[preset],
7579
- value: preset,
7580
- onClickWithValue: onClickFilterPreset
7581
- },
7582
- preset
7583
- );
7584
- }) })
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
+ )) })
7585
7602
  ] })
7586
7603
  ]
7587
7604
  }
@@ -7886,64 +7903,74 @@ var TooltipComponent = (0, import_react24.forwardRef)(function Tooltip({
7886
7903
  },
7887
7904
  [isOpen, openTooltip, closeTooltip]
7888
7905
  );
7889
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", onClick: onClickHolder, onMouseEnter, onMouseLeave, children: [
7890
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", isTabAccessed, ref: triggerHolderRef, children }),
7891
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
7892
- TooltipContainer,
7893
- {
7894
- theme: theme2,
7895
- position,
7896
- align,
7897
- withArrow,
7898
- arrowSize,
7899
- gap,
7900
- isOpen,
7901
- role: "tooltip",
7902
- ref: tooltipContainerRef,
7903
- children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
7904
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
7905
- Div_default.box,
7906
- {
7907
- position: "relative",
7908
- width: contentWidth,
7909
- minWidth: contentMinWidth,
7910
- backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
7911
- boxShadow: "0px 10px 20px #00000020",
7912
- paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
7913
- paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
7914
- overflow: asContextMenu ? "hidden" : void 0,
7915
- children: content
7916
- }
7917
- ),
7918
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
7919
- Div_default,
7920
- {
7921
- position: "absolute",
7922
- width: position === "left" || position === "right" ? totalGap : "100%",
7923
- height: position === "top" || position === "bottom" ? totalGap : "100%",
7924
- top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
7925
- bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
7926
- left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
7927
- right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
7928
- borderTopLeftRadius: 999,
7929
- borderTopRightRadius: 999
7930
- }
7931
- ),
7932
- withArrow && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
7933
- Arrow,
7934
- {
7935
- position,
7936
- align,
7937
- sideSpace: theme2.styles.borderRadius,
7938
- size: arrowSize,
7939
- color: backgroundColor ?? theme2.colors.backgroundContent,
7940
- isOpen
7941
- }
7942
- )
7943
- ] })
7944
- }
7945
- )
7946
- ] });
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
+ );
7947
7974
  });
7948
7975
  TooltipComponent.item = (0, import_react24.forwardRef)(function Item({ icon, text, description, isActive, value, id, onClick, onClickWithValue }, ref) {
7949
7976
  const theme2 = useTheme();