@pushwoosh/dumb-components 2.5.1 → 2.7.0

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/DropdownMenu/__tests__/DropdownMenuItem.test.d.ts

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

package/DropdownMenu/__tests__/DropdownMenuItem.test.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { DropdownMenuItem } from '../components/DropdownMenuItem';
+import { DropdownContext } from '../context';
+const renderInMenu = (ui, close = jest.fn()) => render(_jsx(DropdownContext.Provider, {
+  value: close,
+  children: ui
+}));
+describe('DropdownMenuItem', () => {
+  it('calls onClick and closes the menu', () => {
+    const onClick = jest.fn();
+    const close = jest.fn();
+    renderInMenu(_jsx(DropdownMenuItem, {
+      onClick: onClick,
+      children: "Preview"
+    }), close);
+    const item = screen.getByRole('button', {
+      name: 'Preview'
+    });
+    expect(item).toHaveAttribute('type', 'button');
+    fireEvent.click(item);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(close).toHaveBeenCalledWith(false);
+  });
+  it('keeps a disabled item without hint natively disabled', () => {
+    renderInMenu(_jsx(DropdownMenuItem, {
+      onClick: jest.fn(),
+      disabled: true,
+      children: "Preview"
+    }));
+    expect(screen.getByRole('button', {
+      name: 'Preview'
+    })).toBeDisabled();
+  });
+  it('makes a disabled item with hint focusable, described and inert', () => {
+    const onClick = jest.fn();
+    const close = jest.fn();
+    renderInMenu(_jsx(DropdownMenuItem, {
+      onClick: onClick,
+      disabled: true,
+      hint: "Save the template first",
+      children: "Test email"
+    }), close);
+    const item = screen.getByRole('button', {
+      name: 'Test email'
+    });
+    expect(item).not.toBeDisabled();
+    expect(item).toHaveAttribute('aria-disabled', 'true');
+    expect(item).toHaveAccessibleDescription('Save the template first');
+    fireEvent.click(item);
+    expect(onClick).not.toHaveBeenCalled();
+    expect(close).not.toHaveBeenCalled();
+  });
+  it('shows the hint tooltip on hover and focus', () => {
+    renderInMenu(_jsx(DropdownMenuItem, {
+      onClick: jest.fn(),
+      disabled: true,
+      hint: "Save first",
+      children: "Test email"
+    }));
+    const item = screen.getByRole('button', {
+      name: 'Test email'
+    });
+    fireEvent.mouseEnter(item);
+    expect(screen.getAllByText('Save first')).toHaveLength(2);
+    fireEvent.mouseLeave(item);
+    expect(screen.getAllByText('Save first')).toHaveLength(1);
+    fireEvent.focusIn(item);
+    expect(screen.getAllByText('Save first')).toHaveLength(2);
+  });
+  it('ignores hint while enabled', () => {
+    renderInMenu(_jsx(DropdownMenuItem, {
+      onClick: jest.fn(),
+      hint: "Save first",
+      children: "Test email"
+    }));
+    expect(screen.queryByText('Save first')).toBeNull();
+    expect(screen.getByRole('button', {
+      name: 'Test email'
+    })).not.toHaveAttribute('aria-describedby');
+  });
+  it('forwards ref to the item button, with and without hint', () => {
+    const ref = createRef();
+    const {
+      rerender
+    } = renderInMenu(_jsx(DropdownMenuItem, {
+      ref: ref,
+      onClick: jest.fn(),
+      children: "Preview"
+    }));
+    expect(ref.current).toBe(screen.getByRole('button', {
+      name: 'Preview'
+    }));
+    rerender(_jsx(DropdownContext.Provider, {
+      value: jest.fn(),
+      children: _jsx(DropdownMenuItem, {
+        ref: ref,
+        onClick: jest.fn(),
+        disabled: true,
+        hint: "Add content",
+        children: "Preview"
+      })
+    }));
+    expect(ref.current).toBe(screen.getByRole('button', {
+      name: 'Preview'
+    }));
+  });
+});

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -1,10 +1,19 @@
-import { type FC } from 'react';
-import { type DropdownMenuItemProps } from './types';
 /**
  * Clickable row inside a {@link DropdownMenu}, with active (checked), danger and
- * disabled states. Must be rendered inside a {@link DropdownMenu}.
+ * disabled states. A disabled item with `hint` stays focusable and explains itself in a tooltip.
+ * Must be rendered inside a {@link DropdownMenu}.
  *
  * @example
  * <DropdownMenuItem onClick={select} isActive={selected}>Option</DropdownMenuItem>
+ * <DropdownMenuItem onClick={sendTest} disabled={!isSaved} hint="Save the template first">Test email</DropdownMenuItem>
  */
-export declare const DropdownMenuItem: FC<DropdownMenuItemProps>;
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<{
+    onClick: () => void;
+    isActive?: boolean;
+    isDanger?: boolean;
+    disabled?: boolean;
+    hint?: import("react").ReactNode;
+    closeOnClick?: boolean;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js

@@ -1,39 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useContext, useId } from 'react';
 import { CheckIcon } from '@pushwoosh/kit-icons';
