@pushwoosh/dumb-components 1.1.134 → 1.1.136

package/NotificationInbox/NotificationBell.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from '@pushwoosh/kit-constants';
 import { NotificationIcon } from '@pushwoosh/kit-icons';
+import { useLang } from './polyglot';
 import { NotificationBellButton, NotificationBellBadge, NotificationBellBadgeDot } from './styles';
 export function NotificationBell({
   count = 0,
@@ -8,6 +9,7 @@ export function NotificationBell({
   isOpened = false,
   onClick
 }) {
+  const lang = useLang();
   const hasNotifications = count > 0;
   const showBadge = hasNotifications || severity;
   const getBadgeColor = () => {
@@ -16,18 +18,25 @@ export function NotificationBell({
     if (severity === 'warning') return Color.WARNING;
     return Color.PRIMARY;
   };
-  return React.createElement(NotificationBellButton, {
+  return _jsxs(NotificationBellButton, {
     "$isOpened": isOpened,
     onClick: onClick,
     type: "button",
-    "aria-label": hasNotifications ? 'You have unread notifications' : 'Notifications'
-  }, React.createElement(NotificationIcon, {
-    size: "medium",
-    type: "enabled",
-    view: isOpened ? 'filled' : 'lined',
-    color: "currentColor"
-  }), showBadge && React.createElement(NotificationBellBadge, null, React.createElement(NotificationBellBadgeDot, {
-    "$color": getBadgeColor(),
-    "$isDot": true
-  })));
+    "aria-label": hasNotifications ? lang({
+      message: 'DUMB.NOTIFICATION_INBOX.BELL_ARIA_UNREAD'
+    }) : lang({
+      message: 'DUMB.NOTIFICATION_INBOX.TITLE'
+    }),
+    children: [_jsx(NotificationIcon, {
+      size: "medium",
+      type: "enabled",
+      view: isOpened ? 'filled' : 'lined',
+      color: "currentColor"
+    }), showBadge && _jsx(NotificationBellBadge, {
+      children: _jsx(NotificationBellBadgeDot, {
+        "$color": getBadgeColor(),
+        "$isDot": true
+      })
+    })]
+  });
 }

package/NotificationInbox/NotificationInbox.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect, useCallback } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
@@ -8,6 +9,7 @@ import { useInfiniteScroll } from './useInfiniteScroll';
 import { Badge } from '../Badge';
 import { Spinner } from '../Spinner';
 import emptyNotificationsIcon from './assets/EmptyNotifications.svg?url';
+import { Lang } from './polyglot';
 import { NotificationInboxContainer, NotificationInboxHeader, NotificationInboxTitle, NotificationInboxList, NotificationItem, NotificationIndicator, NotificationHeader, NotificationDescription, NotificationActionLink, NotificationInboxEmptyIcon, NotificationInboxEmptyText } from './styles';
 export function NotificationInbox({
   notifications,
@@ -48,109 +50,162 @@ export function NotificationInbox({
     setShowExpandMap(newMap);
   }, [notifications]);
   if (notifications.length === 0 && !isLoading) {
-    return React.createElement(NotificationInboxContainer, null, React.createElement(NotificationInboxHeader, null, React.createElement(NotificationInboxTitle, {
-      "$variant": "h4",
-      "$color": Color.MAIN
-    }, "Notifications")), React.createElement(Vertical, {
-      "$alignItems": "center",
-      "$gap": 24,
-      "$padding": "24px"
-    }, React.createElement(NotificationInboxEmptyIcon, {
-      alt: emptyStateTitle,
-      src: emptyNotificationsIcon
-    }), React.createElement(Vertical, {
-      "$alignItems": "center",
-      "$gap": 6,
-      "$padding": "24px",
-      "$justifyContent": "center",
-      "$justifyItems": "center",
-      "$alignContent": "center"
-    }, React.createElement(NotificationInboxEmptyText, {
-      "$variant": "h4",
-      "$color": Color.LOCKED
-    }, emptyStateTitle), React.createElement(NotificationInboxEmptyText, {
-      "$variant": "footnote",
-      "$color": Color.LOCKED
-    }, emptyStateDescription))));
+    return _jsxs(NotificationInboxContainer, {
+      children: [_jsx(NotificationInboxHeader, {
+        children: _jsx(NotificationInboxTitle, {
+          "$variant": "h4",
+          "$color": Color.MAIN,
+          children: _jsx(Lang, {
+            message: "DUMB.NOTIFICATION_INBOX.TITLE"
+          })
+        })
+      }), _jsxs(Vertical, {
+        "$alignItems": "center",
+        "$gap": 24,
+        "$padding": "24px",
+        children: [_jsx(NotificationInboxEmptyIcon, {
+          alt: emptyStateTitle,
+          src: emptyNotificationsIcon
+        }), _jsxs(Vertical, {
+          "$alignItems": "center",
+          "$gap": 6,
+          "$padding": "24px",
+          "$justifyContent": "center",
+          "$justifyItems": "center",
+          "$alignContent": "center",
+          children: [_jsx(NotificationInboxEmptyText, {
+            "$variant": "h4",
+            "$color": Color.LOCKED,
+            children: emptyStateTitle
+          }), _jsx(NotificationInboxEmptyText, {
+            "$variant": "footnote",
+            "$color": Color.LOCKED,
+            children: emptyStateDescription
+          })]
+        })]
+      })]
+    });
   }
-  return React.createElement(NotificationInboxContainer, null, React.createElement(NotificationInboxHeader, null, React.createElement(NotificationInboxTitle, {
-    "$variant": "h4",
-    "$color": Color.MAIN
-  }, React.createElement("span", null, "Notifications"), unreadCount > 0 && React.createElement(React.Fragment, null, ' ', React.createElement(Text, {
-    "$variant": "h4",
-    "$color": Color.LOCKED
-  }, unreadCount, ' ', "unread")))), React.createElement(NotificationInboxList, {
-    "data-notification-list": true
-  }, notifications.map(notification => {
-    const isRead = notification.isRead ?? false;
-    const badgeColor = badgeColorMap[notification.severity] || 'gray';
-    const showExpandButton = showExpandMap[notification.id] ?? false;
-    return React.createElement(NotificationItem, {
-      key: notification.id,
-      onClick: () => handleNotificationClick(notification)
-    }, React.createElement(NotificationIndicator, {
-      "$isRead": isRead
-    }), React.createElement(Vertical, {
-      "$gap": 8
-    }, React.createElement(Vertical, null, React.createElement(NotificationHeader, null, React.createElement(Horizontal, {
-      "$gap": 4,
-      "$alignItems": "center"
-    }, React.createElement(Text, {
-      "$variant": "footnote",
-      "$color": Color.LOCKED
-    }, formatTimestamp(notification.timestamp)), notification.projectName && React.createElement(React.Fragment, null, React.createElement(Text, {
-      "$color": Color.LOCKED
-    }, "\u2022"), React.createElement(Text, {
-      "$variant": "footnote",
-      "$color": Color.LOCKED
-    }, notification.projectName))), (notification.severity === 'critical' || notification.severity === 'warning') && React.createElement(Badge, {
-      color: badgeColor,
-      isSaturated: false
-    }, notification.severity.toUpperCase())), React.createElement(Text, {
-      "$variant": "h4",
-      "$color": Color.MAIN
-    }, notification.title), notification.description && React.createElement(NotificationDescription, {
-      as: "div",
-      ref: element => descriptionRefs.current[notification.id] = element || null,
-      "$variant": "standard",
-      "$color": Color.MAIN,
-      "$visibleLines": VISIBLE_LINES,
-      "$expanded": expandedId === notification.id
-    }, notification.description)), (notification.actionButton || showExpandButton) && React.createElement(Horizontal, {
-      "$alignItems": "center",
-      "$justifyContent": "start",
-      "$gap": 12
-    }, notification.actionButton && React.createElement(NotificationActionLink, {
-      "$isPrimary": true,
-      onClick: e => {
-        var _notification$actionB;
-        e.stopPropagation();
-        (_notification$actionB = notification.actionButton) === null || _notification$actionB === void 0 || _notification$actionB.onClick();
-      }
-    }, notification.actionButton.label), showExpandButton && React.createElement(NotificationActionLink, {
-      onClick: e => {
-        e.stopPropagation();
-        setExpandedId(prev => prev === notification.id ? null : notification.id);
-      }
-    }, expandedId === notification.id ? 'Collapse' : 'Expand'))));
-  }), hasMore && isLoading && React.createElement(Horizontal, {
-    ref: loadMoreRef,
-    "$alignItems": "center",
-    "$justifyContent": "center",
-    "$padding": 16,
-    "$gap": 8
-  }, React.createElement(Spinner, {
-    size: "small",
-    color: Color.LOCKED
-  }), React.createElement(Text, {
-    "$variant": "footnote",
-    "$color": Color.LOCKED
-  }, "Loading more\u2026")), isLoading && notifications.length === 0 && !hasMore && React.createElement(Horizontal, {
-    "$justifyContent": "center",
-    "$alignItems": "center",
-    "$padding": "16px 0"
-  }, React.createElement(Spinner, {
-    size: "medium",
-    color: Color.LOCKED
-  }))));
+  return _jsxs(NotificationInboxContainer, {
+    children: [_jsx(NotificationInboxHeader, {
+      children: _jsxs(NotificationInboxTitle, {
+        "$variant": "h4",
+        "$color": Color.MAIN,
+        children: [_jsx("span", {
+          children: _jsx(Lang, {
+            message: "DUMB.NOTIFICATION_INBOX.TITLE"
+          })
+        }), unreadCount > 0 && _jsxs(_Fragment, {
+          children: [' ', _jsx(Text, {
+            "$variant": "h4",
+            "$color": Color.LOCKED,
+            children: _jsx(Lang, {
+              message: "DUMB.NOTIFICATION_INBOX.UNREAD",
+              count: unreadCount
+            })
+          })]
+        })]
+      })
+    }), _jsxs(NotificationInboxList, {
+      "data-notification-list": true,
+      children: [notifications.map(notification => {
+        const isRead = notification.isRead ?? false;
+        const badgeColor = badgeColorMap[notification.severity] || 'gray';
+        const showExpandButton = showExpandMap[notification.id] ?? false;
+        return _jsxs(NotificationItem, {
+          onClick: () => handleNotificationClick(notification),
+          children: [_jsx(NotificationIndicator, {
+            "$isRead": isRead
+          }), _jsxs(Vertical, {
+            "$gap": 8,
+            children: [_jsxs(Vertical, {
+              children: [_jsxs(NotificationHeader, {
+                children: [_jsxs(Horizontal, {
+                  "$gap": 4,
+                  "$alignItems": "center",
+                  children: [_jsx(Text, {
+                    "$variant": "footnote",
+                    "$color": Color.LOCKED,
+                    children: formatTimestamp(notification.timestamp)
+                  }), notification.projectName && _jsxs(_Fragment, {
+                    children: [_jsx(Text, {
+                      "$color": Color.LOCKED,
+                      children: "\u2022"
+                    }), _jsx(Text, {
+                      "$variant": "footnote",
+                      "$color": Color.LOCKED,
+                      children: notification.projectName
+                    })]
+                  })]
+                }), (notification.severity === 'critical' || notification.severity === 'warning') && _jsx(Badge, {
+                  color: badgeColor,
+                  isSaturated: false,
+                  children: notification.severity.toUpperCase()
+                })]
+              }), _jsx(Text, {
+                "$variant": "h4",
+                "$color": Color.MAIN,
+                children: notification.title
+              }), notification.description && _jsx(NotificationDescription, {
+                as: "div",
+                ref: element => descriptionRefs.current[notification.id] = element || null,
+                "$variant": "standard",
+                "$color": Color.MAIN,
+                "$visibleLines": VISIBLE_LINES,
+                "$expanded": expandedId === notification.id,
+                children: notification.description
+              })]
+            }), (notification.actionButton || showExpandButton) && _jsxs(Horizontal, {
+              "$alignItems": "center",
+              "$justifyContent": "start",
+              "$gap": 12,
+              children: [notification.actionButton && _jsx(NotificationActionLink, {
+                "$isPrimary": true,
+                onClick: e => {
+                  var _notification$actionB;
+                  e.stopPropagation();
+                  (_notification$actionB = notification.actionButton) === null || _notification$actionB === void 0 || _notification$actionB.onClick();
+                },
+                children: notification.actionButton.label
+              }), showExpandButton && _jsx(NotificationActionLink, {
+                onClick: e => {
+                  e.stopPropagation();
+                  setExpandedId(prev => prev === notification.id ? null : notification.id);
+                },
+                children: expandedId === notification.id ? _jsx(Lang, {
+                  message: "DUMB.NOTIFICATION_INBOX.COLLAPSE"
+                }) : _jsx(Lang, {
+                  message: "DUMB.NOTIFICATION_INBOX.EXPAND"
+                })
+              })]
+            })]
+          })]
+        }, notification.id);
+      }), hasMore && isLoading && _jsxs(Horizontal, {
+        ref: loadMoreRef,
+        "$alignItems": "center",
+        "$justifyContent": "center",
+        "$padding": 16,
+        "$gap": 8,
+        children: [_jsx(Spinner, {
+          size: "small",
+          color: Color.LOCKED
+        }), _jsx(Text, {
+          "$variant": "footnote",
+          "$color": Color.LOCKED,
+          children: _jsx(Lang, {
+            message: "DUMB.NOTIFICATION_INBOX.LOADING_MORE"
+          })
+        })]
+      }), isLoading && notifications.length === 0 && !hasMore && _jsx(Horizontal, {
+        "$justifyContent": "center",
+        "$alignItems": "center",
+        "$padding": "16px 0",
+        children: _jsx(Spinner, {
+          size: "medium",
+          color: Color.LOCKED
+        })
+      })]
+    })]
+  });
 }

package/NotificationInbox/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type NotificationInboxMessages } from './types';
+export declare const Lang: import("react").FC<import("../../polyglot").LangProps<NotificationInboxMessages>>, useLang: () => (props: import("../../polyglot").LangProps<NotificationInboxMessages>) => string;

package/NotificationInbox/polyglot/index.js

@@ -0,0 +1,10 @@
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+import { createLang } from '../../polyglot';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/NotificationInbox/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import { type NotificationInboxMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<NotificationInboxMessages>;

package/NotificationInbox/polyglot/messages_en.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'DUMB.NOTIFICATION_INBOX.TITLE': 'Notifications',
+  'DUMB.NOTIFICATION_INBOX.UNREAD': '{{count}} unread',
+  'DUMB.NOTIFICATION_INBOX.COLLAPSE': 'Collapse',
+  'DUMB.NOTIFICATION_INBOX.EXPAND': 'Expand',
+  'DUMB.NOTIFICATION_INBOX.LOADING_MORE': 'Loading more…',
+  'DUMB.NOTIFICATION_INBOX.BELL_ARIA_UNREAD': 'You have unread notifications'
+};

package/NotificationInbox/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import { type NotificationInboxMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<NotificationInboxMessages>;

package/NotificationInbox/polyglot/messages_ru.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'DUMB.NOTIFICATION_INBOX.TITLE': 'Уведомления',
+  'DUMB.NOTIFICATION_INBOX.UNREAD': '{{count}} {{count | pluralize: "непрочитанное", "непрочитанных", "непрочитанных"}}',
+  'DUMB.NOTIFICATION_INBOX.COLLAPSE': 'Свернуть',
+  'DUMB.NOTIFICATION_INBOX.EXPAND': 'Развернуть',
+  'DUMB.NOTIFICATION_INBOX.LOADING_MORE': 'Загрузка…',
+  'DUMB.NOTIFICATION_INBOX.BELL_ARIA_UNREAD': 'Есть непрочитанные уведомления'
+};

package/NotificationInbox/polyglot/types.d.ts

@@ -0,0 +1,11 @@
+import type { NoParams } from '../../polyglot';
+export type NotificationInboxMessages = {
+    'DUMB.NOTIFICATION_INBOX.TITLE': NoParams;
+    'DUMB.NOTIFICATION_INBOX.UNREAD': {
+        count: number;
+    };
+    'DUMB.NOTIFICATION_INBOX.COLLAPSE': NoParams;
+    'DUMB.NOTIFICATION_INBOX.EXPAND': NoParams;
+    'DUMB.NOTIFICATION_INBOX.LOADING_MORE': NoParams;
+    'DUMB.NOTIFICATION_INBOX.BELL_ARIA_UNREAD': NoParams;
+};

package/NotificationInbox/polyglot/types.js

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

package/NumberPicker/NumberPicker.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
 import { Vertical, useMount, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { ChevronIcon } from '@pushwoosh/kit-icons';
 import { AutosizeInput } from './components/AutosizeInput';
@@ -77,50 +78,58 @@ export function NumberPicker({
   };
   const resetAutoDiff = () => setAutoDiff(0);
   const InputComponent = autoSize ? AutosizeInput : InputStyled;
-  return React.createElement(SingleInputFrame, {
+  return _jsxs(SingleInputFrame, {
     ref: ref,
     "$hasHint": !!hint,
-    "$isDisabled": isDisabled
-  }, React.createElement(InputComponent, {
-    value: localValue,
-    placeholder: placeholder,
-    isDisabled: isDisabled,
-    disabled: isDisabled,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    onKeyUp: resetAutoDiff,
-    onBlur: event => {
-      if (!event.target.value && value === undefined) {
-        return;
+    "$isDisabled": isDisabled,
+    children: [_jsx(InputComponent, {
+      value: localValue,
+      placeholder: placeholder,
+      isDisabled: isDisabled,
+      disabled: isDisabled,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onKeyUp: resetAutoDiff,
+      onBlur: event => {
+        if (!event.target.value && value === undefined) {
+          return;
+        }
+        let blurValue = intVal(event.target.value);
+        const minValueValid = minValue === undefined || blurValue >= minValue;
+        const maxValueValid = maxValue === undefined || blurValue <= maxValue;
+        if (!maxValueValid) {
+          blurValue = maxValue;
+        } else if (!minValueValid) {
+          blurValue = minValue;
+        }
+        onChange(blurValue);
+        setLocalValue(`${blurValue}`);
       }
-      let blurValue = intVal(event.target.value);
-      const minValueValid = minValue === undefined || blurValue >= minValue;
-      const maxValueValid = maxValue === undefined || blurValue <= maxValue;
-      if (!maxValueValid) {
-        blurValue = maxValue;
-      } else if (!minValueValid) {
-        blurValue = minValue;
-      }
-      onChange(blurValue);
-      setLocalValue(`${blurValue}`);
-    }
-  }), hint && React.createElement(Hint, null, hint), React.createElement(Vertical, {
-    "$gap": 1
-  }, React.createElement("div", null, React.createElement(ChevronIcon, {
-    direction: "up",
-    size: "small",
-    "aria-disabled": "true",
-    onClick: () => onChangeDiff(step),
-    onMouseDown: () => setAutoDiff(step),
-    onMouseUp: resetAutoDiff,
-    onMouseLeave: resetAutoDiff
-  })), React.createElement("div", null, React.createElement(ChevronIcon, {
-    size: "small",
-    direction: "down",
-    "aria-disabled": isDisabled,
-    onClick: () => onChangeDiff(-1 * step),
-    onMouseDown: () => setAutoDiff(-1 * step),
-    onMouseUp: resetAutoDiff,
-    onMouseLeave: resetAutoDiff
-  }))));
+    }), hint && _jsx(Hint, {
+      children: hint
+    }), _jsxs(Vertical, {
+      "$gap": 1,
+      children: [_jsx("div", {
+        children: _jsx(ChevronIcon, {
+          direction: "up",
+          size: "small",
+          "aria-disabled": "true",
+          onClick: () => onChangeDiff(step),
+          onMouseDown: () => setAutoDiff(step),
+          onMouseUp: resetAutoDiff,
+          onMouseLeave: resetAutoDiff
+        })
+      }), _jsx("div", {
+        children: _jsx(ChevronIcon, {
+          size: "small",
+          direction: "down",
+          "aria-disabled": isDisabled,
+          onClick: () => onChangeDiff(-1 * step),
+          onMouseDown: () => setAutoDiff(-1 * step),
+          onMouseUp: resetAutoDiff,
+          onMouseLeave: resetAutoDiff
+        })
+      })]
+    })]
+  });
 }

package/NumberPicker/components/AutosizeInput/AutosizeInput.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
 import { minimalWidth } from './constants';
 import { Hidden } from './styles';
 import { InputStyled } from '../../styles';
@@ -20,18 +21,21 @@ export function AutosizeInput(props) {
     } = hiddenRef.current;
     setWidth(hiddenWidth + minimalWidth);
   }, [value]);
-  return React.createElement(React.Fragment, null, React.createElement(InputStyled, {
-    style: {
-      width
-    },
-    value: value,
-    placeholder: placeholder,
-    disabled: isDisabled,
-    onChange: onChange,
-    onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
-    onBlur: onBlur
-  }), React.createElement(Hidden, {
-    ref: hiddenRef
-  }, value || placeholder));
+  return _jsxs(_Fragment, {
+    children: [_jsx(InputStyled, {
+      style: {
+        width
+      },
+      value: value,
+      placeholder: placeholder,
+      disabled: isDisabled,
+      onChange: onChange,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown,
+      onBlur: onBlur
+    }), _jsx(Hidden, {
+      ref: hiddenRef,
+      children: value || placeholder
+    })]
+  });
 }

package/PageHeader/components/AutosizeInput/AutosizeInput.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { EditIcon } from '@pushwoosh/kit-icons';
 import { DEFAULT_EMPTY_VALUE, WIDTH_EMPTY_VALUE } from './constants';
 import { RootBox, InputBox, InputStyled, PromptBox } from './styles';
@@ -56,25 +57,32 @@ export function AutosizeInput(props) {
       return onComplete === null || onComplete === void 0 ? void 0 : onComplete(inputRef === null || inputRef === void 0 || (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value);
     }, 100);
   };
-  return React.createElement(RootBox, null, React.createElement(InputBox, null, React.createElement(InputStyled, {
-    ref: inputRef,
-    width: width,
-    value: value,
-    placeholder: placeholder,
-    onKeyDown: onKeyDown,
-    onChange: onChangeHandler,
-    onBlur: onBlur
-  }), React.createElement("span", {
-    ref: hiddenValueRef
-  }, value), React.createElement("span", {
-    ref: hiddenPlaceholderRef
-  }, placeholder)), React.createElement(PromptBox, {
-    onClick: () => {
-      var _inputRef$current4;
-      return (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
-    }
-  }, React.createElement(EditIcon, {
-    size: "small",
-    view: "filled"
-  })));
+  return _jsxs(RootBox, {
+    children: [_jsxs(InputBox, {
+      children: [_jsx(InputStyled, {
+        ref: inputRef,
+        width: width,
+        value: value,
+        placeholder: placeholder,
+        onKeyDown: onKeyDown,
+        onChange: onChangeHandler,
+        onBlur: onBlur
+      }), _jsx("span", {
+        ref: hiddenValueRef,
+        children: value
+      }), _jsx("span", {
+        ref: hiddenPlaceholderRef,
+        children: placeholder
+      })]
+    }), _jsx(PromptBox, {
+      onClick: () => {
+        var _inputRef$current4;
+        return (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
+      },
+      children: _jsx(EditIcon, {
+        size: "small",
+        view: "filled"
+      })
+    })]
+  });
 }