@pushwoosh/dumb-components 4.2.1 → 4.3.1

package/PageHeader/components/PageHeader/PageHeader.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Columns } from '@pushwoosh/kit-helpers';
+import { UnitSize } from '@pushwoosh/kit-constants';
+import { Columns, Horizontal } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon } from '@pushwoosh/kit-icons';
 import { H1 } from '@pushwoosh/kit-typography';
 import { Button } from '../../../Button';
 import { PageHeaderError } from '../PageHeaderError';
-import { RootBox, BackButton, TitleBox, DescriptionBox, ActionsBox, MoreActionsBox } from './styles';
+import { RootBox, BackButton, TitleBox, TitleWithExtraBox, TitleWrapBox, TitleExtraBox, DescriptionBox, ActionsBox, MoreActionsBox } from './styles';
 /**
  * Page-level header with a title, optional back arrow, description, inline error bar
  * and submit/cancel/extra actions.
@@ -15,6 +16,7 @@ import { RootBox, BackButton, TitleBox, DescriptionBox, ActionsBox, MoreActionsB
 export function PageHeader(props) {
   const {
     title,
+    titleExtra,
     description,
     error,
     resolveErrorText,
@@ -29,23 +31,36 @@ export function PageHeader(props) {
   } = props;
   const hasActions = Boolean(onSubmit || onCancel);
   const hasActionsBox = hasActions || Boolean(moreActions);
+  const backButton = onBack && _jsx(BackButton, {
+    children: _jsx(Button, {
+      color: "primary",
+      view: "ghost",
+      onClick: onBack,
+      children: _jsx(ArrowRoundIcon, {
+        direction: "left",
+        size: "medium",
+        view: "filled"
+      })
+    })
+  });
   return _jsxs(RootBox, {
     children: [_jsxs(Columns, {
       "$sizes": "minmax(0, 1fr) max-content",
       "$gap": 24,
-      children: [_jsxs(TitleBox, {
-        children: [onBack && _jsx(BackButton, {
-          children: _jsx(Button, {
-            color: "primary",
-            view: "ghost",
-            onClick: onBack,
-            children: _jsx(ArrowRoundIcon, {
-              direction: "left",
-              size: "medium",
-              view: "filled"
+      children: [titleExtra ? _jsxs(TitleWithExtraBox, {
+        children: [backButton, _jsxs(TitleWrapBox, {
+          children: [_jsx(Horizontal, {
+            "$minHeight": UnitSize.FIELD_HEIGHT,
+            "$alignItems": "center",
+            children: _jsx(H1, {
+              children: title
             })
-          })
-        }), _jsx(H1, {
+          }), _jsx(TitleExtraBox, {
+            children: titleExtra
+          })]
+        })]
+      }) : _jsxs(TitleBox, {
+        children: [backButton, _jsx(H1, {
           children: title
         })]
       }), hasActionsBox && _jsxs(ActionsBox, {

package/PageHeader/components/PageHeader/styles.d.ts

@@ -8,6 +8,22 @@ export declare const BackButton: import("styled-components/dist/types").IStyledC
 export declare const TitleBox: 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 TitleWithExtraBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
+}> & string;
+export declare const TitleWrapBox: 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 TitleExtraBox: 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 ActionsBox: 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;

package/PageHeader/components/PageHeader/styles.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
+import { FontSize, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
 import { Paragraph } from '@pushwoosh/kit-typography';
+import { PAGE_HEADER_INSET_ATTRIBUTE, STEP_CELL_INSET } from '../../constants';
 export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
   componentId: "sc-1qwo99q-0"
@@ -12,17 +14,30 @@ export const TitleBox = styled.div.withConfig({
   displayName: "TitleBox",
   componentId: "sc-1qwo99q-2"
 })(["display:flex;align-items:center;justify-content:start;flex-shrink:0;gap:8px;"]);
+const TITLE_LINE_HEIGHT = `calc(${FontSize.HEADING1} * ${LineHeight.HEADING1})`;
+export const TitleWithExtraBox = styled(TitleBox).withConfig({
+  displayName: "TitleWithExtraBox",
+  componentId: "sc-1qwo99q-3"
+})(["align-items:flex-start;flex-shrink:1;min-width:0;"]);
+export const TitleWrapBox = styled.div.withConfig({
+  displayName: "TitleWrapBox",
+  componentId: "sc-1qwo99q-4"
+})(["display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:calc(8px - (", " - ", ") / 2);min-width:0;&:has([", "]){--page-header-extra-inset:", "px;}"], UnitSize.FIELD_HEIGHT, TITLE_LINE_HEIGHT, PAGE_HEADER_INSET_ATTRIBUTE, STEP_CELL_INSET);
+export const TitleExtraBox = styled.div.withConfig({
+  displayName: "TitleExtraBox",
+  componentId: "sc-1qwo99q-5"
+})(["display:flex;align-items:center;min-width:0;margin-left:calc(-1 * var(--page-header-extra-inset,0px));"]);
 export const ActionsBox = styled.div.withConfig({
   displayName: "ActionsBox",
-  componentId: "sc-1qwo99q-3"
+  componentId: "sc-1qwo99q-6"
 })(["display:flex;justify-content:flex-end;gap:8px;"]);
 export const MoreActionsBox = styled.div.withConfig({
   displayName: "MoreActionsBox",
-  componentId: "sc-1qwo99q-4"
+  componentId: "sc-1qwo99q-7"
 })(["display:flex;margin-right:", ";"], ({
   $hasActions
 }) => $hasActions ? '16px' : '0');
 export const DescriptionBox = styled(Paragraph).withConfig({
   displayName: "DescriptionBox",
-  componentId: "sc-1qwo99q-5"
+  componentId: "sc-1qwo99q-8"
 })(["margin-top:16px;"]);

package/PageHeader/components/PageHeader/types.d.ts

@@ -3,6 +3,8 @@ import type { ReactElement, ReactNode } from 'react';
 export interface PageHeaderProps {
     /** Page title. */
     title: ReactNode;
