@pushwoosh/dumb-components 2.2.1 → 2.3.1

package/Tooltip/Tooltip.d.ts

@@ -2,11 +2,11 @@ import { type ReactElement } from 'react';
 import type { TooltipProps } from './types';
 /**
  * Wraps an element and shows a contextual tooltip on hover/focus, with configurable
- * position and width. Positioning is handled by floating-ui, so the tooltip flips to a
- * fallback placement when the requested one would overflow the viewport. Use
+ * position, width and color. Positioning is handled by floating-ui, so the tooltip
+ * flips to a fallback placement when the requested one would overflow the viewport. Use
  * {@link TooltipTrigger} for a standalone help icon.
  *
  * @example
  * <Tooltip content="Copy to clipboard" position="top-middle"><IconButton /></Tooltip>
  */
-export declare function Tooltip({ content, position, offset, arrowOffset, maxWidth, zIndex, isDisabled, isVisible, reference, children, }: TooltipProps): ReactElement;
+export declare function Tooltip({ content, color, position, offset, arrowOffset, maxWidth, zIndex, isDisabled, isVisible, reference, children, }: TooltipProps): ReactElement;

package/Tooltip/Tooltip.js

@@ -7,8 +7,8 @@ import { Arrow, TooltipBox } from './styles';
 import { useTooltipPosition } from './useTooltipPosition';
 /**
  * Wraps an element and shows a contextual tooltip on hover/focus, with configurable
- * position and width. Positioning is handled by floating-ui, so the tooltip flips to a
- * fallback placement when the requested one would overflow the viewport. Use
+ * position, width and color. Positioning is handled by floating-ui, so the tooltip
+ * flips to a fallback placement when the requested one would overflow the viewport. Use
  * {@link TooltipTrigger} for a standalone help icon.
  *
  * @example
@@ -16,6 +16,7 @@ import { useTooltipPosition } from './useTooltipPosition';
  */
 export function Tooltip({
   content,
+  color = 'main',
   position = 'top-start',
   offset,
   arrowOffset,
@@ -88,10 +89,12 @@ export function Tooltip({
         zIndex
       },
       "$maxWidth": maxWidth,
+      "$tooltipColor": color,
       "data-placement": placement,
       children: [content, _jsx(Arrow, {
         ref: arrowRef,
-        style: arrowStyles
+        style: arrowStyles,
+        "$tooltipColor": color
       })]
     }), document.body)]
   });

package/Tooltip/index.d.ts

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

package/Tooltip/styles.d.ts

@@ -1,8 +1,12 @@
 import { Color } from '@pushwoosh/kit-constants';
+import type { TooltipColor } from './types';
 export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, {
     $maxWidth?: number | "none";
+    $tooltipColor?: TooltipColor;
+}, never>;
+export declare const Arrow: import("styled-components").StyledComponent<"div", any, {
+    $tooltipColor?: TooltipColor;
 }, never>;
-export declare const Arrow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HelpIconWrapper: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;

package/Tooltip/styles.js

