@pushwoosh/dumb-components 1.1.205 → 1.1.207

package/Button/styles.js

@@ -40,7 +40,7 @@ const dangerShapeColors = createColors(colors.danger.shape);
 export const ButtonBoxDangerShapeCompact = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxDangerShapeCompact",
   componentId: "sc-qltvdl-6"
-})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */dangerShapeColors);
+})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, LineHeight.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */dangerShapeColors);
 export const ButtonBoxDangerShapeField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxDangerShapeField",
   componentId: "sc-qltvdl-7"
@@ -50,7 +50,7 @@ const primaryShapeColors = createColors(colors.primary.shape);
 export const ButtonBoxPrimaryShapeCompact = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxPrimaryShapeCompact",
   componentId: "sc-qltvdl-8"
-})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */primaryShapeColors);
+})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, LineHeight.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */primaryShapeColors);
 export const ButtonBoxPrimaryShapeField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxPrimaryShapeField",
   componentId: "sc-qltvdl-9"
@@ -80,7 +80,7 @@ const secondaryShapeColors = createColors(colors.secondary.shape);
 export const ButtonBoxSecondaryShapeCompact = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxSecondaryShapeCompact",
   componentId: "sc-qltvdl-14"
-})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
+})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, LineHeight.SMALL, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
 export const ButtonBoxSecondaryShapeField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxSecondaryShapeField",
   componentId: "sc-qltvdl-15"

package/FrequencyCapping/FrequencyCappingEdit.js

@@ -3,12 +3,12 @@ import { useCallback } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { OpenIcon } from '@pushwoosh/kit-icons';
-import { CountingMode } from './components/CountingMode';
+import { CountingModeControl } from './components/CountingMode/CountingModeControl';
 import { Description } from './components/Description';
 import { EditCappingSettings } from './components/Settings';
 import { getCappingOption } from './helpers/getCappingOption';
 import { getGlobalCappingLinkText } from './helpers/getGlobalCappingLinkText';
-import { CappingCountingMode, CappingTypes } from './types';
+import { CappingTypes } from './types';
 import { FieldBox } from '../FieldBox';
 import { Link } from '../Link';
 import { Select } from '../Select';
@@ -75,18 +75,6 @@ export function FrequencyCappingEdit({
       days
     });
   }, [capping, onChange]);
-  const onCountingModeChange = useCallback(countingMode => {
-    onChange({
-      ...capping,
-      countingMode
-    });
-  }, [capping, onChange]);
-  const onTimezoneChange = useCallback(timezone => {
-    onChange({
-      ...capping,
-      timezone
-    });
-  }, [capping, onChange]);
   return _jsx(Container, {
     "$padding": 16,
     "$bgColor": Color.SOFT_LIGHT,
@@ -126,12 +114,10 @@ export function FrequencyCappingEdit({
         messages: messages,
         days: days,
         onChange: onSettingsChange
-      }), cappingOption === CappingTypes.CUSTOM && !isDisabled && timezoneOptions !== undefined && _jsx(CountingMode, {
-        countingMode: capping.countingMode ?? CappingCountingMode.ROLLING,
-        timezone: capping.timezone ?? '',
+      }), cappingOption === CappingTypes.CUSTOM && !isDisabled && timezoneOptions !== undefined && _jsx(CountingModeControl, {
+        capping: capping,
         timezoneOptions: timezoneOptions,
-        onCountingModeChange: onCountingModeChange,
-        onTimezoneChange: onTimezoneChange
+        onChange: onChange
       })]
     })
   });

package/FrequencyCapping/FrequencyCappingInApps.js

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { OpenIcon } from '@pushwoosh/kit-icons';
+import { CountingModeControl } from './components/CountingMode/CountingModeControl';
 import { Description } from './components/Description';
 import { EditInAppCappingSettings } from './components/Settings';
 import { getCappingOption } from './helpers/getCappingOption';
@@ -29,7 +30,8 @@ export function FrequencyCappingInApps(props) {
     editGlobalClicked,
     applicationCode,
     isInJourney = false,
-    isDisabled = false
+    isDisabled = false,
+    timezoneOptions
   } = props;
   const lang = useLang();
   const cappingOptions = getCappingOptions(lang);
@@ -105,6 +107,10 @@ export function FrequencyCappingInApps(props) {
       }), cappingOption === CappingTypes.CUSTOM && !isDisabled && _jsx(EditInAppCappingSettings, {
         capping: capping,
         onChange: onSettingsChange
+      }), cappingOption === CappingTypes.CUSTOM && !isDisabled && timezoneOptions !== undefined && _jsx(CountingModeControl, {
+        capping: capping,
+        timezoneOptions: timezoneOptions,
+        onChange: onChange
       })]
     })
   });