+    /** Content next to the title, e.g. `Steps`; wraps under the title when the row is too narrow. */
+    titleExtra?: ReactNode;
     /** Subtitle/description under the title. */
     description?: ReactNode | string;
     /** Error message shown in an inline error bar. */

package/PageHeader/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const PAGE_HEADER_INSET_ATTRIBUTE = "data-page-header-inset";
+export declare const STEP_CELL_INSET = 3;

package/PageHeader/constants.js

@@ -0,0 +1,2 @@
+export const PAGE_HEADER_INSET_ATTRIBUTE = 'data-page-header-inset';
+export const STEP_CELL_INSET = 3;

package/RichMessageEditor/assets/arrow.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/></mask><path fill="#F7F9FA" fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/><path fill="#DCE1E5" d="m4.598 15.314.7.713zM3 3.26V2h2v1.26zm4.85 6.027L3.896 5.4 5.3 3.973 9.252 7.86zm-3.954 5.314 3.954-3.888 1.402 1.426L5.3 16.027zM3 18v-1.26h2V18zM1 2v16h-2V2zm1 19a3 3 0 0 1-3-3h2a1 1 0 0 0 1 1zm3-3a3 3 0 0 1-3 3v-2a1 1 0 0 0 1-1zm.299-1.973A1 1 0 0 0 5 16.74H3a3 3 0 0 1 .896-2.138L5.3 16.026zm3.953-8.166a3 3 0 0 1 0 4.278L7.85 10.713a1 1 0 0 0 0-1.426zM5 3.26a1 1 0 0 0 .299.713L3.896 5.399A3 3 0 0 1 3 3.259zM2 1a1 1 0 0 0-1 1h-2a3 3 0 0 1 3-3zm0-2a3 3 0 0 1 3 3H3a1 1 0 0 0-1-1z" mask="url(#a)"/><path stroke="#F7F9FA" stroke-width="3" d="M1.5 0v20"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/></mask><path fill="var(--pw-color-frozen, #F7F9FA)" fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/><path fill="var(--pw-color-form, #DCE1E5)" d="m4.598 15.314.7.713zM3 3.26V2h2v1.26zm4.85 6.027L3.896 5.4 5.3 3.973 9.252 7.86zm-3.954 5.314 3.954-3.888 1.402 1.426L5.3 16.027zM3 18v-1.26h2V18zM1 2v16h-2V2zm1 19a3 3 0 0 1-3-3h2a1 1 0 0 0 1 1zm3-3a3 3 0 0 1-3 3v-2a1 1 0 0 0 1-1zm.299-1.973A1 1 0 0 0 5 16.74H3a3 3 0 0 1 .896-2.138L5.3 16.026zm3.953-8.166a3 3 0 0 1 0 4.278L7.85 10.713a1 1 0 0 0 0-1.426zM5 3.26a1 1 0 0 0 .299.713L3.896 5.399A3 3 0 0 1 3 3.259zM2 1a1 1 0 0 0-1 1h-2a3 3 0 0 1 3-3zm0-2a3 3 0 0 1 3 3H3a1 1 0 0 0-1-1z" mask="url(#a)"/><path stroke="var(--pw-color-frozen, #F7F9FA)" stroke-width="3" d="M1.5 0v20"/></svg>

