@pushwoosh/dumb-components 2.3.1 → 2.5.0

package/Banner/Banner.d.ts

@@ -3,8 +3,11 @@ import type { BannerPropsWithButton, RequiredBannerProps } from './types';
 /**
  * Prominent page-level message with severity styling, an optional action button,
  * a loading state and a dismiss button. Hides itself once closed.
+ * Needs a non-empty `title`, body content (`children`), or both; with neither it renders nothing.
  *
  * @example
  * <Banner type="success" title="Saved" canBeClosed action={{ buttonText: 'Undo', onClick: undo }} />
+ * @example
+ * <Banner type="warning" view="ghost">Only a description, no title</Banner>
  */
 export declare function Banner(props: RequiredBannerProps | BannerPropsWithButton): ReactElement | null;

package/Banner/Banner.js

@@ -9,9 +9,12 @@ import { ActionButton, BannerContent, BannerSpinner, CloseButton, IconContainer
 /**
  * Prominent page-level message with severity styling, an optional action button,
  * a loading state and a dismiss button. Hides itself once closed.
+ * Needs a non-empty `title`, body content (`children`), or both; with neither it renders nothing.
  *
  * @example
  * <Banner type="success" title="Saved" canBeClosed action={{ buttonText: 'Undo', onClick: undo }} />
+ * @example
+ * <Banner type="warning" view="ghost">Only a description, no title</Banner>
  */
 export function Banner(props) {
   const [isOpen, setIsOpen] = useState(true);
@@ -48,6 +51,12 @@ export function Banner(props) {
     console.error(`[Banner]: required prop type "${type}" is not set`);
     return null;
   }
+  const hasTitle = title !== undefined && title !== '';
+  const hasChildren = children !== undefined && children !== null && typeof children !== 'boolean';
+  if (!hasTitle && !hasChildren) {
+    console.error('[Banner]: neither title nor children is set');
+    return null;
+  }
   const BannerBox = BannerPropsToBannerBoxMap[view];
   if (!BannerBox) {
     console.error(`[Banner]: cannot render with type "${type}" and view "${view}"`);
@@ -71,10 +80,10 @@ export function Banner(props) {
         view: "filled"
       })
     }), _jsxs(BannerContent, {
-      "$hasChildren": !!children,
-      children: [_jsx(H4, {
+      "$hasTitleAndChildren": hasTitle && hasChildren,
+      children: [hasTitle && _jsx(H4, {
         children: title
-      }), children && _jsx("div", {
+      }), hasChildren && _jsx("div", {
         children: children
       })]
     }), action && _jsx(Vertical, {

package/Banner/__tests__/Banner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Banner/__tests__/Banner.test.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { Banner } from '../Banner';
+describe('Banner', () => {
+  let consoleError;
+  beforeEach(() => {
+    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleError.mockRestore();
+  });
+  it('renders a title without children', () => {
+    render(_jsx(Banner, {
+      type: "info",
+      title: "Heading"
+    }));
+    expect(screen.getByText('Heading')).toBeInTheDocument();
+  });
+  it('renders children without a title', () => {
+    const {
+      container
+    } = render(_jsx(Banner, {
+      type: "info",
+      children: "Description"
+    }));
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(container.querySelector('h4')).toBeNull();
+  });
+  it('renders numeric zero children', () => {
+    render(_jsx(Banner, {
+      type: "info",
+      children: 0
+    }));
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+  it('skips an empty title but keeps the children', () => {
+    const {
+      container
+    } = render(_jsx(Banner, {
+      type: "info",
+      title: "",
+      children: "Description"
+    }));
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(container.querySelector('h4')).toBeNull();
+  });
+  it('renders nothing and reports when there is neither title nor children', () => {
+    const {
+      container
+    } = render(_jsx(Banner, {
+      type: "info",
+      title: ""
+    }));
+    expect(container).toBeEmptyDOMElement();
+    expect(consoleError).toHaveBeenCalledWith('[Banner]: neither title nor children is set');
+  });
+});

package/Banner/styles.d.ts

@@ -12,7 +12,7 @@ export declare const BannerBox: import("styled-components").StyledComponent<"div
     $isLoading: boolean;
 }, never>;
 export declare const BannerContent: import("styled-components").StyledComponent<"div", any, {
-    $hasChildren?: boolean;
+    $hasTitleAndChildren?: boolean;
 }, never>;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const BannerShape: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {

package/Banner/styles.js

@@ -28,8 +28,8 @@ export const BannerContent = styled.div.withConfig({
   displayName: "BannerContent",
   componentId: "sc-9uu4ap-4"
 })(["flex-grow:1;padding:", ";color:", ";"], ({
-  $hasChildren
-}) => $hasChildren ? '16px' : '8px 16px', colors.error.shape.base.color);
+  $hasTitleAndChildren
+}) => $hasTitleAndChildren ? '16px' : '8px 16px', colors.error.shape.base.color);
 export const IconContainer = styled.div.withConfig({
   displayName: "IconContainer",
   componentId: "sc-9uu4ap-5"

package/Banner/types.d.ts

@@ -1,14 +1,11 @@
 import type { ReactElement, ReactNode } from 'react';
 /** Severity of a {@link Banner}, driving its icon and colors. */
 export type BannerType = 'error' | 'warning' | 'info' | 'success';
-/** Base props of {@link Banner}. */
-export type RequiredBannerProps = {
+type BannerBaseProps = {
     /** Ref to the banner root element. */
     readonly boxRef?: any;
     /** Severity — sets the default icon and colors. */
     readonly type: BannerType;
-    /** Banner heading. */
-    readonly title: string;
     /** Surface style: `shape` (filled, default) or `ghost`. */
     readonly view?: 'shape' | 'ghost';
     /** Custom icon; falls back to the type's default icon. */
@@ -21,9 +18,20 @@ export type RequiredBannerProps = {
     readonly canBeClosed?: boolean;
     /** Fires when the close button is clicked. */
     readonly onClose?: () => void;
+};
+type BannerContentProps = {
+    /** Banner heading; an empty string counts as no title. */
+    readonly title: string;
     /** Body content under the title. */
     readonly children?: ReactNode;
+} | {
+    /** Banner heading; may be omitted when the body content is set. */
+    readonly title?: string;
+    /** Body content, shown alone when there is no title. */
+    readonly children: Exclude<ReactNode, null | undefined | boolean>;
 };
+/** Base props of {@link Banner}: a title, body content, or both. */
+export type RequiredBannerProps = BannerBaseProps & BannerContentProps;
 /** {@link Banner} props with an optional action button. */
 export type BannerPropsWithButton = RequiredBannerProps & {
     /** Action button shown on the right. */
@@ -34,3 +42,4 @@ export type BannerPropsWithButton = RequiredBannerProps & {
         readonly buttonText: string;
     };
 };
+export {};

package/Tabs/components/TabBar/TabBar.d.ts

@@ -1,6 +1,8 @@
 /**
- * Horizontal, scrollable row of {@link Tab}s with an optional title.
+ * Horizontal row of {@link Tab}s with an optional title. Scrolls when the tabs
+ * overflow, or stretches them to equal widths with `layout="stretch"`.
  */
 export declare const TabBar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Readonly<{
     title?: import("react").ReactNode;
+    layout?: import("./types").TabBarLayout;
 }> & import("react").RefAttributes<HTMLDivElement>>;

package/Tabs/components/TabBar/TabBar.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { H4 } from '@pushwoosh/kit-typography';
-import { TabBarTitleBox, TabBarContainer } from './styles';
+import { TabBarTitleBox, TabBarContainer, TabBarStretchedContent } from './styles';
 import { TabBarScrollableFrame } from '../TabBarScrollableFrame';
 /**
- * Horizontal, scrollable row of {@link Tab}s with an optional title.
+ * Horizontal row of {@link Tab}s with an optional title. Scrolls when the tabs
+ * overflow, or stretches them to equal widths with `layout="stretch"`.
  */
 export const TabBar = forwardRef((props, ref) => {
   const {
     children,
     title,
+    layout = 'scroll',
     ...rest
   } = props;
   return _jsxs(TabBarContainer, {
@@ -20,7 +22,9 @@ export const TabBar = forwardRef((props, ref) => {
       children: _jsx(H4, {
         children: title
       })
-    }), _jsx(TabBarScrollableFrame, {
+    }), layout === 'stretch' ? _jsx(TabBarStretchedContent, {
+      children: children
+    }) : _jsx(TabBarScrollableFrame, {
       children: children
     })]
   });

package/Tabs/components/TabBar/styles.d.ts

@@ -2,3 +2,4 @@ export declare const TabBarContainer: import("styled-components").StyledComponen
     hasTitle: boolean;
 }, never>;
 export declare const TabBarTitleBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabBarStretchedContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Tabs/components/TabBar/styles.js

@@ -9,4 +9,8 @@ export const TabBarContainer = styled.div.withConfig({
 export const TabBarTitleBox = styled.div.withConfig({
   displayName: "TabBarTitleBox",
   componentId: "sc-pu8yhh-1"
-})(["display:flex;align-items:center;position:relative;padding:0 12px 0 16px;"]);
+})(["display:flex;align-items:center;position:relative;padding:0 12px 0 16px;"]);
+export const TabBarStretchedContent = styled.div.withConfig({
+  displayName: "TabBarStretchedContent",
+  componentId: "sc-pu8yhh-2"
+})(["display:flex;align-items:center;gap:4px;width:100%;height:32px;& > *{flex:1 1 0;min-width:0;}"]);

package/Tabs/components/TabBar/types.d.ts

@@ -1,6 +1,18 @@
 import type { ReactNode } from 'react';
+/** How a {@link TabBar} lays out its tabs. */
+export type TabBarLayout = 
+/** Tabs take their content width; overflowing tabs scroll behind arrows. */
+'scroll'
+/**
+ * Tabs share the bar width equally. Meant for narrow panels (drawers, sidebars,
+ * cards around 350px wide), not for page-level tabs. Nothing scrolls in this
+ * layout, so keep it to 3, at most 4, tabs with short labels.
+ */
+ | 'stretch';
 /** Props of {@link TabBar} — all `<div>` attributes plus an optional title. */
 export type TabBarProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & Readonly<{
     /** Optional heading shown before the tabs. */
     title?: ReactNode;
+    /** Tab layout, `'scroll'` by default; see {@link TabBarLayout} for when to stretch. */
+    layout?: TabBarLayout;
 }>;

package/Tabs/components/TabBarScrollableFrame/TabBarScrollableFrame.js

@@ -15,6 +15,8 @@ export const TabBarScrollableFrame = forwardRef(({
   const [scrollLeft, setScrollLeft] = useState(0);
   const scrollable = contentWidth > frameWidth;
   const minLeft = frameWidth - contentWidth;
+  const canScrollLeft = scrollable && scrollLeft < 0;
+  const canScrollRight = scrollable && scrollLeft > minLeft;
   const onClick = useCallback(event => {
     const {
       currentTarget
@@ -49,20 +51,22 @@ export const TabBarScrollableFrame = forwardRef(({
     ...props,
     ref: ref,
     children: [_jsx(TabBarWindow, {
+      "$clipLeft": canScrollLeft,
+      "$clipRight": canScrollRight,
       ref: windowRef,
       children: _jsx(TabBarContent, {
         left: scrollLeft,
         ref: contentRef,
         children: children
       })
-    }), scrollable && scrollLeft < 0 && _jsx(TabBarArrowContainer, {
+    }), canScrollLeft && _jsx(TabBarArrowContainer, {
       "data-left": true,
       onClick: onClick,
       children: _jsx(ChevronIcon, {
         direction: "left",
         size: "small"
       })
-    }), scrollable && scrollLeft > minLeft && _jsx(TabBarArrowContainer, {
+    }), canScrollRight && _jsx(TabBarArrowContainer, {
       "$right": true,
       onClick: onClick,
       children: _jsx(ChevronIcon, {

package/Tabs/components/TabBarScrollableFrame/styles.d.ts

@@ -1,7 +1,10 @@
 export declare const TabBarArrowContainer: import("styled-components").StyledComponent<"div", any, {
     $right?: boolean;
 }, never>;
-export declare const TabBarWindow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabBarWindow: import("styled-components").StyledComponent<"div", any, {
+    $clipLeft: boolean;
+    $clipRight: boolean;
+}, never>;
 export declare const TabsListContentBase: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TabBarContent: import("styled-components").StyledComponent<"div", any, {
     left: number;

package/Tabs/components/TabBarScrollableFrame/styles.js

@@ -6,10 +6,15 @@ export const TabBarArrowContainer = styled.div.withConfig({
 })(["position:absolute;top:0;", ":0;display:flex;align-items:center;height:32px;cursor:pointer;color:", ";background-color:", ";box-shadow:", ";border-radius:", ";padding:8px 4px;&:hover{color:", ";}"], ({
   $right
 }) => $right ? 'right' : 'left', Color.MAIN, Color.CLEAR, Shadow.SMALL, ShapeRadius.CONTROL, Color.PRIMARY_HOVER);
+const SHADOW_BLEED = '-4px';
 export const TabBarWindow = styled.div.withConfig({
   displayName: "TabBarWindow",
   componentId: "sc-1sonok9-1"
-})(["position:relative;width:100%;height:32px;overflow:hidden;"]);
+})(["position:relative;width:100%;height:32px;clip-path:inset( ", " ", " ", " ", " );"], SHADOW_BLEED, ({
+  $clipRight
+}) => $clipRight ? 0 : SHADOW_BLEED, SHADOW_BLEED, ({
+  $clipLeft
+}) => $clipLeft ? 0 : SHADOW_BLEED);
 export const TabsListContentBase = styled.div.withConfig({
   displayName: "TabsListContentBase",
   componentId: "sc-1sonok9-2"

package/Tabs/index.d.ts

@@ -1,5 +1,6 @@
 export { Tab } from './components/Tab';
 export { TabBar } from './components/TabBar';
+export type { TabBarLayout } from './components/TabBar/types';
 export { TabPanel } from './components/TabPanel';
 export { Tabs } from './components/Tabs';
 export type { TabCode } from './types';

package/index.d.ts

@@ -29,7 +29,7 @@ export { ComboboxMulti, type ComboboxMultiProps } from './ComboboxMulti';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
 export { Tooltip, type TooltipPosition, type TooltipColor, TooltipTrigger } from './Tooltip';
-export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
+export { Tab, TabBar, TabPanel, Tabs, type TabCode, type TabBarLayout } from './Tabs';
 export { Link, type LinkPropsWithoutAs, type LinkPropsWithAsTag, type LinkPropsWithAsComponent, } from './Link';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview, replaceLocalization, replacePlaceholders, matchClickMapItems, decorateClickMap, CLICK_MAP_BADGE_ATTRIBUTE, type EmailClickMapItem, type EmailClickMapPlacement, type EmailClickMapProps, type PreviewIframeProps, } from './EmailTemplatePreview';

package/package.json

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