@pushwoosh/dumb-components 4.4.0 → 4.5.0

package/PageHeader/components/AutosizeInput/styles.js

@@ -17,4 +17,4 @@ export const InputStyled = styled.input.withConfig({
 export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
   componentId: "sc-191i2ot-3"
-})(["display:flex;align-items:center;overflow:hidden;flex-grow:1;& > ", " > span{position:absolute;visibility:hidden;}&:focus-within{", " > div{display:none;}", " > span{display:block;white-space:nowrap;}", "{color:", ";}}"], InputBox, PromptBox, PromptBox, InputStyled, Color.MAIN);
+})(["display:flex;align-items:center;overflow:hidden;flex-grow:1;& > ", " > span{position:absolute;visibility:hidden;white-space:pre;}&:focus-within{", " > div{display:none;}", " > span{display:block;white-space:nowrap;}", "{color:", ";}}"], InputBox, PromptBox, PromptBox, InputStyled, Color.MAIN);

package/PageHeader/components/PageHeader/styles.js

@@ -1,7 +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';
+import { PAGE_HEADER_INSET_ATTRIBUTE, PAGE_HEADER_RENAME_ATTRIBUTE, STEP_CELL_INSET } from '../../constants';
 export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
   componentId: "sc-1qwo99q-0"
@@ -22,7 +22,7 @@ export const TitleWithExtraBox = styled(TitleBox).withConfig({
 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);
+})(["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;}&:has([", "]){flex-wrap:nowrap;}"], UnitSize.FIELD_HEIGHT, TITLE_LINE_HEIGHT, PAGE_HEADER_INSET_ATTRIBUTE, STEP_CELL_INSET, PAGE_HEADER_RENAME_ATTRIBUTE);
 export const TitleExtraBox = styled.div.withConfig({
   displayName: "TitleExtraBox",
   componentId: "sc-1qwo99q-5"

package/PageHeader/components/PageHeaderEditable/PageHeaderEditable.d.ts

@@ -1,10 +1,7 @@
 import { type ReactElement } from 'react';
 import type { PageHeaderEditableProps } from './types';
 /**
- * {@link PageHeader} variant whose title is inline-editable via {@link AutosizeInput};
- * shows a skeleton while `isLoading`.
- *
- * @example
- * <PageHeaderEditable title="Name:" value={name} onChange={setName} onSubmit={save} />
+ * {@link PageHeader} with the legacy `AutosizeInput` name next to the title; shows a skeleton while `isLoading`.
+ * @deprecated Compose `PageHeader` with `titleExtra={<Rename />}` instead.
  */
 export declare function PageHeaderEditable(props: PageHeaderEditableProps): ReactElement;

package/PageHeader/components/PageHeaderEditable/PageHeaderEditable.js

@@ -1,91 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Columns } from '@pushwoosh/kit-helpers';
-import { ArrowRoundIcon } from '@pushwoosh/kit-icons';
-import { Button } from '../../../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PAGE_HEADER_RENAME_ATTRIBUTE } from '../../constants';
 import { AutosizeInput } from '../AutosizeInput';
-import { PageHeaderError } from '../PageHeaderError';
+import { PageHeader } from '../PageHeader';
 import { PageHeaderSkeleton } from '../PageHeaderSkeleton';
-import { RootBox, BackButton, TitleBox, DescriptionBox, AutosizeInputBox, ActionsBox, MoreActionsBox } from './styles';
+import { LegacyNameBox } from './styles';
+const LEGACY_NAME_MARK = {
+  [PAGE_HEADER_RENAME_ATTRIBUTE]: true
+};
 /**
- * {@link PageHeader} variant whose title is inline-editable via {@link AutosizeInput};
- * shows a skeleton while `isLoading`.
- *
- * @example
- * <PageHeaderEditable title="Name:" value={name} onChange={setName} onSubmit={save} />
+ * {@link PageHeader} with the legacy `AutosizeInput` name next to the title; shows a skeleton while `isLoading`.
+ * @deprecated Compose `PageHeader` with `titleExtra={<Rename />}` instead.
  */
 export function PageHeaderEditable(props) {
   const {
-    title,
-    description,
-    error,
-    resolveErrorText,
     value,
     maxLength,
     placeholder,
-    submitText,
-    cancelText,
     isLoading,
-    isLoadingSubmit,
-    moreActions,
-    onBack,
     onChange,
     onComplete,
     onSubmit,
-    onCancel,
-    onResolveError
+    ...headerProps
   } = props;
   if (isLoading) {
     return _jsx(PageHeaderSkeleton, {});
   }
-  const hasActions = Boolean(onSubmit || onCancel);
-  const hasActionsBox = hasActions || Boolean(moreActions);
-  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"
-            })
-          })
-        }), _jsxs(AutosizeInputBox, {
-          children: [title, value !== undefined && _jsx(AutosizeInput, {
-            placeholder: placeholder,
-            maxLength: maxLength,
-            value: value,
-            onChange: onChange,
-            onComplete: onComplete
-          })]
-        })]
-      }), hasActionsBox && _jsxs(ActionsBox, {
-        children: [!!moreActions && _jsx(MoreActionsBox, {
-          "$hasActions": hasActions,
-          children: moreActions
-        }), onCancel && _jsx(Button, {
-          color: "secondary",
-          onClick: onCancel,
-          children: cancelText || 'Cancel'
-        }), onSubmit && _jsx(Button, {
-          color: "primary",
-          type: "submit",
-          onClick: () => value ? onSubmit(value) : null,
-          isLoading: !!isLoadingSubmit,
-          children: submitText || 'Create'
-        })]
-      })]
-    }), !!error && _jsx(PageHeaderError, {
-      error: error,
-      resolveErrorText: resolveErrorText,
-      onResolveError: onResolveError
-    }), !!description && _jsx(DescriptionBox, {
-      children: description
-    })]
+  return _jsx(PageHeader, {
+    ...headerProps,
+    titleExtra: value !== undefined && _jsx(LegacyNameBox, {
+      ...LEGACY_NAME_MARK,
+      children: _jsx(AutosizeInput, {
+        value: value,
+        maxLength: maxLength,
+        placeholder: placeholder,
+        onChange: onChange,
+        onComplete: onComplete
+      })
+    }),
+    onSubmit: onSubmit && (() => value ? onSubmit(value) : null)
   });
 }

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