package/Steps/components/Step/Step.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { StepProps } from './types';
+export declare function Step(props: StepProps): ReactElement;

package/Steps/components/Step/Step.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { CheckRoundIcon } from '@pushwoosh/kit-icons';
+import { Text } from '@pushwoosh/kit-typography';
+import { StepBox } from './styles';
+const TONES = {
+  passed: 'success',
+  current: 'primary',
+  'not-passed': 'muted'
+};
+const CELL_TYPES = {
+  passed: 'blank',
+  current: 'dot',
+  'not-passed': 'blank'
+};
+export function Step(props) {
+  const {
+    title,
+    progress,
+    hasError,
+    hasTail,
+    onClick
+  } = props;
+  const isChecked = progress === 'passed' && !hasError;
+  return _jsxs(_Fragment, {
+    children: [_jsxs(StepBox, {
+      as: onClick ? 'button' : 'span',
+      type: onClick ? 'button' : undefined,
+      "$tone": hasError ? 'danger' : TONES[progress],
+      "aria-current": progress === 'current' ? 'step' : undefined,
+      onClick: onClick,
+      children: [_jsx(CheckRoundIcon, {
+        as: "span",
+        size: "medium",
+        type: isChecked ? 'fill' : CELL_TYPES[progress],
+        view: progress === 'current' || isChecked ? 'filled' : 'lined'
+      }), _jsx(Text, {
+        "$variant": "h1",
+        children: title
+      })]
+    }), hasTail && _jsx(Horizontal, {
+      "$width": 16,
+      "$height": 2,
+      "$bgColor": Color.FORM
+    })]
+  });
+}

package/Steps/components/Step/index.d.ts

@@ -0,0 +1 @@
+export { Step } from './Step';

package/Steps/components/Step/index.js

@@ -0,0 +1 @@
+export { Step } from './Step';

package/Steps/components/Step/styles.d.ts

@@ -0,0 +1,6 @@
+import type { StepTone } from './types';
+export declare const StepBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $tone: StepTone;
+}>> & string;

package/Steps/components/Step/styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+const COLORS = {
+  muted: {
+    idle: Color.PHANTOM,
+    hover: Color.PRIMARY_HOVER
+  },
+  primary: {
+    idle: Color.PRIMARY,
+    hover: Color.PRIMARY_HOVER
+  },
+  success: {
+    idle: Color.SUCCESS,
+    hover: Color.SUCCESS_HOVER
+  },
+  danger: {
+    idle: Color.DANGER,
+    hover: Color.DANGER_HOVER
+  }
+};
+export const StepBox = styled.button.withConfig({
+  displayName: "StepBox",
+  componentId: "sc-goy1gs-0"
+})(["display:flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;color:", ";white-space:nowrap;button&:hover{color:", ";cursor:pointer;}button&:active{color:", ";opacity:0.5;}&:focus-visible{outline:1px solid ", ";outline-offset:2px;}"], ({
+  $tone
+}) => COLORS[$tone].idle, ({
+  $tone
+}) => COLORS[$tone].hover, ({
+  $tone
+}) => COLORS[$tone].hover, Color.BRIGHT);

package/Steps/components/Step/types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { StepProgress } from '../../types';
+export type StepTone = 'muted' | 'primary' | 'success' | 'danger';
+export type StepProps = {
+    title: ReactNode;
+    progress: StepProgress;
+    hasError: boolean;
+    hasTail: boolean;
+    onClick?: () => void;
+};

