@pushwoosh/dumb-components 1.1.206 → 1.1.208

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/DateTimePicker/components/Input/styles.js

@@ -3,4 +3,4 @@ import { Color } from '@pushwoosh/kit-constants';
 export const InputStyled = styled.input.withConfig({
   displayName: "InputStyled",
   componentId: "sc-17gtn04-0"
-})(["color:", ";-webkit-text-fill-color:", ";background-color:transparent;&::placeholder{color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}"], Color.MAIN, Color.MAIN, Color.PHANTOM, Color.FROZEN, Color.LOCKED);
+})(["color:", ";-webkit-text-fill-color:", ";background-color:transparent;&::placeholder{color:", ";-webkit-text-fill-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}"], Color.MAIN, Color.MAIN, Color.PHANTOM, Color.PHANTOM, Color.FROZEN, Color.LOCKED);

package/NumberPicker/styles.js

@@ -5,7 +5,7 @@ export const InputStyled = styled.input.attrs({
 }).withConfig({
   displayName: "InputStyled",
   componentId: "sc-vq8xnz-0"
-})(["width:100%;color:", ";-webkit-text-fill-color:", ";background-color:transparent;&::placeholder{color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}"], Color.MAIN, Color.MAIN, Color.PHANTOM, Color.FROZEN, Color.LOCKED);
+})(["width:100%;color:", ";-webkit-text-fill-color:", ";background-color:transparent;&::placeholder{color:", ";-webkit-text-fill-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}"], Color.MAIN, Color.MAIN, Color.PHANTOM, Color.PHANTOM, Color.FROZEN, Color.LOCKED);
 export const Hint = styled.div.withConfig({
   displayName: "Hint",
   componentId: "sc-vq8xnz-1"

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/native/Input.js

@@ -4,6 +4,6 @@ import { Color, FontSize, LineHeight, ShapeRadius, UnitSize } from '@pushwoosh/k
 export const NativeInput = styled.input.withConfig({
   displayName: "NativeInput",
   componentId: "sc-oqkcxd-0"
-})(["height:", ";padding:0 calc(12px - 1px);border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";color:", ";-webkit-text-fill-color:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}&::placeholder{color:", ";}"], UnitSize.FIELD_HEIGHT, ({
+})(["height:", ";padding:0 calc(12px - 1px);border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";color:", ";-webkit-text-fill-color:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}&::placeholder{color:", ";-webkit-text-fill-color:", ";}"], UnitSize.FIELD_HEIGHT, ({
   $isErrored
-}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.MAIN, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.LOCKED, Color.PHANTOM);
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.MAIN, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.LOCKED, Color.PHANTOM, Color.PHANTOM);

package/native/Textarea.js

@@ -4,7 +4,7 @@ import { Color, FontSize, LineHeight, ShapeRadius } from '@pushwoosh/kit-constan
 export const NativeTextarea = styled.textarea.withConfig({
   displayName: "NativeTextarea",
   componentId: "sc-1xe83i4-0"
-})(["width:", ";min-width:", ";max-width:", ";min-height:56px;padding:8px 12px;border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";color:", ";-webkit-text-fill-color:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}&::placeholder{color:", ";}"], ({
+})(["width:", ";min-width:", ";max-width:", ";min-height:56px;padding:8px 12px;border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";color:", ";-webkit-text-fill-color:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}&::placeholder{color:", ";-webkit-text-fill-color:", ";}"], ({
   $width
 }) => $width || '100%', ({
   $width
@@ -12,4 +12,4 @@ export const NativeTextarea = styled.textarea.withConfig({
   $width
 }) => $width || '100%', ({
   $isErrored
-}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.MAIN, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.LOCKED, Color.PHANTOM);
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.MAIN, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.LOCKED, Color.PHANTOM, Color.PHANTOM);

package/package.json

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