@@ -1,31 +1,31 @@
-import { H1, Paragraph } from '@pushwoosh/kit-typography';
-export declare const RootBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+export declare const LegacyNameBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("styled-components").FastOmit<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;
-}> & string;
-export declare const BackButton: 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 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 AutosizeInputBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    readonly boxRef?: import("react").Ref<HTMLHeadingElement>;
-    readonly children: import("react").ReactNode;
-    readonly $textTransform?: import("react").CSSProperties["textTransform"];
+}, {
+    $color?: string;
+    $textAlign?: import("react").CSSProperties["textAlign"];
+    $textTransform?: import("react").CSSProperties["textTransform"];
+    $ellipsis?: boolean;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant;
+}>, "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 | undefined;
-}> & string & Omit<typeof H1, keyof import("react").Component<any, {}, any>>;
-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;
-export declare const MoreActionsBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
+}, "children" | "key" | "slot" | "style" | "title" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "$color" | "$variant" | "as" | "forwardedAs" | "$textTransform" | "$textAlign" | "$ellipsis"> & Partial<Pick<Omit<import("styled-components").FastOmit<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;
 }, {
-    $hasActions: boolean;
-}>> & string;
-export declare const DescriptionBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    readonly boxRef?: import("react").Ref<HTMLParagraphElement>;
-    readonly children: import("react").ReactNode;
+    $color?: string;
+    $textAlign?: import("react").CSSProperties["textAlign"];
+    $textTransform?: import("react").CSSProperties["textTransform"];
+    $ellipsis?: boolean;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant;
+}>, "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 | undefined;
-}> & string & Omit<typeof Paragraph, keyof import("react").Component<any, {}, any>>;
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
+}, "children" | "key" | "slot" | "style" | "title" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "$color" | "$variant" | "as" | "forwardedAs" | "$textTransform" | "$textAlign" | "$ellipsis">>> & string;

package/PageHeader/components/PageHeaderEditable/styles.js

@@ -1,32 +1,8 @@
 import styled from 'styled-components';