package/Steps/components/Step/types.js

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

package/Steps/components/Steps/Steps.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { StepId, StepsProps } from '../../types';
+/** Wizard progress for `PageHeader` `titleExtra`; spread `stepsProps` of {@link useSteps} into it. */
+export declare function Steps<Id extends StepId>(props: StepsProps<Id>): ReactElement;

package/Steps/components/Steps/Steps.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { DEFAULT_SKELETON_COUNT, INSET_MARK } from '../../constants';
+import { findStepIndex, getStepProgress } from '../../helpers';
+import { Step } from '../Step';
+import { StepsSkeleton } from '../StepsSkeleton';
+/** Wizard progress for `PageHeader` `titleExtra`; spread `stepsProps` of {@link useSteps} into it. */
+export function Steps(props) {
+  const {
+    items,
+    activeStep,
+    onStepClick,
+    isLoading = false,
+    skeletonCount = DEFAULT_SKELETON_COUNT
+  } = props;
+  const activeIndex = findStepIndex(items, activeStep);
+  if (isLoading) {
+    return _jsx(StepsSkeleton, {
+      count: items.length || skeletonCount
+    });
+  }
+  return _jsx(Horizontal, {
+    "$gap": 6,
+    "$alignItems": "center",
+    "$justifyContent": "start",
+    ...INSET_MARK,
+    children: items.map((item, index) => _jsx(Step, {
+      title: item.title,
+      progress: getStepProgress(index, activeIndex),
+      hasError: !!item.hasError,
+      hasTail: index < items.length - 1,
+      onClick: onStepClick && index < activeIndex ? () => onStepClick(item.id) : undefined
+    }, item.id))
+  });
+}

package/Steps/components/Steps/index.d.ts

@@ -0,0 +1 @@
+export { Steps } from './Steps';

package/Steps/components/Steps/index.js

@@ -0,0 +1 @@
+export { Steps } from './Steps';

package/Steps/components/StepsSkeleton/StepsSkeleton.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { StepsSkeletonProps } from './types';
+export declare function StepsSkeleton({ count }: StepsSkeletonProps): ReactElement;

package/Steps/components/StepsSkeleton/StepsSkeleton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { CircularSkeleton, RectangularSkeleton } from '../../../Skeleton';
+import { INSET_MARK } from '../../constants';
+export function StepsSkeleton({
+  count
+}) {
+  return _jsx(Horizontal, {
+    "$gap": 6,
+    "$alignItems": "center",
+    "$justifyContent": "start",
+    "aria-busy": "true",
+    ...INSET_MARK,
+    children: Array.from({
+      length: count
+    }, (_, index) => _jsxs(Fragment, {
+      children: [_jsx(Horizontal, {
+        "$padding": 3,
+        children: _jsx(CircularSkeleton, {
+          diameter: 18,
+          color: Color.SOFT_LIGHT
+        })
+      }), _jsx(RectangularSkeleton, {
+        width: 87,
+        height: 18,
+        borderRadius: 4,
+        color: Color.SOFT_LIGHT
+      }), index < count - 1 && _jsx(RectangularSkeleton, {
+        width: 16,
+        height: 2,
+        color: Color.SOFT_LIGHT
+      })]
+    }, index))
+  });
+}

package/Steps/components/StepsSkeleton/index.d.ts

@@ -0,0 +1 @@
+export { StepsSkeleton } from './StepsSkeleton';

package/Steps/components/StepsSkeleton/index.js

@@ -0,0 +1 @@
+export { StepsSkeleton } from './StepsSkeleton';

package/Steps/components/StepsSkeleton/types.d.ts

@@ -0,0 +1,3 @@
+export type StepsSkeletonProps = {
+    count: number;
+};

package/Steps/components/StepsSkeleton/types.js

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

package/Steps/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_SKELETON_COUNT = 3;
+export declare const INSET_MARK: {
+    "data-page-header-inset": boolean;
+};

package/Steps/constants.js

@@ -0,0 +1,5 @@
+import { PAGE_HEADER_INSET_ATTRIBUTE } from '../PageHeader/constants';
+export const DEFAULT_SKELETON_COUNT = 3;
+export const INSET_MARK = {
+  [PAGE_HEADER_INSET_ATTRIBUTE]: true
+};

