@pushwoosh/dumb-components 2.6.0 → 2.7.0

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.6.0",
+  "version": "2.7.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",