-import { H1, Paragraph } from '@pushwoosh/kit-typography';
-export const RootBox = styled.div.withConfig({
-  displayName: "RootBox",
+import { Text } from '@pushwoosh/kit-typography';
+export const LegacyNameBox = styled(Text).attrs({
+  $variant: 'h1'
+}).withConfig({
+  displayName: "LegacyNameBox",
   componentId: "sc-19rm2yr-0"
-})(["display:flex;flex-direction:column;"]);
-export const BackButton = styled.div.withConfig({
-  displayName: "BackButton",
-  componentId: "sc-19rm2yr-1"
-})(["min-width:36px;max-width:36px;& button{border:0;padding:0;}"]);
-export const TitleBox = styled.div.withConfig({
-  displayName: "TitleBox",
-  componentId: "sc-19rm2yr-2"
-})(["display:flex;align-items:center;justify-content:start;flex-shrink:0;gap:8px;"]);
-export const AutosizeInputBox = styled(H1).withConfig({
-  displayName: "AutosizeInputBox",
-  componentId: "sc-19rm2yr-3"
-})(["display:flex;align-items:center;justify-content:start;overflow:hidden;gap:8px;"]);
-export const ActionsBox = styled.div.withConfig({
-  displayName: "ActionsBox",
-  componentId: "sc-19rm2yr-4"
-})(["display:flex;justify-content:flex-end;gap:8px;"]);
-export const MoreActionsBox = styled.div.withConfig({
-  displayName: "MoreActionsBox",
-  componentId: "sc-19rm2yr-5"
-})(["display:flex;margin-right:", ";"], ({
-  $hasActions
-}) => $hasActions ? '16px' : '0');
-export const DescriptionBox = styled(Paragraph).withConfig({
-  displayName: "DescriptionBox",
-  componentId: "sc-19rm2yr-6"
-})(["margin-top:16px;"]);
+})(["display:flex;align-items:center;min-width:0;"]);

package/PageHeader/components/Rename/Rename.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { RenameProps } from './types';
+/** Editable name for `PageHeader` `titleExtra`: click to edit in place, Enter or blur commits, Escape reverts. */
+export declare function Rename(props: RenameProps): ReactElement;

package/PageHeader/components/Rename/Rename.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { EditIcon } from '@pushwoosh/kit-icons';
+import { RenameBox, RenameButton, RenameField, RenameInput, RenameMeasure, RenameText } from './styles';
+import { PAGE_HEADER_RENAME_ATTRIBUTE } from '../../constants';
+const RENAME_MARK = {
+  [PAGE_HEADER_RENAME_ATTRIBUTE]: true
+};
+/** Editable name for `PageHeader` `titleExtra`: click to edit in place, Enter or blur commits, Escape reverts. */
+export function Rename(props) {
+  const {
+    value,
+    placeholder,
+    maxLength,
+    onChange
+  } = props;
+  const [draft, setDraft] = useState(null);
+  const inputRef = useRef(null);
+  const isEditing = draft !== null;
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.select();
+    }
+  }, [isEditing]);
+  const commit = () => {
+    const name = (draft ?? '').trim();
+    if (name && name !== value) {
+      onChange(name);
+    }
+    setDraft(null);
+  };
+  const onKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      inputRef.current?.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      setDraft(value);
+      inputRef.current?.blur();
+    }
+  };
+  const onInput = event => {
+    setDraft(event.currentTarget.value.replace(/\n/g, ''));
+  };
+  return _jsx(RenameBox, {
+    ...RENAME_MARK,
+    children: isEditing ? _jsxs(RenameField, {
+      children: [_jsx(RenameMeasure, {
+        "aria-hidden": "true",
+        children: draft || placeholder
+      }), _jsx(RenameInput, {
+        ref: inputRef,
+        value: draft,
+        placeholder: placeholder,
+        maxLength: maxLength,
+        onChange: onInput,
+        onKeyDown: onKeyDown,
+        onBlur: commit
+      })]
+    }) : _jsxs(RenameButton, {
+      type: "button",
+      "$isEmpty": !value,
+      onClick: () => setDraft(value),
+      children: [_jsx(RenameText, {
+        children: value || placeholder
+      }), _jsx(EditIcon, {
+        size: "small",
+        view: "filled"
+      })]
+    })
+  });
+}

package/PageHeader/components/Rename/index.d.ts

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

package/PageHeader/components/Rename/index.js

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

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