package/Steps/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './progress';

package/Steps/helpers/index.js

@@ -0,0 +1 @@
+export * from './progress';

package/Steps/helpers/progress.d.ts

@@ -0,0 +1,3 @@
+import type { StepId, StepItem, StepProgress } from '../types';
+export declare const findStepIndex: <Id extends StepId>(items: ReadonlyArray<StepItem<Id>>, id: Id | undefined) => number;
+export declare const getStepProgress: (index: number, activeIndex: number) => StepProgress;

package/Steps/helpers/progress.js

@@ -0,0 +1,7 @@
+export const findStepIndex = (items, id) => id === undefined ? -1 : items.findIndex(item => item.id === id);
+export const getStepProgress = (index, activeIndex) => {
+  if (activeIndex < 0 || index > activeIndex) {
+    return 'not-passed';
+  }
+  return index === activeIndex ? 'current' : 'passed';
+};

package/Steps/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useSteps';

package/Steps/hooks/index.js

@@ -0,0 +1 @@
+export * from './useSteps';

package/Steps/hooks/useSteps.d.ts

@@ -0,0 +1,3 @@
+import type { StepId, UseStepsOptions, UseStepsResult } from '../types';
+/** Wizard state: a forward move passes `canLeave`, a backward move is never blocked. */
+export declare function useSteps<Id extends StepId>(options: UseStepsOptions<Id>): UseStepsResult<Id>;

package/Steps/hooks/useSteps.js

@@ -0,0 +1,67 @@
+import { useCallback, useRef, useState } from 'react';
+import { findStepIndex } from '../helpers';
+/** Wizard state: a forward move passes `canLeave`, a backward move is never blocked. */
+export function useSteps(options) {
+  const {
+    items,
+    activeStep,
+    onChange,
+    canLeave,
+    onBackward
+  } = options;
+  const activeIndex = findStepIndex(items, activeStep);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const isPendingRef = useRef(false);
+  const goTo = useCallback(async id => {
+    const toIndex = findStepIndex(items, id);
+    if (isPendingRef.current || activeIndex < 0 || toIndex < 0 || toIndex === activeIndex) {
+      return;
+    }
+    if (toIndex < activeIndex) {
+      onBackward?.(activeStep, id);
+      onChange(id);
+      return;
+    }
+    isPendingRef.current = true;
+    setIsTransitioning(true);
+    try {
+      if (!canLeave || (await canLeave(activeStep, id))) {
+        onChange(id);
+      }
+    } catch (error) {
+      console.error('[useSteps]: canLeave threw, the move is refused.', error);
+    } finally {
+      isPendingRef.current = false;
+      setIsTransitioning(false);
+    }
+  }, [items, activeStep, activeIndex, onChange, canLeave, onBackward]);
+  const next = useCallback(async () => {
+    const nextItem = activeIndex >= 0 ? items[activeIndex + 1] : undefined;
+    if (nextItem) {
+      await goTo(nextItem.id);
+    }
+  }, [activeIndex, items, goTo]);
+  const prev = useCallback(() => {
+    const prevItem = activeIndex > 0 ? items[activeIndex - 1] : undefined;
+    if (prevItem) {
+      void goTo(prevItem.id);
+    }
+  }, [activeIndex, items, goTo]);
+  const onStepClick = useCallback(id => {
+    void goTo(id);
+  }, [goTo]);
+  return {
+    activeIndex,
+    isFirst: activeIndex === 0,
+    isLast: activeIndex >= 0 && activeIndex === items.length - 1,
+    goTo,
+    next,
+    prev,
+    isTransitioning,
+    stepsProps: {
+      items,
+      activeStep,
+      onStepClick
+    }
+  };
+}

package/Steps/index.d.ts

@@ -0,0 +1,3 @@
+export { Steps } from './components/Steps';
+export { useSteps } from './hooks';
+export type { StepId, StepItem, StepProgress, StepsProps, UseStepsOptions, UseStepsResult, } from './types';

package/Steps/index.js

@@ -0,0 +1,2 @@
+export { Steps } from './components/Steps';
+export { useSteps } from './hooks';

