@pushwoosh/dumb-components 2.4.0 → 2.5.0

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.4.0",
+  "version": "2.5.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",