@@ -0,0 +1,48 @@
+export declare const RenameBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("styled-components").FastOmit<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;
+}, {
+    $color?: string;
+    $textAlign?: import("react").CSSProperties["textAlign"];
+    $textTransform?: import("react").CSSProperties["textTransform"];
+    $ellipsis?: boolean;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant;
+}>, "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;
+}, "children" | "key" | "slot" | "style" | "title" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "$color" | "$variant" | "as" | "forwardedAs" | "$textTransform" | "$textAlign" | "$ellipsis"> & Partial<Pick<Omit<import("styled-components").FastOmit<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;
+}, {
+    $color?: string;
+    $textAlign?: import("react").CSSProperties["textAlign"];
+    $textTransform?: import("react").CSSProperties["textTransform"];
+    $ellipsis?: boolean;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant;
+}>, "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;
+}, "children" | "key" | "slot" | "style" | "title" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "$color" | "$variant" | "as" | "forwardedAs" | "$textTransform" | "$textAlign" | "$ellipsis">>> & string;
+export declare const RenameButton: 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;
+}, {
+    $isEmpty: boolean;
+}>> & string;
+export declare const RenameText: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const RenameField: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const RenameInput: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const RenameMeasure: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/PageHeader/components/Rename/styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Text } from '@pushwoosh/kit-typography';
+export const RenameBox = styled(Text).attrs({
+  $variant: 'h1'
+}).withConfig({
+  displayName: "RenameBox",
+  componentId: "sc-rgc26r-0"
+})(["display:flex;align-items:center;min-width:0;"]);
+export const RenameButton = styled.button.withConfig({
+  displayName: "RenameButton",
+  componentId: "sc-rgc26r-1"
+})(["display:flex;align-items:center;gap:4px;min-width:0;margin:0;padding:0;border:0;background:none;font:inherit;color:", ";cursor:text;&:hover{color:", ";}&:focus-visible{outline:1px solid ", ";outline-offset:2px;}"], ({
+  $isEmpty
+}) => $isEmpty ? Color.PHANTOM : Color.PRIMARY, Color.PRIMARY_HOVER, Color.BRIGHT);
+export const RenameText = styled.span.withConfig({
+  displayName: "RenameText",
+  componentId: "sc-rgc26r-2"
+})(["min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px dashed ", ";"], Color.PHANTOM);
+export const RenameField = styled.span.withConfig({
+  displayName: "RenameField",
+  componentId: "sc-rgc26r-3"
+})(["display:inline-grid;grid-template-columns:minmax(0,max-content);max-width:100%;min-width:0;"]);
+export const RenameInput = styled.input.withConfig({
+  displayName: "RenameInput",
+  componentId: "sc-rgc26r-4"
+})(["grid-area:1 / 1;width:0;min-width:100%;margin:0;padding:0;border:0;border-bottom:1px dashed ", ";background:none;font:inherit;color:", ";outline:0;&::placeholder{color:", ";}"], Color.PHANTOM, Color.MAIN, Color.PHANTOM);
+export const RenameMeasure = styled.span.withConfig({
+  displayName: "RenameMeasure",
+  componentId: "sc-rgc26r-5"
+})(["grid-area:1 / 1;min-width:0;overflow:hidden;visibility:hidden;white-space:pre;padding-right:2px;"]);

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

@@ -0,0 +1,11 @@
+/** Props of {@link Rename}. */
+export interface RenameProps {
+    /** Saved name; the field edits a draft and reports it through `onChange` only when it is committed. */
+    value: string;
+    /** Shown while the name is empty. */
+    placeholder?: string;
+    /** Maximum number of characters. */
+    maxLength?: number;
+    /** Fires with the new name on Enter or when the field loses focus; never with an empty name. */
+    onChange: (value: string) => void;
+}

package/PageHeader/components/Rename/types.js

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

package/PageHeader/constants.d.ts

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

package/PageHeader/constants.js

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

package/PageHeader/index.d.ts

@@ -1,3 +1,4 @@
 export { AutosizeInput } from './components/AutosizeInput';
 export { PageHeader } from './components/PageHeader';
 export { PageHeaderEditable } from './components/PageHeaderEditable';
+export { Rename } from './components/Rename';

package/PageHeader/index.js

@@ -1,3 +1,4 @@
 export { AutosizeInput } from './components/AutosizeInput';
 export { PageHeader } from './components/PageHeader';
-export { PageHeaderEditable } from './components/PageHeaderEditable';
+export { PageHeaderEditable } from './components/PageHeaderEditable';
+export { Rename } from './components/Rename';

package/index.d.ts

@@ -38,7 +38,7 @@ export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES, type InboxLayout
 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 { AutosizeInput, PageHeader, PageHeaderEditable, Rename, } from './PageHeader';
 export { Steps, useSteps } from './Steps';
 export type { StepId, StepItem, StepProgress, StepsProps, UseStepsOptions, UseStepsResult, } from './Steps';
 export { ExportResult } from './ExportResult';

package/index.js

@@ -37,7 +37,7 @@ export { PushStoriesPreview, hasStoryButton, normalizeStoryDuration, PUSH_STORIE
 export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES } from './InboxPreview';
 export { WhatsAppPreview } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