package/Steps/types.d.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+/** Identifier of a step: the form's own key, a string or a number. */
+export type StepId = string | number;
+/** One step of a {@link Steps} indicator. */
+export type StepItem<Id extends StepId = StepId> = {
+    /** Stable key of the step; progress is derived from its position in `items`. */
+    id: Id;
+    /** Label: one word or two short ones. */
+    title: ReactNode;
+    /** Paints the step as erroneous; a passed step with an error is shown as not passed. */
+    hasError?: boolean;
+};
+/** Where a step stands relative to the active one. */
+export type StepProgress = 'passed' | 'current' | 'not-passed';
+/** Props of {@link Steps}. */
+export type StepsProps<Id extends StepId = StepId> = {
+    /** Steps in display order, 2 to 5 of them. */
+    items: ReadonlyArray<StepItem<Id>>;
+    /** Id of the current step. */
+    activeStep: Id;
+    /** Makes the steps before the current one clickable; without it no step reacts to clicks. */
+    onStepClick?: (id: Id) => void;
+    /** Shows the skeleton instead of the steps — meant for the first data load only. */
+    isLoading?: boolean;
+    /** Number of skeleton steps when `items` is empty; 3 by default. */
+    skeletonCount?: number;
+};
+/** Options of {@link useSteps}. */
+export type UseStepsOptions<Id extends StepId = StepId> = {
+    /** Steps in display order. */
+    items: ReadonlyArray<StepItem<Id>>;
+    /** Current step, stored by the caller (a form field, a route). */
+    activeStep: Id;
+    /** Called with the step to move to. */
+    onChange: (id: Id) => void;
+    /** Gate of a forward move; a Promise holds the move, `false` or a throw refuses it. */
+    canLeave?: (from: Id, to: Id) => boolean | Promise<boolean>;
+    /** Called before every backward move, which is never blocked; forms clear their errors here. */
+    onBackward?: (from: Id, to: Id) => void;
+};
+/** Result of {@link useSteps}. */
+export type UseStepsResult<Id extends StepId = StepId> = {
+    /** Index of the current step in `items`, -1 when it is not there. */
+    activeIndex: number;
+    /** The current step is the first one. */
+    isFirst: boolean;
+    /** The current step is the last one. */
+    isLast: boolean;
+    /** Moves to a step, through `canLeave` when moving forward; ignored while a move is pending. */
+    goTo: (id: Id) => Promise<void>;
+    /** Moves to the next step; no-op on the last one. */
+    next: () => Promise<void>;
+    /** Moves to the previous step; no-op on the first one. */
+    prev: () => void;
+    /** A forward move is waiting for `canLeave`. */
+    isTransitioning: boolean;
+    /** Ready props for {@link Steps}: `items`, `activeStep`, `onStepClick`. */
+    stepsProps: Pick<StepsProps<Id>, 'items' | 'activeStep' | 'onStepClick'>;
+};

package/Steps/types.js

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

package/index.d.ts

@@ -40,6 +40,8 @@ export { WhatsAppPreview } from './WhatsAppPreview';
 export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppPreviewProps, } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
+export { Steps, useSteps } from './Steps';
+export type { StepId, StepItem, StepProgress, StepsProps, UseStepsOptions, UseStepsResult, } from './Steps';
 export { ExportResult } from './ExportResult';
 export { ExternalImagePreview } from './ExternalImagePreview';
 export { NativeInput, NativeTextarea, NativeSelect, NativeTimeInput, } from './native';

package/index.js

@@ -39,6 +39,7 @@ export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES } from './InboxPr
 export { WhatsAppPreview } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
+export { Steps, useSteps } from './Steps';
 export { ExportResult } from './ExportResult';
 export { ExternalImagePreview } from './ExternalImagePreview';
 export { NativeInput, NativeTextarea, NativeSelect, NativeTimeInput } from './native';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.2.1",
+  "version": "4.3.1",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -38,7 +38,7 @@
     "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-constants": "^3.0.0",
     "@pushwoosh/kit-helpers": "^4.16.0",
-    "@pushwoosh/kit-icons": "^2.3.10",
+    "@pushwoosh/kit-icons": "^2.3.15",
     "@pushwoosh/kit-typography": "^2.0.0",
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",