@pushwoosh/dumb-components 2.5.0 → 2.6.0

package/Banner/Banner.js

@@ -80,7 +80,6 @@ export function Banner(props) {
         view: "filled"
       })
     }), _jsxs(BannerContent, {
-      "$hasTitleAndChildren": hasTitle && hasChildren,
       children: [hasTitle && _jsx(H4, {
         children: title
       }), hasChildren && _jsx("div", {

package/Banner/styles.d.ts

@@ -11,9 +11,7 @@ export declare const BannerBox: import("styled-components").StyledComponent<"div
     $isOpen?: boolean;
     $isLoading: boolean;
 }, never>;
-export declare const BannerContent: import("styled-components").StyledComponent<"div", any, {
-    $hasTitleAndChildren?: boolean;
-}, never>;
+export declare const BannerContent: import("styled-components").StyledComponent<"div", any, {}, 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> & {
     $isOpen?: boolean;

package/Banner/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ShapeRadius, FontWeight } from '@pushwoosh/kit-constants';
+import { FontSize, FontWeight, LineHeight, ShapeRadius } from '@pushwoosh/kit-constants';
 import { colors } from './colors';
 export const BannerSpinner = styled.div.withConfig({
   displayName: "BannerSpinner",
@@ -8,7 +8,7 @@ export const BannerSpinner = styled.div.withConfig({
 export const ActionButton = styled.button.withConfig({
   displayName: "ActionButton",
   componentId: "sc-9uu4ap-1"
-})(["appearance:none !important;border:none;background:initial;cursor:pointer;padding:6px;position:relative;font-weight:", ";white-space:nowrap;height:fit-content;> span{visibility:", ";}opacity:", ";"], FontWeight.BOLD, ({
+})(["appearance:none !important;border:none;background:initial;cursor:pointer;padding:6px;position:relative;font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;white-space:nowrap;height:fit-content;> span{visibility:", ";}opacity:", ";"], FontSize.SMALL, LineHeight.SMALL, FontWeight.BOLD, ({
   $isLoading
 }) => $isLoading ? 'hidden' : 'visible', ({
   $isPressed,
@@ -27,9 +27,7 @@ export const BannerBox = styled.div.withConfig({
 export const BannerContent = styled.div.withConfig({
   displayName: "BannerContent",
   componentId: "sc-9uu4ap-4"
-})(["flex-grow:1;padding:", ";color:", ";"], ({
-  $hasTitleAndChildren
-}) => $hasTitleAndChildren ? '16px' : '8px 16px', colors.error.shape.base.color);
+})(["flex-grow:1;padding:12px 16px;color:", ";"], colors.error.shape.base.color);
 export const IconContainer = styled.div.withConfig({
   displayName: "IconContainer",
   componentId: "sc-9uu4ap-5"

package/Chip/Chip.d.ts

@@ -1,9 +1,11 @@
 /**
  * Compact tag/filter pill with color variants, an optional leading icon, a close
  * button or a help tooltip, and ellipsis truncation via `$maxWidth`.
+ * With `onClick` and no `$onClose` it renders as a toggle `<button aria-pressed>`.
  *
  * @example
  * <Chip $variant="primary" $onClose={() => remove(tag)}>{tag}</Chip>
+ * <Chip $selected={active} onClick={toggle}>{label}</Chip>
  */
 export declare const Chip: import("react").ForwardRefExoticComponent<{
     $variant?: import("./Chip.types").ChipVariant;
@@ -13,6 +15,7 @@ export declare const Chip: import("react").ForwardRefExoticComponent<{
     $maxWidth?: string;
     $icon?: import("react").ReactNode;
     $tooltip?: import("react").ReactNode;
+    disabled?: boolean;
     as?: string;
 } & {
     children?: import("react").ReactNode | undefined;

package/Chip/Chip.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { TooltipTrigger } from '../Tooltip';
-import { ChipCloseIcon, ChipLabel, ChipSlotIcon, ChipStyled } from './styles';
+import { useLang } from './polyglot';
+import { ChipCloseButton, ChipCloseIcon, ChipLabel, ChipSlotIcon, ChipStyled } from './styles';
 /**
  * Compact tag/filter pill with color variants, an optional leading icon, a close
  * button or a help tooltip, and ellipsis truncation via `$maxWidth`.
+ * With `onClick` and no `$onClose` it renders as a toggle `<button aria-pressed>`.
  *
  * @example
  * <Chip $variant="primary" $onClose={() => remove(tag)}>{tag}</Chip>
+ * <Chip $selected={active} onClick={toggle}>{label}</Chip>
  */
 export const Chip = forwardRef(({
   $variant = 'primary',
@@ -17,12 +20,21 @@ export const Chip = forwardRef(({
   $maxWidth,
   $icon,
   $tooltip,
+  disabled,
   children,
   as,
   ...rest
 }, ref) => {
+  const lang = useLang();
   const isCloseable = !!$onClose && !$readOnly;
   const hasTooltip = !isCloseable && $tooltip !== undefined;
+  const element = as ?? (rest.onClick && !$onClose && !$readOnly ? 'button' : undefined);
+  const isButton = element === 'button';
+  const buttonProps = isButton ? {
+    type: 'button',
+    'aria-pressed': !!$selected,
+    disabled
+  } : {};
   if ($readOnly && $onClose) {
     console.error('[Chip]: $onClose is ignored when $readOnly is true — read-only chips have no close button.');
   }
@@ -32,19 +44,30 @@ export const Chip = forwardRef(({
     "$selected": $selected,
     "$hasLeadingIcon": !!$icon,
     "$hasTrailingSlot": isCloseable || hasTooltip,
-    "$readOnly": $readOnly,
+    "$muted": $readOnly || isButton && disabled,
+    "$interactive": isButton && !disabled,
     "$maxWidth": $maxWidth,
-    as: as,
+    as: element,
+    ...buttonProps,
     ...rest,
     children: [$icon && _jsx(ChipSlotIcon, {
       children: $icon
     }), _jsx(ChipLabel, {
       "$truncated": $maxWidth !== undefined,
       children: children
-    }), isCloseable && _jsx(ChipCloseIcon, {
-      size: "small",
-      onClick: $onClose,
-      forwardedAs: "span"
+    }), isCloseable && _jsx(ChipCloseButton, {
+      type: "button",
+      "aria-label": lang({
+        message: 'DUMB.CHIP.REMOVE'
+      }),
+      onClick: event => {
+        event.stopPropagation();
+        $onClose(event);
+      },
+      children: _jsx(ChipCloseIcon, {
+        size: "small",
+        forwardedAs: "span"
+      })
     }), hasTooltip && _jsx(ChipSlotIcon, {
       children: _jsx(TooltipTrigger, {
         view: "question",

package/Chip/Chip.types.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type PropsWithChildren, type ReactNode } from 'react';
 /** Color variant of a {@link Chip}. */
 export type ChipVariant = 'primary' | 'danger' | 'warning';
-/** Props of {@link Chip} — all `<div>` attributes plus the chip-specific ones. */
+/** Props of {@link Chip} — all `<div>` attributes plus the chip-specific ones; `onClick` without `$onClose` makes it a toggle button. */
 export type ChipProps = PropsWithChildren<{
     /** Color variant (default `primary`). */
     $variant?: ChipVariant;
@@ -17,6 +17,8 @@ export type ChipProps = PropsWithChildren<{
     $icon?: ReactNode;
     /** Help tooltip shown via a trailing question-mark icon (only when not closeable). */
     $tooltip?: ReactNode;
-    /** Render as a different element/tag. */
+    /** Disables an interactive chip: passed to the `<button>`, muted like `$readOnly`. */
+    disabled?: boolean;
+    /** Render as a different element/tag; `button` gives the same result as the automatic interactive mode. */
     as?: string;
 }> & HTMLAttributes<HTMLDivElement>;

package/Chip/__tests__/Chip.test.d.ts

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

package/Chip/__tests__/Chip.test.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Chip } from '../Chip';
+describe('Chip', () => {
+  it('renders a passive chip as a div without a button role', () => {
+    const {
+      container
+    } = render(_jsx(Chip, {
+      children: "Tag"
+    }));
+    expect(container.firstChild?.nodeName).toBe('DIV');
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+  it('renders a chip with onClick as a toggle button reflecting $selected', () => {
+    const onClick = jest.fn();
+    const {
+      rerender
+    } = render(_jsx(Chip, {
+      onClick: onClick,
+      children: "All"
+    }));
+    const chip = screen.getByRole('button', {
+      name: 'All'
+    });
+    expect(chip).toHaveAttribute('type', 'button');
+    expect(chip).toHaveAttribute('aria-pressed', 'false');
+    fireEvent.click(chip);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    rerender(_jsx(Chip, {
+      onClick: onClick,
+      "$selected": true,
+      children: "All"
+    }));
+    expect(screen.getByRole('button', {
+      name: 'All'
+    })).toHaveAttribute('aria-pressed', 'true');
+  });
+  it('passes disabled to the button and blocks clicks', () => {
+    const onClick = jest.fn();
+    render(_jsx(Chip, {
+      onClick: onClick,
+      disabled: true,
+      children: "All"
+    }));
+    const chip = screen.getByRole('button', {
+      name: 'All'
+    });
+    expect(chip).toBeDisabled();
+    fireEvent.click(chip);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  it('keeps a closeable chip a div and exposes only the close button', () => {
+    const onClose = jest.fn();
+    const {
+      container
+    } = render(_jsx(Chip, {
+      onClick: () => {},
+      "$onClose": onClose,
+      children: "Tag"
+    }));
+    expect(container.firstChild?.nodeName).toBe('DIV');
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]).toHaveAccessibleName('Remove');
+    fireEvent.click(buttons[0]);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+  it('does not bubble a close click to the chip onClick', () => {
+    const onClick = jest.fn();
+    const onClose = jest.fn();
+    render(_jsx(Chip, {
+      onClick: onClick,
+      "$onClose": onClose,
+      children: "Tag"
+    }));
+    fireEvent.click(screen.getByRole('button', {
+      name: 'Remove'
+    }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  it('treats explicit as="button" like the automatic interactive mode', () => {
+    render(_jsx(Chip, {
+      as: "button",
+      children: "Tag"
+    }));
+    const chip = screen.getByRole('button', {
+      name: 'Tag'
+    });
+    expect(chip).toHaveAttribute('type', 'button');
+    expect(chip).toHaveAttribute('aria-pressed', 'false');
+  });
+  it('does not become a button when read-only', () => {
+    render(_jsx(Chip, {
+      onClick: () => {},
+      "$readOnly": true,
+      children: "Tag"
+    }));
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});

package/Chip/polyglot/index.d.ts

@@ -0,0 +1,3 @@
+export declare const useLang: () => (props: {
+    message: "DUMB.CHIP.REMOVE";
+} & import("../../polyglot").NoParams) => string;

package/Chip/polyglot/index.js

@@ -0,0 +1,33 @@
+import { messages as ar } from './messages_ar';
+import { messages as bn } from './messages_bn';
+import { messages as de } from './messages_de';
+import { messages as en } from './messages_en';
+import { messages as es } from './messages_es';
+import { messages as fr } from './messages_fr';
+import { messages as he } from './messages_he';
+import { messages as hi } from './messages_hi';
+import { messages as ja } from './messages_ja';
+import { messages as ko } from './messages_ko';
+import { messages as pt } from './messages_pt';
+import { messages as ru } from './messages_ru';
+import { messages as th } from './messages_th';
+import { messages as zh } from './messages_zh';
+import { createLang } from '../../polyglot';
+export const {
+  useLang
+} = createLang({
+  ar,
+  bn,
+  de,
+  en,
+  es,
+  fr,
+  he,
+  hi,
+  ja,
+  ko,
+  pt,
+  ru,
+  th,
+  zh
+});

package/Chip/polyglot/messages_ar.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_ar.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'إزالة'
+};

package/Chip/polyglot/messages_bn.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_bn.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'সরান'
+};

package/Chip/polyglot/messages_de.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_de.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'Entfernen'
+};

package/Chip/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_en.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'Remove'
+};

package/Chip/polyglot/messages_es.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_es.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'Eliminar'
+};

package/Chip/polyglot/messages_fr.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_fr.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'Supprimer'
+};

package/Chip/polyglot/messages_he.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_he.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'הסרה'
+};

package/Chip/polyglot/messages_hi.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_hi.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'हटाएँ'
+};

package/Chip/polyglot/messages_ja.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_ja.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': '削除'
+};

package/Chip/polyglot/messages_ko.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_ko.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': '제거'
+};

package/Chip/polyglot/messages_pt.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_pt.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'Remover'
+};

package/Chip/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_ru.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'Удалить'
+};

package/Chip/polyglot/messages_th.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_th.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': 'ลบ'
+};

package/Chip/polyglot/messages_zh.d.ts

@@ -0,0 +1,3 @@
+import { type ChipMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChipMessages>;

package/Chip/polyglot/messages_zh.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'DUMB.CHIP.REMOVE': '移除'
+};

package/Chip/polyglot/types.d.ts

@@ -0,0 +1,4 @@
+import type { NoParams } from '../../polyglot';
+export type ChipMessages = {
+    'DUMB.CHIP.REMOVE': NoParams;
+};

package/Chip/polyglot/types.js

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

package/Chip/styles.d.ts

@@ -4,11 +4,13 @@ export declare const ChipStyled: import("styled-components").StyledComponent<"di
     $selected?: boolean;
     $hasLeadingIcon?: boolean;
     $hasTrailingSlot?: boolean;
-    $readOnly?: boolean;
+    $muted?: boolean;
+    $interactive?: boolean;
     $maxWidth?: string;
 }, never>;
 export declare const ChipSlotIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ChipLabel: import("styled-components").StyledComponent<"span", any, {
     $truncated?: boolean;
 }, never>;
+export declare const ChipCloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const ChipCloseIcon: import("styled-components").StyledComponent<import("react").FC<import("@pushwoosh/kit-icons").CloseIconProps>, any, {}, never>;

package/Chip/styles.js

@@ -2,45 +2,51 @@ import styled from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
 import { CloseIcon } from '@pushwoosh/kit-icons';
 import { variants } from './Chip.constants';
+const focusRing = `
+  &:focus-visible {
+    outline: 1px solid ${Color.BRIGHT};
+    outline-offset: 2px;
+  }
+`;
 export const ChipStyled = styled.div.withConfig({
   displayName: "ChipStyled",
   componentId: "sc-e2g39l-0"
-})(["display:inline-flex;min-height:24px;", " padding:0 ", " 0 ", ";align-items:center;gap:4px;cursor:", ";border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;", ""], ({
+})(["appearance:none;margin:0;border:0;font:inherit;text-align:inherit;display:inline-flex;min-height:24px;", " padding:0 ", " 0 ", ";align-items:center;gap:4px;cursor:", ";border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;", " ", ""], ({
   $maxWidth
 }) => $maxWidth !== undefined && `max-width: ${$maxWidth};`, ({
   $hasTrailingSlot
 }) => $hasTrailingSlot ? '4px' : '8px', ({
   $hasLeadingIcon
 }) => $hasLeadingIcon ? '4px' : '8px', ({
-  $readOnly
-}) => $readOnly ? 'default' : 'pointer', ({
+  $interactive
+}) => $interactive ? 'pointer' : 'default', ({
   $variant,
   $selected,
-  $readOnly
+  $muted
 }) => {
-  if ($readOnly) {
+  if ($muted) {
     return Color.MAIN;
   }
   return $selected ? Color.CLEAR : variants[$variant].color;
 }, ({
   $variant,
   $selected,
-  $readOnly
+  $muted
 }) => {
-  if ($readOnly) {
+  if ($muted) {
     return Color.SOFT_LIGHT;
   }
   return $selected ? Color.MAIN : variants[$variant].background;
 }, ({
   $variant,
   $selected,
-  $readOnly
-}) => !$selected && !$readOnly && `
+  $muted
+}) => !$selected && !$muted && `
     &:hover {
       color: ${variants[$variant].hoverColor};
       background: ${variants[$variant].hoverBackground};
     }
-  `);
+  `, focusRing);
 export const ChipSlotIcon = styled.span.withConfig({
   displayName: "ChipSlotIcon",
   componentId: "sc-e2g39l-1"
@@ -57,7 +63,11 @@ export const ChipLabel = styled.span.withConfig({
     text-overflow: ellipsis;
     white-space: nowrap;
   `);
+export const ChipCloseButton = styled.button.withConfig({
+  displayName: "ChipCloseButton",
+  componentId: "sc-e2g39l-3"
+})(["appearance:none;display:inline-flex;flex-shrink:0;margin:0;padding:0;border:0;border-radius:2px;background:none;color:inherit;cursor:pointer;", ""], focusRing);
 export const ChipCloseIcon = styled(CloseIcon).withConfig({
   displayName: "ChipCloseIcon",
-  componentId: "sc-e2g39l-3"
-})(["flex-shrink:0;transition:transform 0.2s;&:hover{transform:scale(1.3);}"]);
+  componentId: "sc-e2g39l-4"
+})(["transition:transform 0.2s;", ":hover &{transform:scale(1.3);}"], ChipCloseButton);

package/package.json

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