-export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
+export { AutosizeInput, PageHeader, PageHeaderEditable, Rename } from './PageHeader';
 export { Steps, useSteps } from './Steps';
 export { ExportResult } from './ExportResult';
 export { ExternalImagePreview } from './ExternalImagePreview';

package/package.json

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

package/shared/dropdownField/useAsyncItems.js

@@ -12,9 +12,12 @@ export function useAsyncItems({
   debounceMs = DEFAULT_DEBOUNCE_MS,
   minChars = 0
 }) {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
+  const [state, setState] = useState({
+    session: 0,
+    items: [],
+    loading: false,
+    loadingMore: false
+  });
   const debouncedQuery = useDebouncedValue(query, debounceMs);
   const loadItemsRef = useRef(loadItems);
   loadItemsRef.current = loadItems;
@@ -23,60 +26,85 @@ export function useAsyncItems({
   const queryRef = useRef('');
   const loadingRef = useRef(false);
   const hasMoreRef = useRef(false);
+  const sessionDeps = [debouncedQuery, isOpen, minChars];
+  const [prevSessionDeps, setPrevSessionDeps] = useState(null);
+  if (prevSessionDeps === null || sessionDeps.some((dep, index) => dep !== prevSessionDeps[index])) {
+    setPrevSessionDeps(sessionDeps);
+    const belowMin = debouncedQuery.trim().length < minChars;
+    setState(prev => ({
+      session: prev.session + 1,
+      items: !loadItems || belowMin ? [] : prev.items,
+      loading: Boolean(loadItems) && isOpen && !belowMin,
+      loadingMore: false
+    }));
+  }
+  const {
+    session
+  } = state;
   useEffect(() => {
     const loader = loadItemsRef.current;
     const belowMin = debouncedQuery.trim().length < minChars;
-    sessionRef.current += 1;
+    sessionRef.current = session;
     pageRef.current = 0;
     loadingRef.current = false;
     hasMoreRef.current = false;
-    setLoadingMore(false);
     if (!loader || !isOpen || belowMin) {
-      setLoading(false);
-      if (!loader || belowMin) setItems([]);
       return undefined;
     }
-    const session = sessionRef.current;
     queryRef.current = debouncedQuery;
     loadingRef.current = true;
-    setLoading(true);
     Promise.resolve(loader(debouncedQuery, 0)).then(result => {
       if (session !== sessionRef.current) return;
-      setItems(result.items);
       hasMoreRef.current = result.hasMore ?? false;
       loadingRef.current = false;
-      setLoading(false);
+      setState(prev => prev.session === session ? {
+        ...prev,
+        items: result.items,
+        loading: false
+      } : prev);
     }).catch(() => {
       if (session !== sessionRef.current) return;
       loadingRef.current = false;
-      setLoading(false);
+      setState(prev => prev.session === session ? {
+        ...prev,
+        loading: false
+      } : prev);
     });
     return undefined;
-  }, [debouncedQuery, isOpen, minChars]);
+  }, [session, debouncedQuery, isOpen, minChars]);
   const loadMore = useCallback(() => {
     const loader = loadItemsRef.current;
     if (!loader || loadingRef.current || !hasMoreRef.current) return;
-    const session = sessionRef.current;
+    const loadSession = sessionRef.current;
     const nextPage = pageRef.current + 1;
     loadingRef.current = true;
-    setLoadingMore(true);
+    setState(prev => prev.session === loadSession ? {
+      ...prev,
+      loadingMore: true
+    } : prev);
     Promise.resolve(loader(queryRef.current, nextPage)).then(result => {
-      if (session !== sessionRef.current) return;
+      if (loadSession !== sessionRef.current) return;
       pageRef.current = nextPage;
-      setItems(prev => [...prev, ...result.items]);
       hasMoreRef.current = result.hasMore ?? false;
       loadingRef.current = false;
-      setLoadingMore(false);
+      setState(prev => prev.session === loadSession ? {
+        ...prev,
+        items: [...prev.items, ...result.items],
+        loadingMore: false
+      } : prev);
     }).catch(() => {
-      if (session !== sessionRef.current) return;
+      if (loadSession !== sessionRef.current) return;
       loadingRef.current = false;
-      setLoadingMore(false);
+      setState(prev => prev.session === loadSession ? {
+        ...prev,
+        loadingMore: false
+      } : prev);
     });
   }, []);
   return {
-    items,
-    loading,
-    loadingMore,
+    items: state.items,
+    loading: state.loading,
+    loadingMore: state.loadingMore,
     loadMore
   };
 }