@pushwoosh/dumb-components 1.1.44 → 1.1.45

package/StatisticCard/StatisticCard.js

@@ -1,9 +1,12 @@
 import React, { useMemo } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { formatNumber, Horizontal } from '@pushwoosh/kit-helpers';
+import { KebabIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { Spinner } from '../Spinner';
 import { Container, RightSlotContainer, StatValue, Title } from './styles';
+import { Button } from '../Button';
+import { DropdownMenu, DropdownMenuItem, DropdownMenuSection } from '../DropdownMenu';
 export function StatisticCard(props) {
   const {
     title,
@@ -13,6 +16,7 @@ export function StatisticCard(props) {
     active,
     selectable,
     rightSlot,
+    actions,
     width,
     isLoading,
     onClick,
@@ -35,15 +39,41 @@ export function StatisticCard(props) {
     }
     return React.createElement(StatValue, null, typeof value === 'number' ? formatNumber(value, 'spaced') : value);
   }, [isLoading, value, valueSubtext]);
+  const resolvedRightSlot = rightSlot ?? (actions ? React.createElement(DropdownMenu, {
+    renderHandler: ({
+      onClick,
+      ref,
+      isOpen
+    }) => React.createElement(Button, {
+      color: "secondary",
+      view: "ghost",
+      icon: React.createElement(KebabIcon, {
+        size: "small"
+      }),
+      onClick: onClick,
+      boxRef: ref,
+      isOpen: isOpen,
+      style: {
+        width: '28px',
+        height: '28px'
+      }
+    })
+  }, React.createElement(DropdownMenuSection, null, actions.map(a => React.createElement(DropdownMenuItem, {
+    key: a.id,
+    onClick: a.onClick,
+    disabled: a.disabled
+  }, a.label)))) : null);
   return React.createElement(Container, {
     "$active": active,
     "$selectable": selectable,
     "$width": width,
     onClick: onClick,
     ...rest
-  }, React.createElement(Title, null, title), rightSlot && React.createElement(RightSlotContainer, {
+  }, React.createElement(Title, {
+    "$hasRightSlot": !!resolvedRightSlot
+  }, title), resolvedRightSlot && React.createElement(RightSlotContainer, {
     onClick: e => e.stopPropagation()
-  }, rightSlot), statisticValue, footer && React.createElement(Text, {
+  }, resolvedRightSlot), statisticValue, footer && React.createElement(Text, {
     "$variant": "footnote",
     "$color": Color.LOCKED
   }, footer));

package/StatisticCard/styles.d.ts

@@ -4,6 +4,8 @@ export declare const Container: import("styled-components").StyledComponent<"div
     $selectable?: boolean;
     $width?: string;
 }, never>;
-export declare const Title: import("styled-components").StyledComponent<typeof H5, any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<typeof H5, any, {
+    $hasRightSlot?: boolean;
+}, never>;
 export declare const StatValue: import("styled-components").StyledComponent<typeof H2, any, {}, never>;
 export declare const RightSlotContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/StatisticCard/styles.js

@@ -22,7 +22,9 @@ export const Container = styled.div.withConfig({
 export const Title = styled(H5).withConfig({
   displayName: "Title",
   componentId: "sc-12f82mq-1"
-})(["text-transform:uppercase;color:", ";text-overflow:ellipsis;"], Color.MAIN);
+})(["text-transform:uppercase;color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:", ";"], Color.MAIN, ({
+  $hasRightSlot
+}) => $hasRightSlot ? 'calc(100% - 20px)' : '100%');
 export const StatValue = styled(H2).withConfig({
   displayName: "StatValue",
   componentId: "sc-12f82mq-2"
@@ -30,4 +32,4 @@ export const StatValue = styled(H2).withConfig({
 export const RightSlotContainer = styled.div.withConfig({
   displayName: "RightSlotContainer",
   componentId: "sc-12f82mq-3"
-})(["position:absolute;right:", ";top:", ";"], Spacing.S5, Spacing.S4);
+})(["position:absolute;right:8px;top:8px;"]);

package/StatisticCard/types.d.ts

@@ -1,10 +1,17 @@
 import { type ReactNode } from 'react';
 export type StatisticCardProps = CommonProps & (SelectableProps | NonSelectableProps);
+type StatisticCardAction = {
+    id: string;
+    label: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+};
 export type CommonProps = {
     title: ReactNode;
     value: number | string;
     valueSubtext?: string;
     rightSlot?: ReactNode;
+    actions?: StatisticCardAction[];
     footer?: string;
     isLoading?: boolean;
     width?: string;
@@ -19,3 +26,4 @@ export type NonSelectableProps = {
     onClick?: never;
     active?: never;
 };
+export {};

package/package.json

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