package/FrequencyCapping/components/CountingMode/CountingModeControl.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement } from 'react';
+import type { SelectOption } from '../../../Select';
+import { CappingCountingMode } from '../../types';
+type WindowCapping = {
+    countingMode?: CappingCountingMode;
+    timezone?: string;
+};
+type CountingModeControlProps<T extends WindowCapping> = {
+    capping: T;
+    timezoneOptions: SelectOption[];
+    onChange: (newCappingState: T) => void;
+};
+/** Controlled {@link CountingMode} bound to a capping config with optional window fields. */
+export declare function CountingModeControl<T extends WindowCapping>(props: CountingModeControlProps<T>): ReactElement;
+export {};

package/FrequencyCapping/components/CountingMode/CountingModeControl.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { CappingCountingMode } from '../../types';
+import { CountingMode } from './index';
+/** Controlled {@link CountingMode} bound to a capping config with optional window fields. */
+export function CountingModeControl(props) {
+  const {
+    capping,
+    timezoneOptions,
+    onChange
+  } = props;
+  const onCountingModeChange = useCallback(countingMode => {
+    onChange({
+      ...capping,
+      countingMode
+    });
+  }, [capping, onChange]);
+  const onTimezoneChange = useCallback(timezone => {
+    onChange({
+      ...capping,
+      timezone
+    });
+  }, [capping, onChange]);
+  return _jsx(CountingMode, {
+    countingMode: capping.countingMode ?? CappingCountingMode.ROLLING,
+    timezone: capping.timezone ?? '',
+    timezoneOptions: timezoneOptions,
+    onCountingModeChange: onCountingModeChange,
+    onTimezoneChange: onTimezoneChange
+  });
+}

package/FrequencyCapping/types.d.ts

@@ -46,6 +46,10 @@ export type CappingInAppBase = {
     enabled: boolean;
     /** Ignore the account-wide global cap. */
     ignoreGlobalCapping: boolean;
+    /** Anchoring of the perDays/leastDays windows; missing means {@link CappingCountingMode.ROLLING}, the lifetime total ignores it. */
+    countingMode?: CappingCountingMode;
+    /** IANA timezone midnight is calculated in, for {@link CappingCountingMode.CALENDAR_DAY}; empty means UTC. */
+    timezone?: string;
     /** Lifetime total limit. */
     total?: {
         count: number;
@@ -120,4 +124,6 @@ export type FrequencyCappingInAppsProps = {
     isInJourney?: boolean;
     /** Disable editing. */
     isDisabled?: boolean;
+    /** IANA timezones for the calendar-day mode; supplying them enables the counting-mode selector. */
+    timezoneOptions?: SelectOption[];
 };

package/SplitButton/SplitButton.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import { type SplitButtonProps } from './types';
+/** Main action button joined with a chevron half that opens a {@link DropdownMenu} of secondary actions;
+ * the menu defaults to `bottom-end`, so it opens leftwards from the chevron. */
+export declare const SplitButton: FC<SplitButtonProps>;

package/SplitButton/SplitButton.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+import { SplitButtonAction, SplitButtonBox, SplitButtonMenuHandler } from './styles';
+import { DropdownMenu } from '../DropdownMenu';
+/** Main action button joined with a chevron half that opens a {@link DropdownMenu} of secondary actions;
+ * the menu defaults to `bottom-end`, so it opens leftwards from the chevron. */
+export const SplitButton = ({
+  label,
+  color,
+  size = 'field',
+  icon,
+  className,
+  isDisabled,
+  isMenuDisabled,
+  isLoading,
+  menuAriaLabel = 'More actions',
+  onClick,
+  isScrollable,
+  openOnMount,
+  menuZIndex,
+  menuPlacement = 'bottom-end',
+  onClose,
+  children
+}) => {
+  return _jsxs(SplitButtonBox, {
+    className: className,
+    "$color": color,
+    "$size": size,
+    children: [_jsx(SplitButtonAction, {
+      color: color,
+      size: size,
+      icon: icon,
+      isDisabled: isDisabled,
+      isLoading: isLoading,
+      onClick: onClick,
+      children: label
+    }), _jsx(DropdownMenu, {
+      isScrollable: isScrollable,
+      openOnMount: openOnMount,
+      menuZIndex: menuZIndex,
+      menuPlacement: menuPlacement,
+      onClose: onClose,
+      renderHandler: ({
+        ref,
+        onClick: onToggle,
+        isOpen
+      }) => _jsx(SplitButtonMenuHandler, {
+        color: color,
+        size: size,
+        "aria-label": menuAriaLabel,
+        icon: _jsx(ChevronIcon, {
+          direction: isOpen ? 'up' : 'down',
+          size: "small"
+        }),
+        isDisabled: isDisabled || isMenuDisabled,
+        isOpen: isOpen,
+        boxRef: ref,
+        onClick: onToggle
+      }),
+      children: children
+    })]
+  });
+};

package/SplitButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SplitButton } from './SplitButton';
+export type { SplitButtonProps } from './types';

package/SplitButton/index.js

@@ -0,0 +1 @@
+export { SplitButton } from './SplitButton';

package/SplitButton/styles.d.ts

@@ -0,0 +1,7 @@
+import { Button } from '../Button';
+export declare const SplitButtonBox: import("styled-components").StyledComponent<"div", any, {
+    $color: "primary" | "secondary";
+    $size: "field" | "compact";
+}, never>;
+export declare const SplitButtonAction: typeof Button;
+export declare const SplitButtonMenuHandler: typeof Button;

package/SplitButton/styles.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Button } from '../Button';
+const dividerColorByColor = {
+  primary: Color.CLEAR,
+  secondary: Color.FORM
+};
+const menuHandlerPaddingBySize = {
+  field: 'calc(6px - 1px)',
+  compact: '2px'
+};
+export const SplitButtonBox = styled.div.withConfig({
+  displayName: "SplitButtonBox",
+  componentId: "sc-19s68pa-0"
+})(["display:inline-flex;align-items:stretch;--split-button-divider-color:", ";--split-button-menu-padding:", ";"], ({
+  $color
+}) => dividerColorByColor[$color], ({
+  $size
+}) => menuHandlerPaddingBySize[$size]);
+export const SplitButtonAction = styled(Button).withConfig({
+  displayName: "SplitButtonAction",
+  componentId: "sc-19s68pa-1"
+})(["&,&:hover:not([disabled]),&:active:not([disabled]),&:disabled{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0;}"]);
+export const SplitButtonMenuHandler = styled(Button).withConfig({
+  displayName: "SplitButtonMenuHandler",
+  componentId: "sc-19s68pa-2"
+})(["&,&:hover:not([disabled]),&:active:not([disabled]),&:disabled{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:var(--split-button-divider-color);padding:0 var(--split-button-menu-padding);}"]);
+SplitButtonBox.displayName = 'SplitButtonBox';

