@pushwoosh/dumb-components 1.1.21 → 1.1.23

package/Checkbox/Checkbox.js

@@ -1,9 +1,8 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
-import { HelpRoundIcon } from '@pushwoosh/kit-icons';
-import { NativeLabel, NativeCheckbox, IconWrapper } from './styles';
-import { Tooltip } from '../Tooltip';
+import { NativeLabel, NativeCheckbox } from './styles';
+import { HelpTooltip } from '../Tooltip';
 let counter = 0;
 export function Checkbox(props) {
   const {
@@ -53,14 +52,10 @@ export function Checkbox(props) {
     return React.createElement(Horizontal, {
       "$gap": 4,
       "$alignItems": "start"
-    }, checkboxMarkup, React.createElement(Tooltip, {
-      content: tooltip
-    }, React.createElement(IconWrapper, {
-      "$padding": "4px 0"
-    }, React.createElement(HelpRoundIcon, {
-      size: "small",
-      view: "lined"
-    }))));
+    }, checkboxMarkup, React.createElement(HelpTooltip, {
+      content: tooltip,
+      "$iconPadding": "4px 0"
+    }));
   }
   return checkboxMarkup;
 }

package/Checkbox/styles.d.ts

@@ -8,59 +8,3 @@ export declare const NativeCheckbox: import("styled-components").StyledComponent
 export declare const NativeLabel: import("styled-components").StyledComponent<"label", any, {
     $color: string;
 }, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-}, "$gridAutoFlow">;

package/Checkbox/styles.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { Color, FontSize, LineHeight } from '@pushwoosh/kit-constants';
-import { Horizontal } from '@pushwoosh/kit-helpers';
 import { ColorByType } from './maps';
 export const NativeCheckbox = styled.input.attrs({
   type: 'checkbox'
@@ -36,8 +35,4 @@ export const NativeLabel = styled.label.withConfig({
   componentId: "sc-1lw3rny-1"
 })(["font-size:", ";line-height:", ";", " user-select:none;display:flex;gap:8px;align-items:start;&:has(input:not(:disabled)){cursor:pointer;}&:has(input:disabled){cursor:not-allowed;}& > span{padding:2px 0;}span{max-width:800px;white-space:normal;overflow-wrap:break-word;}& > ", "{margin:1px;}"], FontSize.REGULAR, LineHeight.REGULAR, ({
   $color
-}) => `color: ${$color};`, NativeCheckbox);
-export const IconWrapper = styled(Horizontal).withConfig({
-  displayName: "IconWrapper",
-  componentId: "sc-1lw3rny-2"
-})(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);
+}) => `color: ${$color};`, NativeCheckbox);

package/Radio/Radio.js

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
-import { HelpRoundIcon } from '@pushwoosh/kit-icons';
-import { IconWrapper, InputContainer, NativeLabel, NativeRadio } from './styles';
-import { Tooltip } from '../Tooltip';
+import { InputContainer, NativeLabel, NativeRadio } from './styles';
+import { HelpTooltip } from '../Tooltip';
 let counter = 0;
 export function Radio(props) {
   const {
@@ -50,14 +49,11 @@ export function Radio(props) {
     return React.createElement(Horizontal, {
       "$gap": 4,
       "$alignItems": "start"
-    }, radioMarkup, React.createElement(Tooltip, {
-      content: tooltip
-    }, React.createElement(IconWrapper, {
-      "$padding": size === 'compact' ? 0 : '4px 0'
-    }, React.createElement(HelpRoundIcon, {
-      size: "small",
-      view: "lined"
-    }))));
+    }, radioMarkup, React.createElement(HelpTooltip, {
+      content: tooltip,
+      "$iconPadding": size === 'compact' ? '0' : '4px 0',
+      position: "top-middle"
+    }));
   }
   return radioMarkup;
 }

package/Radio/styles.d.ts

