@pushwoosh/dumb-components 4.1.0 → 4.2.0

package/Button/Button.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronIcon } from '@pushwoosh/kit-icons';
 import { Spinner } from '../Spinner';
 import { geometryBySizeAndView, spinnerSizeBySize } from './constants';
-import { ButtonBox, ButtonIcon, ButtonSpinner, ButtonContent } from './styles';
+import { ButtonBox, ButtonChevron, ButtonIcon, ButtonSpinner, ButtonContent } from './styles';
 export function Button(props) {
   const {
     type = 'button',
@@ -14,6 +15,7 @@ export function Button(props) {
     isOpen,
     icon,
     rightIcon,
+    hasChevron,
     children,
     onClick,
     ...rest
@@ -26,6 +28,10 @@ export function Button(props) {
     console.error(`[Button]: cannot render with color "${color}" and size "${size}" and view "${view}"`);
     return null;
   }
+  if (process.env.NODE_ENV === 'development' && hasChevron && rightIcon) {
+    console.warn('[Button]: rightIcon is ignored when hasChevron is set');
+  }
+  const isShowRightIcon = !!rightIcon && !hasChevron;
   const isShowOverlaySpinner = !!children && !icon && view !== 'ghost' && isLoading;
   const isDisabledNonButton = !!isDisabled && !!rest.as && rest.as !== 'button';
   const handleClick = isDisabledNonButton ? event => {
@@ -47,7 +53,8 @@ export function Button(props) {
     "$isOpen": isOpen,
     "$hideContent": isShowOverlaySpinner,
     "$hasLeftIcon": !!icon,
-    "$hasRightIcon": !!rightIcon,
+    "$hasRightIcon": isShowRightIcon,
+    "$hasChevron": hasChevron,
     "$hasContent": !!children,
     ref: boxRef,
     children: [icon && _jsx(ButtonIcon, {
@@ -58,8 +65,15 @@ export function Button(props) {
       children: _jsx("div", {
         children: children
       })
-    }), rightIcon && _jsx(ButtonIcon, {
+    }), isShowRightIcon && _jsx(ButtonIcon, {
       children: rightIcon
+    }), hasChevron && _jsx(ButtonChevron, {
+      "$isOpen": isOpen,
+      "aria-hidden": true,
+      children: _jsx(ChevronIcon, {
+        size: "small",
+        direction: "down"
+      })
     }), isShowOverlaySpinner && _jsx(ButtonSpinner, {
       children: _jsx(Spinner, {
         color: "danger",

package/Button/constants.d.ts

@@ -7,6 +7,9 @@ export type ButtonGeometry = {
     readonly labelPadding: string;
     readonly gap: string;
     readonly iconSlot: string;
+    /** Label→chevron distance; defaults to `gap`. */
+    readonly chevronGap?: string;
+    readonly chevronEdge: string;
     readonly fontSize: string;
     readonly lineHeight: number;
     readonly fontWeight: number;

package/Button/constants.js

@@ -1,4 +1,5 @@
 import { FontSize, FontWeight, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
+const rhythm = '6px';
 const fieldTypography = {
   fontSize: FontSize.REGULAR,
   lineHeight: LineHeight.REGULAR,
@@ -13,15 +14,17 @@ const compactTypography = {
 };
 const boxed = {
   border: '1px',
-  padding: '6px',
-  labelPadding: '6px',
-  gap: '0px'
+  padding: rhythm,
+  labelPadding: rhythm,
+  gap: '0px',
+  chevronGap: '4px'
 };
 const fieldBox = {
   ...fieldTypography,
   ...boxed,
   height: UnitSize.FIELD_HEIGHT,
-  iconSlot: UnitSize.ICON_MEDIUM
+  iconSlot: UnitSize.ICON_MEDIUM,
+  chevronEdge: '8px'
 };
 /** Geometry per `size` × `view`; colors live in `colors.ts`. */
 export const geometryBySizeAndView = {
@@ -34,7 +37,8 @@ export const geometryBySizeAndView = {
       ...compactTypography,
       ...boxed,
       height: UnitSize.COMPACT_HEIGHT,
-      iconSlot: UnitSize.ICON_SMALL
+      iconSlot: UnitSize.ICON_SMALL,
+      chevronEdge: rhythm
     },
     ghost: {
       ...compactTypography,
@@ -42,8 +46,9 @@ export const geometryBySizeAndView = {
       border: '0px',
       padding: '0px',
       labelPadding: '0px',
-      gap: '6px',
-      iconSlot: UnitSize.ICON_SMALL
+      gap: rhythm,
+      iconSlot: UnitSize.ICON_SMALL,
+      chevronEdge: '0px'
     }
   }
 };

package/Button/styles.d.ts

@@ -5,6 +5,11 @@ export declare const ButtonIcon: import("styled-components/dist/types").IStyledC
 export declare const ButtonContent: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const ButtonChevron: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $isOpen?: boolean;
+}>> & string;
 export declare const ButtonSpinner: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -18,6 +23,7 @@ type ButtonBoxProps = {
     $hideContent?: boolean;
     $hasLeftIcon?: boolean;
     $hasRightIcon?: boolean;
+    $hasChevron?: boolean;
     $hasContent?: boolean;
 };
 export declare const ButtonBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {

package/Button/styles.js

@@ -10,24 +10,32 @@ export const ButtonContent = styled.div.withConfig({
   displayName: "ButtonContent",
   componentId: "sc-qltvdl-1"
 })(["display:grid;justify-content:start;padding:0 var(--btn-label-padding);& > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}&:first-child{justify-content:center;}"]);
+export const ButtonChevron = styled.span.withConfig({
+  displayName: "ButtonChevron",
+  componentId: "sc-qltvdl-2"
+})(["display:flex;margin-right:calc(var(--btn-chevron-edge) - var(--btn-padding));transform:", ";transition:transform 150ms;@media (prefers-reduced-motion:reduce){transition:none;}"], ({
+  $isOpen
+}) => $isOpen ? 'rotate(180deg)' : 'none');
 export const ButtonSpinner = styled.div.withConfig({
   displayName: "ButtonSpinner",
-  componentId: "sc-qltvdl-2"
+  componentId: "sc-qltvdl-3"
 })(["position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;"]);
 function geometryVars(geometry) {
-  return css(["--btn-height:", ";--btn-border:", ";--btn-padding:", ";--btn-label-padding:", ";--btn-gap:", ";--btn-icon-slot:", ";font-size:", ";line-height:", ";font-weight:", ";text-transform:", ";"], geometry.height, geometry.border, geometry.padding, geometry.labelPadding, geometry.gap, geometry.iconSlot, geometry.fontSize, geometry.lineHeight, geometry.fontWeight, geometry.textTransform);
+  return css(["--btn-height:", ";--btn-border:", ";--btn-padding:", ";--btn-label-padding:", ";--btn-gap:", ";--btn-icon-slot:", ";--btn-chevron-gap:", ";--btn-chevron-edge:", ";font-size:", ";line-height:", ";font-weight:", ";text-transform:", ";"], geometry.height, geometry.border, geometry.padding, geometry.labelPadding, geometry.gap, geometry.iconSlot, geometry.chevronGap ?? geometry.gap, geometry.chevronEdge, geometry.fontSize, geometry.lineHeight, geometry.fontWeight, geometry.textTransform);
 }
 const ghostCompactHitArea = css(["&::before{content:'';position:absolute;inset:calc((var(--btn-height) - ", ") / 2) 0;}"], UnitSize.COMPACT_HEIGHT);
 export const ButtonBox = styled.button.withConfig({
   displayName: "ButtonBox",
-  componentId: "sc-qltvdl-3"
-})(["", " position:relative;display:inline-grid;align-items:center;grid-template-columns:", ";gap:var(--btn-gap);box-sizing:border-box;height:var(--btn-height);padding:0 calc(var(--btn-padding) - var(--btn-border));appearance:none !important;border-style:solid;border-width:var(--btn-border) var(--btn-border-right,var(--btn-border)) var(--btn-border) var(--btn-border-left,var(--btn-border));border-radius:var(--btn-radius-left,", ") var(--btn-radius-right,", ") var(--btn-radius-right,", ") var(--btn-radius-left,", ");text-decoration:none;cursor:", ";user-select:none;&:hover{text-decoration:none;}&:focus{outline:none;}&:active{pointer-events:", ";}", " & ", "{opacity:", ";}", ""], ({
+  componentId: "sc-qltvdl-4"
+})(["", " position:relative;display:inline-grid;align-items:center;grid-template-columns:", ";gap:var(--btn-gap);box-sizing:border-box;height:var(--btn-height);padding:0 calc(var(--btn-padding) - var(--btn-border));appearance:none !important;border-style:solid;border-width:var(--btn-border) var(--btn-border-right,var(--btn-border)) var(--btn-border) var(--btn-border-left,var(--btn-border));border-radius:var(--btn-radius-left,", ") var(--btn-radius-right,", ") var(--btn-radius-right,", ") var(--btn-radius-left,", ");text-decoration:none;cursor:", ";user-select:none;&:hover{text-decoration:none;}&:focus{outline:none;}&:active{pointer-events:", ";}", " & ", "{margin-left:", ";}& ", ",& ", "{opacity:", ";}", ""], ({
   $size,
   $view
-}) => geometryVars(geometryBySizeAndView[$size][$view]), props => [props.$hasLeftIcon && 'auto', props.$hasContent && 'minmax(0, 1fr)', props.$hasRightIcon && 'auto'].filter(Boolean).join(' '), ShapeRadius.CONTROL, ShapeRadius.CONTROL, ShapeRadius.CONTROL, ShapeRadius.CONTROL, props => props.$isDisabled || props.$isLoading ? 'not-allowed!important' : 'pointer', props => props.$isDisabled || props.$isLoading ? 'none' : 'auto', ({
+}) => geometryVars(geometryBySizeAndView[$size][$view]), props => [props.$hasLeftIcon && 'auto', props.$hasContent && 'minmax(0, 1fr)', (props.$hasRightIcon || props.$hasChevron) && 'auto'].filter(Boolean).join(' '), ShapeRadius.CONTROL, ShapeRadius.CONTROL, ShapeRadius.CONTROL, ShapeRadius.CONTROL, props => props.$isDisabled || props.$isLoading ? 'not-allowed!important' : 'pointer', props => props.$isDisabled || props.$isLoading ? 'none' : 'auto', ({
   $size,
   $view
-}) => $size === 'compact' && $view === 'ghost' && ghostCompactHitArea, /* sc-selector */ButtonContent, ({
+}) => $size === 'compact' && $view === 'ghost' && ghostCompactHitArea, /* sc-selector */ButtonChevron, ({
+  $hasContent
+}) => $hasContent ? 'calc(var(--btn-chevron-gap) - var(--btn-label-padding) - var(--btn-gap))' : 'calc(var(--btn-chevron-gap) - var(--btn-gap))', /* sc-selector */ButtonContent, /* sc-selector */ButtonChevron, ({
   $hideContent,
   $isLoading
 }) => {
@@ -42,10 +50,11 @@ export const ButtonBox = styled.button.withConfig({
 }) => colorStyles[$color][$view][$size]);
 export const RemoveButtonBox = styled.button.withConfig({
   displayName: "RemoveButtonBox",
-  componentId: "sc-qltvdl-4"
+  componentId: "sc-qltvdl-5"
 })(["width:", ";height:", ";padding:0;appearance:none !important;border:none;background:transparent;cursor:pointer;color:", ";&:hover{color:", ";}&:active{color:", ";}"], UnitSize.ICON_SMALL, UnitSize.ICON_SMALL, Color.PHANTOM, Color.DANGER_HOVER, Color.DANGER_PRESSED);
 ButtonBox.displayName = 'ButtonBox';
 ButtonIcon.displayName = 'ButtonIcon';
 ButtonContent.displayName = 'ButtonContent';
+ButtonChevron.displayName = 'ButtonChevron';
 ButtonSpinner.displayName = 'ButtonSpinner';
 RemoveButtonBox.displayName = 'RemoveButtonBox';

package/Button/types.d.ts

@@ -25,8 +25,13 @@ export type RequiredButtonProps = {
     readonly isOpen?: boolean;
     /** Icon rendered before the label. */
     readonly icon?: ReactNode;
-    /** Icon rendered after the label. */
+    /**
+     * Icon rendered after the label.
+     * @deprecated Use `hasChevron` for the dropdown chevron; ignored when `hasChevron` is set.
+     */
     readonly rightIcon?: ReactNode;
+    /** Render a chevron after the label that turns over while `isOpen`. Decoration only: it does not make the button a menu trigger. */
+    readonly hasChevron?: boolean;
     /** Button label. */
     readonly children?: ReactNode;
 };

package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.js

@@ -38,6 +38,8 @@ export const DropdownMenuButton = ({
       boxRef: ref,
       onClick: onClick,
       isOpen: isOpen,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "menu",
       isDisabled: isDisabled,
       isLoading: isLoading,
       children: label

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

@@ -29,8 +29,13 @@ export type DropdownMenuButtonProps = {
     className?: string;
     /** Icon before the label. */
     icon?: RequiredButtonProps['icon'];
-    /** Icon after the label. */
+    /**
+     * Icon after the label.
+     * @deprecated Use `hasChevron`; ignored when `hasChevron` is set.
+     */
     rightIcon?: RequiredButtonProps['rightIcon'];
+    /** Render a chevron after the label that turns over while the menu is open. Off by default. */
+    hasChevron?: RequiredButtonProps['hasChevron'];
     /** Menu contents — nodes, or a function returning nodes. */
     children: (() => ReactNode) | ReactNode;
 };

package/package.json

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