react-better-html 1.1.120 → 1.1.122

package/dist/index.mjs

@@ -6890,7 +6890,10 @@ var TableStyledComponent = styled10.table.withConfig({
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
-                    filter: brightness(${props.colorTheme === "light" ? 0.95 : 0.7});
+                    background-color: ${darkenColor(
+  props.theme.colors.backgroundContent,
+  props.colorTheme === "light" ? 0.05 : 0.15
+)};
                  }
               ` : ""}
 
@@ -6991,7 +6994,7 @@ var TableComponent = forwardRef15(function Table({
       filterModalRef.current?.close();
     }
   });
-  const expandRow = useMemo7(() => columns.find((column) => column.type === "expand"), [columns]);
+  const expandColumn = useMemo7(() => columns.find((column) => column.type === "expand"), [columns]);
   const renderCellContent = useCallback10(
     (column, item, itemIndex) => {
       switch (column.type) {
@@ -7015,6 +7018,9 @@ var TableComponent = forwardRef15(function Table({
             {
               checked: checkedValue,
               value: item,
+              onClick: (event) => {
+                event.stopPropagation();
+              },
               onChange: (checked, value) => {
                 setCheckedItems(
                   (oldValue) => oldValue.map(
@@ -7046,10 +7052,10 @@ var TableComponent = forwardRef15(function Table({
   );
   const onClickRowElement = useCallback10(
     (item, index) => {
-      if (expandRow) {
+      if (expandColumn) {
         setExpandedRows((oldValue) => {
           if (oldValue[index] === void 0) {
-            const newValue = expandRow.onlyOneExpanded ? [] : [...oldValue];
+            const newValue = expandColumn.onlyOneExpanded ? [] : [...oldValue];
             newValue[index] = true;
             return newValue;
           }
@@ -7057,7 +7063,7 @@ var TableComponent = forwardRef15(function Table({
         });
       } else onClickRow?.(item, index);
     },
-    [onClickRow, expandRow]
+    [onClickRow, expandColumn]
   );
   const onClickAllCheckboxesElement = useCallback10(
     (checked) => {
@@ -7190,9 +7196,9 @@ var TableComponent = forwardRef15(function Table({
   );
   const renderExpandedRow = useCallback10(
     (...props2) => {
-      const expandColumn = columns.find((column) => column.type === "expand");
-      if (!expandColumn) return;
-      return expandColumn.render?.(...props2);
+      const expandColumn2 = columns.find((column) => column.type === "expand");
+      if (!expandColumn2) return;
+      return expandColumn2.render?.(...props2);
     },
     [columns]
   );
@@ -7313,7 +7319,7 @@ var TableComponent = forwardRef15(function Table({
           TableStyledComponent,
           {
             isStriped,
-            withHover: onClickRow !== void 0 || expandRow !== void 0,
+            withHover: onClickRow !== void 0 || expandColumn !== void 0,
             withStickyHeader,
             colorTheme,
             theme: theme2,
@@ -7359,12 +7365,15 @@ var TableComponent = forwardRef15(function Table({
                 /* @__PURE__ */ jsx20(
                   "tr",
                   {
-                    className: onClickRow || expandRow ? "isClickable" : void 0,
+                    className: onClickRow || expandColumn ? "isClickable" : void 0,
                     onClick: () => onClickRowElement(item, rowIndex),
                     children: columns.map((column, colIndex) => /* @__PURE__ */ jsx20(
                       TdStyledComponent,
                       {
                         textAlign: column.align,
+                        onClick: (event) => {
+                          if (column.clickStopPropagation) event.stopPropagation();
+                        },
                         children: renderCellContent(column, item, rowIndex)
                       },
                       column.type + column.label + colIndex
@@ -7509,17 +7518,15 @@ var TableComponent = forwardRef15(function Table({
               ] }) }),
               openedFilterColumn.presets && /* @__PURE__ */ jsxs16(Div_default.column, { gap: theme2.styles.gap / 2, children: [
                 /* @__PURE__ */ jsx20(Label_default, { text: "Presets" }),
-                /* @__PURE__ */ jsx20(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => {
-                  return /* @__PURE__ */ jsx20(
-                    Button_default.secondary,
-                    {
-                      text: filterPresetsText[preset],
-                      value: preset,
-                      onClickWithValue: onClickFilterPreset
-                    },
-                    preset
-                  );
-                }) })
+                /* @__PURE__ */ jsx20(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx20(
+                  Button_default.secondary,
+                  {
+                    text: filterPresetsText[preset],
+                    value: preset,
+                    onClickWithValue: onClickFilterPreset
+                  },
+                  preset
+                )) })
               ] })
             ]
           }
@@ -7824,66 +7831,88 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [isOpen, openTooltip, closeTooltip]
   );
-  return /* @__PURE__ */ jsxs17(Div_default, { position: "relative", onClick: onClickHolder, onMouseEnter, onMouseLeave, children: [
-    /* @__PURE__ */ jsx21(Div_default, { width: "100%", isTabAccessed, ref: triggerHolderRef, children }),
-    /* @__PURE__ */ jsx21(
-      TooltipContainer,
-      {
-        theme: theme2,
-        position,
-        align,
-        withArrow,
-        arrowSize,
-        gap,
-        isOpen,
-        role: "tooltip",
-        ref: tooltipContainerRef,
-        children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs17(Div_default, { position: "relative", ref: contentRef, children: [
-          /* @__PURE__ */ jsx21(
-            Div_default.box,
-            {
-              position: "relative",
-              width: contentWidth,
-              minWidth: contentMinWidth,
-              backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
-              boxShadow: "0px 10px 20px #00000020",
-              paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
-              paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
-              overflow: asContextMenu ? "hidden" : void 0,
-              children: content
-            }
-          ),
-          /* @__PURE__ */ jsx21(
-            Div_default,
-            {
-              position: "absolute",
-              width: position === "left" || position === "right" ? totalGap : "100%",
-              height: position === "top" || position === "bottom" ? totalGap : "100%",
-              top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
-              bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
-              left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
-              right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
-              borderTopLeftRadius: 999,
-              borderTopRightRadius: 999
-            }
-          ),
-          withArrow && /* @__PURE__ */ jsx21(
-            Arrow,
-            {
-              position,
-              align,
-              sideSpace: theme2.styles.borderRadius,
-              size: arrowSize,
-              color: backgroundColor ?? theme2.colors.backgroundContent,
-              isOpen
-            }
-          )
-        ] })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs17(
+    Div_default,
+    {
+      position: "relative",
+      width: "fit-content",
+      onClick: onClickHolder,
+      onMouseEnter,
+      onMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx21(Div_default, { width: "fit-content", isTabAccessed, ref: triggerHolderRef, children }),
+        /* @__PURE__ */ jsx21(
+          TooltipContainer,
+          {
+            theme: theme2,
+            position,
+            align,
+            withArrow,
+            arrowSize,
+            gap,
+            isOpen,
+            role: "tooltip",
+            ref: tooltipContainerRef,
+            children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs17(Div_default, { position: "relative", ref: contentRef, children: [
+              /* @__PURE__ */ jsx21(
+                Div_default.box,
+                {
+                  position: "relative",
+                  width: contentWidth,
+                  minWidth: contentMinWidth,
+                  backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
+                  boxShadow: "0px 10px 20px #00000020",
+                  paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
+                  paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
+                  overflow: asContextMenu ? "hidden" : void 0,
+                  children: content
+                }
+              ),
+              /* @__PURE__ */ jsx21(
+                Div_default,
+                {
+                  position: "absolute",
+                  width: position === "left" || position === "right" ? totalGap : "100%",
+                  height: position === "top" || position === "bottom" ? totalGap : "100%",
+                  top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
+                  bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
+                  left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
+                  right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
+                  borderTopLeftRadius: 999,
+                  borderTopRightRadius: 999
+                }
+              ),
+              withArrow && /* @__PURE__ */ jsx21(
+                Arrow,
+                {
+                  position,
+                  align,
+                  sideSpace: theme2.styles.borderRadius,
+                  size: arrowSize,
+                  color: backgroundColor ?? theme2.colors.backgroundContent,
+                  isOpen
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
 });
-TooltipComponent.item = forwardRef16(function Item({ icon, text, description, isActive, value, id, onClick, onClickWithValue }, ref) {
+TooltipComponent.item = forwardRef16(function Item({
+  icon,
+  iconColor,
+  text,
+  textColor,
+  description,
+  isActive,
+  value,
+  id,
+  disabled,
+  onClick,
+  onClickWithValue
+}, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ jsxs17(
     Div_default.row,
@@ -7891,20 +7920,21 @@ TooltipComponent.item = forwardRef16(function Item({ icon, text, description, is
       alignItems: "center",
       gap: theme2.styles.space,
       backgroundColor: theme2.colors.backgroundContent,
-      filterHover: "brightness(0.9)",
+      filterHover: !disabled ? "brightness(0.9)" : "brightness(0.94)",
       paddingBlock: theme2.styles.gap,
       paddingInline: theme2.styles.space,
-      cursor: "pointer",
+      cursor: disabled ? "not-allowed" : "pointer",
       isTabAccessed: true,
       id,
+      opacity: disabled ? 0.4 : void 0,
       value,
-      onClick,
-      onClickWithValue,
+      onClick: !disabled ? onClick : void 0,
+      onClickWithValue: !disabled ? onClickWithValue : void 0,
       ref,
       children: [
-        icon && /* @__PURE__ */ jsx21(Icon_default, { name: icon, color: !isActive ? theme2.colors.textSecondary : void 0 }),
+        icon && /* @__PURE__ */ jsx21(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
         /* @__PURE__ */ jsxs17(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-          /* @__PURE__ */ jsx21(Text_default, { fontWeight: isActive ? 700 : void 0, children: text }),
+          /* @__PURE__ */ jsx21(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
           description && /* @__PURE__ */ jsx21(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
       ]