react-better-html 1.1.196 → 1.1.198

package/dist/index.d.mts

@@ -704,8 +704,8 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
 
 type FilterPreset = "today" | "yesterday" | "tomorrow" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
 type ListFilterValue = {
+    value: number | string | boolean;
     label?: string;
-    value: number | string;
     count: number;
 };
 type TableFilterData = {
@@ -829,9 +829,11 @@ type TooltipProps = {
     content: React.ReactNode;
     contentWidth?: React.CSSProperties["width"];
     contentMinWidth?: React.CSSProperties["minWidth"];
+    contentPointerEvents?: React.CSSProperties["pointerEvents"];
     /** @default "fit-content" */
     childrenWrapperWidth?: React.CSSProperties["width"];
     childrenWrapperHeight?: React.CSSProperties["height"];
+    disabled?: boolean;
     withArrow?: boolean;
     isSmall?: boolean;
     backgroundColor?: string;
@@ -967,6 +969,7 @@ type SideMenuProps = {
     widthMobileHandle?: boolean;
     absoluteComponent?: React.ReactNode;
     additionalComponent?: React.ReactNode;
+    isLoading?: boolean;
     /** @default backgroundContent */
     backgroundColor?: React.CSSProperties["backgroundColor"];
     paddingTop?: React.CSSProperties["paddingTop"];

package/dist/index.d.ts

@@ -704,8 +704,8 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
 
 type FilterPreset = "today" | "yesterday" | "tomorrow" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
 type ListFilterValue = {
+    value: number | string | boolean;
     label?: string;
-    value: number | string;
     count: number;
 };
 type TableFilterData = {
@@ -829,9 +829,11 @@ type TooltipProps = {
     content: React.ReactNode;
     contentWidth?: React.CSSProperties["width"];
     contentMinWidth?: React.CSSProperties["minWidth"];
+    contentPointerEvents?: React.CSSProperties["pointerEvents"];
     /** @default "fit-content" */
     childrenWrapperWidth?: React.CSSProperties["width"];
     childrenWrapperHeight?: React.CSSProperties["height"];
+    disabled?: boolean;
     withArrow?: boolean;
     isSmall?: boolean;
     backgroundColor?: string;
@@ -967,6 +969,7 @@ type SideMenuProps = {
     widthMobileHandle?: boolean;
     absoluteComponent?: React.ReactNode;
     additionalComponent?: React.ReactNode;
+    isLoading?: boolean;
     /** @default backgroundContent */
     backgroundColor?: React.CSSProperties["backgroundColor"];
     paddingTop?: React.CSSProperties["paddingTop"];

package/dist/index.js

@@ -5924,7 +5924,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
               filter: isFocused2 ? isDisabled ? "brightness(0.95)" : "brightness(0.9)" : void 0,
               filterHover: focusedOptionIndex === void 0 && !isDisabled ? "brightness(0.9)" : void 0,
               cursor: isDisabled ? "not-allowed" : "pointer",
-              padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+              padding: `${theme2.styles.gap}px ${theme2.styles.space}px`,
               value: option,
               onClickWithValue: onClickOption,
               onMouseMove: () => setFocusedOptionIndex(void 0),
@@ -6840,6 +6840,13 @@ InputFieldComponent.phoneNumber = (0, import_react20.forwardRef)(function PhoneN
     ] }),
     []
   );
+  const onChangeDropdown = (0, import_react20.useCallback)(
+    (value2) => {
+      setDropdownValue(value2);
+      onChangeValue?.(value2 ? `+${value2}${inputFieldValue}` : inputFieldValue);
+    },
+    [onChangeValue, inputFieldValue]
+  );
   const onChangeValueElement = (0, import_react20.useCallback)(
     (value2) => {
       const readyValue = value2.replace(/\D/g, "");
@@ -6904,7 +6911,7 @@ InputFieldComponent.phoneNumber = (0, import_react20.forwardRef)(function PhoneN
           defaultValue,
           value: dropdownValue,
           disabled: props.disabled,
-          onChange: setDropdownValue,
+          onChange: onChangeDropdown,
           withoutClearButton: true,
           withoutRenderingOptionsWhenClosed: true
         }
@@ -8694,7 +8701,7 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
                         )
                       ] })
                     },