package/SplitButton/types.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+import { type RequiredButtonProps } from '../Button';
+import { type DropdownMenuProps } from '../DropdownMenu/components/DropdownMenu/types';
+/** Props of {@link SplitButton} — a main action button joined with a chevron that opens a {@link DropdownMenu}. */
+export type SplitButtonProps = Pick<DropdownMenuProps, 'isScrollable' | 'openOnMount' | 'menuZIndex' | 'menuPlacement' | 'onClose' | 'children'> & {
+    /** Label of the main action button. */
+    label?: ReactNode;
+    /** Visual intent of both halves: `primary` or `secondary`. */
+    color: 'primary' | 'secondary';
+    /** Height preset of both halves. */
+    size?: RequiredButtonProps['size'];
+    /** Icon before the label; use kit-icons `size="medium"` for `field` and `size="small"` for `compact`. */
+    icon?: RequiredButtonProps['icon'];
+    /** Extra CSS class applied to the group element. */
+    className?: string;
+    /** Disable both halves. */
+    isDisabled?: boolean;
+    /** Disable only the chevron half. */
+    isMenuDisabled?: boolean;
+    /** Show the loading state on the main action button. */
+    isLoading?: boolean;
+    /** Accessible label of the chevron half. */
+    menuAriaLabel?: string;
+    /** Fires when the main action button is clicked. */
+    onClick: () => void;
+};

package/SplitButton/types.js

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

package/index.d.ts

@@ -21,6 +21,7 @@ export { RadioCard } from './RadioCard';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton, type SortButtonParams } from './SortButton';
+export { SplitButton, type SplitButtonProps } from './SplitButton';
 export { Select, SelectAsync, SelectComponents, CLASS_NAME_PREFIX, type SelectBase, type SelectOption, type MultiSelectOptions, type SingleValue, type MultiValue, } from './Select';
 export { Combobox, type ComboboxProps, type ComboboxChangeSource, type ComboboxChangeMeta, type FreeComboboxProps, type SelectComboboxProps, } from './Combobox';
 export { ComboboxMulti, type ComboboxMultiProps } from './ComboboxMulti';

package/index.js

@@ -21,6 +21,7 @@ export { RadioCard } from './RadioCard';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';
+export { SplitButton } from './SplitButton';
 export { Select, SelectAsync, SelectComponents, CLASS_NAME_PREFIX } from './Select';
 export { Combobox } from './Combobox';
 export { ComboboxMulti } from './ComboboxMulti';

package/package.json

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