@@ -1,17 +1,23 @@
-import styled from 'styled-components';
-import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
+import styled, { css } from 'styled-components';
+import { Color, FontSize, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { DEFAULT_MAX_WIDTH } from './constants';
+const clearBox = css(["padding:16px;color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";"], Color.MAIN, Color.CLEAR, Color.FORM, Shadow.LARGE);
 export const TooltipBox = styled.div.withConfig({
   displayName: "TooltipBox",
   componentId: "sc-1hariht-0"
-})(["padding:12px;color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;pointer-events:none;max-width:", ";"], Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR, ({
+})(["padding:12px;color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;pointer-events:none;max-width:", ";", ""], Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR, ({
   $maxWidth
-}) => $maxWidth === 'none' ? 'min(var(--pw-page-max-width, 100vw), calc(100vw - 16px))' : `min(${$maxWidth ?? DEFAULT_MAX_WIDTH}px, var(--pw-page-max-width, 100vw), calc(100vw - 16px))`);
+}) => $maxWidth === 'none' ? 'min(var(--pw-page-max-width, 100vw), calc(100vw - 16px))' : `min(${$maxWidth ?? DEFAULT_MAX_WIDTH}px, var(--pw-page-max-width, 100vw), calc(100vw - 16px))`, ({
+  $tooltipColor
+}) => $tooltipColor === 'clear' && clearBox);
+const clearArrowBorder = css(["[data-placement^='top'] &{border-right:1px solid ", ";border-bottom:1px solid ", ";}[data-placement^='bottom'] &{border-top:1px solid ", ";border-left:1px solid ", ";}[data-placement^='left'] &{border-top:1px solid ", ";border-right:1px solid ", ";}[data-placement^='right'] &{border-bottom:1px solid ", ";border-left:1px solid ", ";}"], Color.FORM, Color.FORM, Color.FORM, Color.FORM, Color.FORM, Color.FORM, Color.FORM, Color.FORM);
 export const Arrow = styled.div.withConfig({
   displayName: "Arrow",
   componentId: "sc-1hariht-1"
-})(["position:absolute;width:10px;height:10px;border-radius:2px;background-color:", ";transform:rotate(45deg);"], Color.MAIN);
+})(["position:absolute;width:10px;height:10px;border-radius:2px;background-color:", ";transform:rotate(45deg);", ""], Color.MAIN, ({
+  $tooltipColor
+}) => $tooltipColor === 'clear' && css(["background-color:", ";", ""], Color.CLEAR, clearArrowBorder));
 export const HelpIconWrapper = styled(Horizontal).withConfig({
   displayName: "HelpIconWrapper",
   componentId: "sc-1hariht-2"

package/Tooltip/types.d.ts

@@ -1,10 +1,14 @@
 import type { RefObject, ReactElement, ReactNode } from 'react';
 /** Placement of a {@link Tooltip} relative to its anchor (side + alignment). */
 export type TooltipPosition = 'top-start' | 'top-middle' | 'top-end' | 'right-start' | 'right-middle' | 'right-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end';
+/** Color of a {@link Tooltip}, named after the background token it uses. */
+export type TooltipColor = 'main' | 'clear';
 /** Props of {@link Tooltip}. */
 export type TooltipProps = {
     /** Tooltip content. */
     readonly content: ReactNode;
+    /** Background color (default `main`); `clear` is a card on the page background: 16px padding, border and large shadow. */
+    readonly color?: TooltipColor;
     /** Placement relative to the anchor (default `top-start`). */
     readonly position?: TooltipPosition;
     /** `[skidding, distance]` offset from the anchor; defaults per position. */

package/index.d.ts

@@ -28,7 +28,7 @@ export { Combobox, type ComboboxProps, type ComboboxChangeSource, type ComboboxC
 export { ComboboxMulti, type ComboboxMultiProps } from './ComboboxMulti';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
-export { Tooltip, type TooltipPosition, TooltipTrigger } from './Tooltip';
+export { Tooltip, type TooltipPosition, type TooltipColor, TooltipTrigger } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { Link, type LinkPropsWithoutAs, type LinkPropsWithAsTag, type LinkPropsWithAsComponent, } from './Link';
 export { StatisticCard } from './StatisticCard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -40,8 +40,8 @@
     "@codemirror/view": "^6.43.11",
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
-    "@pushwoosh/kit-constants": "^2.0.0",
-    "@pushwoosh/kit-helpers": "^4.12.5",
+    "@pushwoosh/kit-constants": "^2.1.0",
+    "@pushwoosh/kit-helpers": "^4.12.7",
     "@pushwoosh/kit-icons": "^2.3.3",
     "@pushwoosh/kit-typography": "^1.8.5",
     "@tippyjs/react": "^4.2.6",