-                    value.value
+                    value.value.toString()
                   );
                 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: "No values" }) })
               ] }),
@@ -8766,11 +8773,11 @@ var tooltipPositionStyle = (props) => ({
   }
 });
 var TooltipContainer = import_styled_components14.default.div.withConfig({
-  shouldForwardProp: (prop) => !["theme", "position", "align", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "position", "align", "pointerEvents", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
 })`
    position: absolute;
    opacity: ${(props) => props.isOpen ? 1 : 0};
-   pointer-events: ${(props) => props.isOpen ? "auto" : "none"};
+   pointer-events: ${(props) => props.isOpen ? props.pointerEvents : "none"};
    transition: ${(props) => props.theme.styles.transition};
    z-index: 1000;
 
@@ -8853,8 +8860,10 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
   content,
   contentWidth,
   contentMinWidth,
+  contentPointerEvents = "auto",
   childrenWrapperWidth = "fit-content",
   childrenWrapperHeight,
+  disabled,
   withArrow,
   isSmall,
   backgroundColor,
@@ -8876,6 +8885,7 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
   const openTooltip = (0, import_react27.useCallback)(() => {
+    if (disabled) return;
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
     setIsOpenLate(true);
@@ -8898,7 +8908,7 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
       }
     }, 1);
     onOpen?.();
-  }, [onOpen, outsideScreenGap, totalGap]);
+  }, [disabled, onOpen, outsideScreenGap, totalGap]);
   const closeTooltip = (0, import_react27.useCallback)(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
@@ -8974,6 +8984,7 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
             theme: theme2,
             position,
             align,
+            pointerEvents: contentPointerEvents,
             withArrow,
             arrowSize,
             gap,
@@ -9454,14 +9465,20 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const location = reactRouterDomPluginConfig.useLocation();
-  const { colorTheme, components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
+  const { colorTheme, components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const [isOpened, setIsOpened] = useBooleanState();
+  const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const onClickElement = (0, import_react30.useCallback)(() => {
     if (item.disabled) return;
-    if (item.onClickCloseSideMenu !== false) onClick?.();
-    item.onClick?.(item);
-  }, [onClick, item]);
-  const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
+    if (item.children) {
+      setSideMenuIsCollapsed.setFalse();
+      if (isCollapsed) setTimeout(setIsOpened.setTrue, 0.1 * 1e3);
+      else setIsOpened.toggle();
+    } else {
+      if (item.onClickCloseSideMenu !== false) onClick?.();
+      item.onClick?.(item);
+    }
+  }, [onClick, item, isCollapsed]);
   const isActive = item.href ? location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/" : false;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const iconSize = 16;
@@ -9471,46 +9488,57 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
   const lineHeight = 20;
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    Div_default.row,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    Tooltip_default,
     {
-      alignItems: "center",
-      gap: iconGap,
-      whiteSpace: "nowrap",
-      backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : readyBackgroundColor,
-      borderRadius: theme2.styles.borderRadius,
-      paddingBlock,
-      paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
-      paddingRight: theme2.styles.space,
-      filterHover: `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})`,
-      overflow: isCollapsed ? "hidden" : void 0,
-      cursor: item.disabled ? "not-allowed" : "pointer",
-      opacity: item.disabled ? 0.6 : void 0,
-      onClick: item.children ? setIsOpened.toggle : onClickElement,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          Text_default,
-          {
-            flex: 1,
-            lineHeight: `${lineHeight}px`,
-            color: isActive ? theme2.colors.primary : theme2.colors.textPrimary,
-            opacity: isCollapsed ? 0 : void 0,
-            transition: theme2.styles.transition,
-            children: item.text
-          }
-        ),
-        item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          Icon_default,
-          {
-            name: "chevronDown",
-            color: theme2.colors.textSecondary,
-            size: 14,
-            transform: isOpened ? "rotate(180deg)" : void 0,
-            transition: theme2.styles.transition
-          }
-        )
-      ]
+      content: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { whiteSpace: "nowrap", children: item.text }),
+      contentPointerEvents: "none",
+      withArrow: true,
+      childrenWrapperWidth: "100%",
+      disabled: !isCollapsed,
+      position: "right",
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        Div_default.row,
+        {
+          alignItems: "center",
+          gap: iconGap,
+          whiteSpace: "nowrap",
+          backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : readyBackgroundColor,
+          borderRadius: theme2.styles.borderRadius,
+          paddingBlock,
+          paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
+          paddingRight: theme2.styles.space,
+          filterHover: `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})`,
+          overflow: isCollapsed ? "hidden" : void 0,
+          cursor: item.disabled ? "not-allowed" : "pointer",
+          opacity: item.disabled ? 0.6 : void 0,
+          onClick: onClickElement,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              Text_default,
+              {
+                flex: 1,
+                lineHeight: `${lineHeight}px`,
+                color: isActive ? theme2.colors.primary : theme2.colors.textPrimary,
+                opacity: isCollapsed ? 0 : void 0,
+                transition: theme2.styles.transition,
+                children: item.text
+              }
+            ),
+            item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              Icon_default,
+              {
+                name: "chevronDown",
+                color: theme2.colors.textSecondary,
+                size: 14,
+                transform: isOpened ? "rotate(180deg)" : void 0,
+                transition: theme2.styles.transition
+              }
+            )
+          ]
+        }
+      )
     }
   );
   (0, import_react30.useEffect)(() => {
@@ -9599,6 +9627,7 @@ var SideMenuComponent = function SideMenu({
   widthMobileHandle,
   absoluteComponent,
   additionalComponent,
+  isLoading,
   backgroundColor,
   paddingTop
 }) {
@@ -9671,45 +9700,47 @@ var SideMenuComponent = function SideMenu({
             ) }),
             withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            Div_default.column,
-            {
-              width: "100%",
-              height: "100%",
-              overflowY: "auto",
-              paddingInline: theme2.styles.space,
-              paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                MenuItemComponent,
-                {
-                  item,
-                  backgroundColor: readyBackgroundColor,
-                  onClick: onClickXButton
-                },
-                item.text
-              )) })
-            }
-          ),
-          readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            Div_default.column,
-            {
-              borderTop: mediaQuery.size1000 ? `solid 1px ${theme2.colors.border}` : void 0,
-              gap: theme2.styles.gap / 2,
-              marginTop: "auto",
-              paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
-              paddingInline: theme2.styles.space,
-              paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
-              children: readyBottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                MenuItemComponent,
-                {
-                  item,
-                  backgroundColor: readyBackgroundColor,
-                  onClick: onClickXButton
-                },
-                item.text
-              ))
-            }
-          ),
+          !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              Div_default.column,
+              {
+                width: "100%",
+                height: "100%",
+                overflowY: !isCollapsed ? "auto" : void 0,
+                paddingInline: theme2.styles.space,
+                paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  MenuItemComponent,
+                  {
+                    item,
+                    backgroundColor: readyBackgroundColor,
+                    onClick: onClickXButton
+                  },
+                  item.text
+                )) })
+              }
+            ),
+            readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              Div_default.column,
+              {
+                borderTop: mediaQuery.size1000 ? `solid 1px ${theme2.colors.border}` : void 0,
+                gap: theme2.styles.gap / 2,
+                marginTop: "auto",
+                paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
+                paddingInline: theme2.styles.space,
+                paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
+                children: readyBottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  MenuItemComponent,
+                  {
+                    item,
+                    backgroundColor: readyBackgroundColor,
+                    onClick: onClickXButton
+                  },
+                  item.text
+                ))
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
           additionalComponent,
           isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Div_default,