@@ -65,59 +65,3 @@ export declare const NativeLabel: import("styled-components").StyledComponent<"l
     $color: string;
     $size: RadioSize;
 }, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-}, "$gridAutoFlow">;

package/Radio/styles.js

@@ -53,8 +53,4 @@ export const NativeLabel = styled.label.withConfig({
   $size
 }) => $size === 'compact' ? '6px' : '8px', ({
   $size
-}) => $size === 'compact' ? '0px' : '2px 0');
-export const IconWrapper = styled(Horizontal).withConfig({
-  displayName: "IconWrapper",
-  componentId: "sc-34lgtl-3"
-})(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);
+}) => $size === 'compact' ? '0px' : '2px 0');

package/Tooltip/HelpTooltip.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from 'react';
+import type { TooltipProps } from './types';
+export type HelpTooltipProps = TooltipProps & {
+    $iconPadding?: string;
+};
+export declare function HelpTooltip({ $iconPadding, ...tooltipProps }: HelpTooltipProps): ReactElement;

package/Tooltip/HelpTooltip.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { HelpRoundIcon } from '@pushwoosh/kit-icons';
+import { HelpIconWrapper } from './styles';
+import { Tooltip } from './Tooltip';
+export function HelpTooltip({
+  $iconPadding = '0',
+  ...tooltipProps
+}) {
+  return React.createElement(Tooltip, {
+    ...tooltipProps
+  }, React.createElement(HelpIconWrapper, {
+    "$padding": $iconPadding
+  }, React.createElement(HelpRoundIcon, {
+    size: "small",
+    view: "lined"
+  })));
+}

package/Tooltip/index.d.ts

@@ -1,2 +1,3 @@
 export { Tooltip } from './Tooltip';
+export { HelpTooltip } from './HelpTooltip';
 export type { TooltipPosition } from './types';

package/Tooltip/index.js

@@ -1 +1,2 @@
-export { Tooltip } from './Tooltip';
+export { Tooltip } from './Tooltip';
+export { HelpTooltip } from './HelpTooltip';

package/Tooltip/styles.d.ts

@@ -3,3 +3,59 @@ export declare const TooltipBox: import("styled-components").StyledComponent<imp
     $arrowOffset: string;
     $position: TooltipPosition;
 }, never>;
+export declare const HelpIconWrapper: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;

package/Tooltip/styles.js

@@ -1,6 +1,7 @@
 import Tippy from '@tippyjs/react';
 import styled from 'styled-components';
 import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
 import { getBottomPosition, getLeftPosition, getRightPosition, getTopPosition, getTransform } from './maps';
 export const TooltipBox = styled(Tippy).withConfig({
   displayName: "TooltipBox",
@@ -19,4 +20,8 @@ export const TooltipBox = styled(Tippy).withConfig({
   $arrowOffset
 }) => getLeftPosition($position, $arrowOffset), Color.MAIN, ({
   $position
-}) => getTransform($position), Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR);
+}) => getTransform($position), Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR);
+export const HelpIconWrapper = styled(Horizontal).withConfig({
+  displayName: "HelpIconWrapper",
+  componentId: "sc-1hariht-1"
+})(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);

package/index.d.ts

@@ -20,7 +20,7 @@ export { SortButton, type SortButtonParams } from './SortButton';
 export { Select, SelectAsync, CreatableSelect, CLASS_NAME_PREFIX, type SelectBase, type MultiSelectOptions, } from './Select';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
-export { Tooltip, type TooltipPosition } from './Tooltip';
+export { Tooltip, type TooltipPosition, HelpTooltip } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';

package/index.js

@@ -20,7 +20,7 @@ export { SortButton } from './SortButton';
 export { Select, SelectAsync, CreatableSelect, CLASS_NAME_PREFIX } from './Select';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
-export { Tooltip } from './Tooltip';
+export { Tooltip, HelpTooltip } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs } from './Tabs';
 export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",