-import { DropdownMenuItemStyled, DropdownMenuIconStyled } from './styles';
+import { DropdownMenuItemStyled, DropdownMenuIconStyled, DropdownMenuItemHintStyled } from './styles';
+import { Tooltip } from '../../../Tooltip';
 import { DropdownContext } from '../../context';
 /**
  * Clickable row inside a {@link DropdownMenu}, with active (checked), danger and
- * disabled states. Must be rendered inside a {@link DropdownMenu}.
+ * disabled states. A disabled item with `hint` stays focusable and explains itself in a tooltip.
+ * Must be rendered inside a {@link DropdownMenu}.
  *
  * @example
  * <DropdownMenuItem onClick={select} isActive={selected}>Option</DropdownMenuItem>
+ * <DropdownMenuItem onClick={sendTest} disabled={!isSaved} hint="Save the template first">Test email</DropdownMenuItem>
  */
-export const DropdownMenuItem = ({
+export const DropdownMenuItem = forwardRef(({
   children,
   onClick,
   isActive,
   isDanger,
   disabled,
+  hint,
   closeOnClick = true
-}) => {
+}, ref) => {
   const onClickContext = useContext(DropdownContext);
+  const hintId = useId();
   if (process.env.NODE_ENV === 'development') {
     if (!onClickContext) {
       console.error('DropdownMenuItem must be inside DropdownMenu');
     }
   }
-  return _jsxs(DropdownMenuItemStyled, {
+  const hasHint = Boolean(disabled && hint);
+  const item = _jsxs(DropdownMenuItemStyled, {
+    ref: ref,
+    type: "button",
     "$active": isActive,
     "$danger": isDanger,
     onClick: () => {
+      if (disabled) return;
       if (closeOnClick) {
         onClickContext?.(false);
       }
       onClick();
     },
-    disabled: disabled,
+    disabled: disabled && !hasHint,
+    "aria-disabled": hasHint || undefined,
+    "aria-describedby": hasHint ? hintId : undefined,
     "data-active": isActive || undefined,
     children: [children, isActive && _jsx(DropdownMenuIconStyled, {
       children: _jsx(CheckIcon, {
@@ -41,4 +52,16 @@ export const DropdownMenuItem = ({
       })
     })]
   });
-};
+  if (!hasHint) return item;
+  return _jsxs(_Fragment, {
+    children: [_jsx(Tooltip, {
+      content: hint,
+      position: "left-middle",
+      children: item
+    }), _jsx(DropdownMenuItemHintStyled, {
+      id: hintId,
+      children: hint
+    })]
+  });
+});
+DropdownMenuItem.displayName = 'DropdownMenuItem';

package/DropdownMenu/components/DropdownMenuItem/styles.d.ts

@@ -1 +1 @@
-export { DropdownMenuItemStyled, DropdownMenuIconStyled } from '../../shared/styles';
+export { DropdownMenuItemStyled, DropdownMenuIconStyled, DropdownMenuItemHintStyled } from '../../shared/styles';

package/DropdownMenu/components/DropdownMenuItem/styles.js

@@ -1 +1 @@
-export { DropdownMenuItemStyled, DropdownMenuIconStyled } from '../../shared/styles';
+export { DropdownMenuItemStyled, DropdownMenuIconStyled, DropdownMenuItemHintStyled } from '../../shared/styles';

package/DropdownMenu/components/DropdownMenuItem/types.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 /** Props of {@link DropdownMenuItem}. */
 export type DropdownMenuItemProps = PropsWithChildren<{
     /** Fires when the item is clicked. */
@@ -9,6 +9,8 @@ export type DropdownMenuItemProps = PropsWithChildren<{
     isDanger?: boolean;
     /** Disable the item. */
     disabled?: boolean;
+    /** Why the item is unavailable; shown as a tooltip on hover/focus, only while `disabled`. */
+    hint?: ReactNode;
     /** Close the menu after clicking (default `true`). */
     closeOnClick?: boolean;
 }>;

package/DropdownMenu/shared/styles.d.ts

@@ -21,4 +21,5 @@ export declare const DropdownMenuItemStyled: import("styled-components").StyledC
     $active?: boolean;
     $danger?: boolean;
 }, never>;
+export declare const DropdownMenuItemHintStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const DropdownMenuIconStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

package/DropdownMenu/shared/styles.js

@@ -24,14 +24,18 @@ export const Place = styled(Vertical).withConfig({
 export const DropdownMenuItemStyled = styled.button.withConfig({
   displayName: "DropdownMenuItemStyled",
   componentId: "sc-hlq2pz-1"
-})(["appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;padding:0 12px;min-height:", ";border:none;overflow:hidden;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], UnitSize.FIELD_HEIGHT, ({
+})(["appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;width:100%;padding:0 12px;min-height:", ";border:none;overflow:hidden;color:", ";background:none;cursor:pointer;&:hover:not(:disabled,[aria-disabled='true']){background:", ";color:", ";}&:disabled,&[aria-disabled='true']{color:", ";}&:disabled{cursor:not-allowed;}&[aria-disabled='true']{cursor:default;}"], UnitSize.FIELD_HEIGHT, ({
   $active,
   $danger
 }) => {
   if ($danger) return Color.DANGER;
   return $active ? Color.PRIMARY : Color.MAIN;
 }, Color.SOFT_LIGHT, Color.MAIN, Color.LOCKED);
+export const DropdownMenuItemHintStyled = styled.span.withConfig({
+  displayName: "DropdownMenuItemHintStyled",
+  componentId: "sc-hlq2pz-2"
+})(["position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;"]);
 export const DropdownMenuIconStyled = styled.span.withConfig({
   displayName: "DropdownMenuIconStyled",
-  componentId: "sc-hlq2pz-2"
+  componentId: "sc-hlq2pz-3"
 })(["margin:-2px 0 0;line-height:0;"]);

package/package.json

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