@scripso-homepad/ui 0.4.38 → 0.4.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.38",
+  "version": "0.4.40",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/PhoneInput.stories.tsx

@@ -62,8 +62,7 @@ export const Controlled: Story = {
     return (
       <View style={styles.wrapper}>
         <PhoneInput
-          label="Label"
-          placeholder="placeholder"
+          label="Հեռախոսահամար"
           countryCode={countryCode}
           onCountryCodeChange={setCountryCode}
           value={phone}

package/src/components/PhoneInput.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-native";
 import { CountryCodeSelector } from "./CountryCodeSelector";
 import { Label } from "./Label";
+import { defaultCountry } from "../data/countries";
 import {
   getInputFieldStyles,
   inputFieldMetrics,
@@ -22,6 +23,12 @@ import {
   resolveInputVisualState,
 } from "../theme/input";
 import { colors, radii, spacing } from "../theme/tokens";
+import {
+  ARMENIAN_PHONE_PLACEHOLDER,
+  DEFAULT_PHONE_COUNTRY_CODE,
+  formatNationalPhoneDisplay,
+  sanitizeNationalPhoneDigits,
+} from "../utils/phoneFormat";
 import { useApplyWebClassName } from "../utils/useApplyWebClassName";
 
 /** Keep country trigger outer box equal to the phone field (transparent focus ring). */
@@ -52,14 +59,9 @@ export interface PhoneInputProps extends Omit<TextInputProps, "style"> {
   hintClassName?: string;
 }
 
-/** National phone field: digits only (blocks pasted letters/symbols). */
-function sanitizePhoneDigits(value: string): string {
-  return value.replace(/\D/g, "");
-}
-
 export function PhoneInput({
   label,
-  countryCode,
+  countryCode = defaultCountry.code,
   onCountryCodeChange,
   error,
   hint,
@@ -76,6 +78,8 @@ export function PhoneInput({
   onFocus,
   onBlur,
   onChangeText,
+  value,
+  placeholder,
   ...props
 }: PhoneInputProps) {
   const wrapperRef = useRef<ComponentRef<typeof View>>(null);
@@ -94,6 +98,16 @@ export function PhoneInput({
     disabled: isDisabled,
   });
   const phoneFieldStyles = getInputFieldStyles(phoneVisualState);
+  const resolvedCountryCode = countryCode || DEFAULT_PHONE_COUNTRY_CODE;
+  const displayValue =
+    typeof value === "string" || typeof value === "number"
+      ? formatNationalPhoneDisplay(String(value), resolvedCountryCode)
+      : value;
+  const resolvedPlaceholder =
+    placeholder ??
+    (resolvedCountryCode === DEFAULT_PHONE_COUNTRY_CODE
+      ? ARMENIAN_PHONE_PLACEHOLDER
+      : undefined);
 
   function handleFocus(event: NativeSyntheticEvent<TextInputFocusEventData>) {
     setFocused(true);
@@ -105,8 +119,8 @@ export function PhoneInput({
     onBlur?.(event);
   }
 
-  function handleChangeText(value: string) {
-    onChangeText?.(sanitizePhoneDigits(value));
+  function handleChangeText(nextValue: string) {
+    onChangeText?.(sanitizeNationalPhoneDigits(nextValue, resolvedCountryCode));
   }
 
   const helperMessage = error ?? hint;
@@ -158,6 +172,8 @@ export function PhoneInput({
               onBlur={handleBlur}
               accessibilityState={{ disabled: isDisabled }}
               {...props}
+              value={displayValue}
+              placeholder={resolvedPlaceholder}
               onChangeText={handleChangeText}
             />
           </View>

package/src/index.ts

@@ -19,6 +19,15 @@ export type {
 export { PhoneInput } from "./components/PhoneInput";
 export type { PhoneInputProps } from "./components/PhoneInput";
 
+export {
+  ARMENIAN_PHONE_PLACEHOLDER,
+  DEFAULT_PHONE_COUNTRY_CODE,
+  formatArmenianNationalNumber,
+  formatNationalPhoneDisplay,
+  getPhoneDigits,
+  sanitizeNationalPhoneDigits,
+} from "./utils/phoneFormat";
+
 export { CountryCodeSelector } from "./components/CountryCodeSelector";
 export type { CountryCodeSelectorProps } from "./components/CountryCodeSelector";
 

package/src/utils/phoneFormat.test.ts

@@ -0,0 +1,34 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import {
+  ARMENIAN_PHONE_PLACEHOLDER,
+  formatArmenianNationalNumber,
+  formatNationalPhoneDisplay,
+  sanitizeNationalPhoneDigits,
+} from './phoneFormat';
+
+describe('phoneFormat', () => {
+  it('formats Armenia national numbers while typing', () => {
+    assert.equal(formatArmenianNationalNumber('9'), '(9');
+    assert.equal(formatArmenianNationalNumber('91'), '(91');
+    assert.equal(formatArmenianNationalNumber('914'), '(91) 4');
+    assert.equal(formatArmenianNationalNumber('9144'), '(91) 44');
+    assert.equal(formatArmenianNationalNumber('914455'), '(91) 44-55');
+    assert.equal(formatArmenianNationalNumber('91445566'), '(91) 44-55-66');
+  });
+
+  it('caps Armenia national numbers at 8 digits', () => {
+    assert.equal(sanitizeNationalPhoneDigits('9144556699', 'AM'), '91445566');
+    assert.equal(formatNationalPhoneDisplay('9144556699', 'AM'), '(91) 44-55-66');
+  });
+
+  it('leaves non-Armenia numbers as digits', () => {
+    assert.equal(formatNationalPhoneDisplay('555123456', 'GE'), '555123456');
+    assert.equal(sanitizeNationalPhoneDigits('(555) 123-456', 'GE'), '555123456');
+  });
+
+  it('exposes the Armenia placeholder mask', () => {
+    assert.equal(ARMENIAN_PHONE_PLACEHOLDER, '(00) 00-00-00');
+  });
+});

package/src/utils/phoneFormat.ts

@@ -0,0 +1,57 @@
+import { defaultCountry } from "../data/countries";
+
+export const DEFAULT_PHONE_COUNTRY_CODE = defaultCountry.code;
+const AM_NATIONAL_MAX_DIGITS = 8;
+const MAX_NATIONAL_DIGITS = 15;
+
+export function getPhoneDigits(value: string): string {
+  return value.replace(/\D/g, "");
+}
+
+/** Armenia mobile display while typing: (91) 44-55-66 */
+export function formatArmenianNationalNumber(digits: string): string {
+  const national = getPhoneDigits(digits).slice(0, AM_NATIONAL_MAX_DIGITS);
+
+  if (national.length === 0) {
+    return "";
+  }
+
+  if (national.length <= 2) {
+    return `(${national}`;
+  }
+
+  const head = national.slice(0, 2);
+  const rest = national.slice(2);
+  const groups = rest.match(/.{1,2}/g) ?? [];
+
+  return `(${head}) ${groups.join("-")}`;
+}
+
+export function formatNationalPhoneDisplay(
+  digits: string,
+  countryCode: string = DEFAULT_PHONE_COUNTRY_CODE,
+): string {
+  const national = getPhoneDigits(digits).slice(0, MAX_NATIONAL_DIGITS);
+
+  if (countryCode === DEFAULT_PHONE_COUNTRY_CODE) {
+    return formatArmenianNationalNumber(national);
+  }
+
+  return national;
+}
+
+export function sanitizeNationalPhoneDigits(
+  value: string,
+  countryCode: string = DEFAULT_PHONE_COUNTRY_CODE,
+): string {
+  const digits = getPhoneDigits(value);
+
+  if (countryCode === DEFAULT_PHONE_COUNTRY_CODE) {
+    return digits.slice(0, AM_NATIONAL_MAX_DIGITS);
+  }
+
+  return digits.slice(0, MAX_NATIONAL_DIGITS);
+}
+
+/** Placeholder mask shown for Armenia national numbers. */
+export const ARMENIAN_PHONE_PLACEHOLDER = "(00) 00-00-00";

package/src/web/components/ConfirmModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, type ReactNode } from 'react';
 
 import { Button } from '../../components/Button';
+import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
 
 export type ConfirmModalProps = {
@@ -35,6 +36,8 @@ export function ConfirmModal({
   containerClassName,
   buttonClassName,
 }: ConfirmModalProps) {
+  const backdropDismiss = useBackdropDismiss(onCancel, closeOnBackdrop);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -65,7 +68,8 @@ export function ConfirmModal({
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md bg-storm-gray-850/40"
-      onClick={closeOnBackdrop ? onCancel : undefined}
+      onPointerDown={backdropDismiss.onPointerDown}
+      onClick={backdropDismiss.onClick}
       role="presentation"
     >
       <div
@@ -77,9 +81,6 @@ export function ConfirmModal({
           'flex w-full max-w-md flex-col gap-8 rounded-3xl bg-white p-6 opacity-100 md:p-8',
           containerClassName,
         )}
-        onClick={(event) => {
-          event.stopPropagation();
-        }}
       >
         <header className="flex flex-col items-center gap-3 text-center">
           {icon ? (

package/src/web/components/Drawer.tsx

@@ -1,6 +1,7 @@
 import { X } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
 
+import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
 
 import './drawer-scroll.css';
@@ -72,6 +73,7 @@ export function Drawer({
   const [isPresent, setIsPresent] = useState(open);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
   const [isTransformSettled, setIsTransformSettled] = useState(open);
+  const backdropDismiss = useBackdropDismiss(onClose);
 
   useEffect(() => {
     if (open) {
@@ -151,7 +153,8 @@ export function Drawer({
           'absolute inset-0 z-0 cursor-pointer bg-storm-gray-850/40 backdrop-blur-[12px] transition-opacity duration-300 ease-in-out',
           isAnimatedIn ? 'opacity-100' : 'opacity-0',
         )}
-        onClick={onClose}
+        onPointerDown={backdropDismiss.onPointerDown}
+        onClick={backdropDismiss.onClick}
       />
 
       <aside

package/src/web/components/Modal.tsx

@@ -2,6 +2,7 @@ import { useEffect, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Button } from '../../components/Button';
+import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
 import './drawer-scroll.css';
 
@@ -61,6 +62,8 @@ export function Modal({
   contentClassName,
   buttonClassName,
 }: ModalProps) {
+  const backdropDismiss = useBackdropDismiss(onCancel, closeOnBackdrop);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -95,15 +98,8 @@ export function Modal({
   const modal = (
     <div
       className="fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40"
-      onClick={
-        closeOnBackdrop
-          ? (event) => {
-              if (event.target === event.currentTarget) {
-                onCancel();
-              }
-            }
-          : undefined
-      }
+      onPointerDown={backdropDismiss.onPointerDown}
+      onClick={backdropDismiss.onClick}
       role="presentation"
     >
       <div
@@ -115,9 +111,6 @@ export function Modal({
           'flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6',
           containerClassName,
         )}
-        onClick={(event) => {
-          event.stopPropagation();
-        }}
       >
         <header className={cn('flex shrink-0', icon ? 'items-center gap-2.5' : undefined)}>
           {icon ? (

package/src/web/hooks/useBackdropDismiss.ts

@@ -0,0 +1,44 @@
+import { useCallback, useRef, type MouseEvent, type PointerEvent } from 'react';
+
+type BackdropDismissHandlers = {
+  onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+  onClick: (event: MouseEvent<HTMLElement>) => void;
+};
+
+/**
+ * Dismiss only on a true outside click: pointer must both press and release
+ * on the backdrop. Dragging from inside the dialog and releasing outside
+ * must not close.
+ */
+export function useBackdropDismiss(
+  onDismiss: () => void,
+  enabled = true,
+): BackdropDismissHandlers {
+  const pointerDownOnBackdropRef = useRef(false);
+
+  const onPointerDown = useCallback(
+    (event: PointerEvent<HTMLElement>) => {
+      pointerDownOnBackdropRef.current =
+        enabled && event.target === event.currentTarget;
+    },
+    [enabled],
+  );
+
+  const onClick = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      const shouldDismiss =
+        enabled &&
+        pointerDownOnBackdropRef.current &&
+        event.target === event.currentTarget;
+
+      pointerDownOnBackdropRef.current = false;
+
+      if (shouldDismiss) {
+        onDismiss();
+      }
+    },
+    [enabled, onDismiss],
+  );
+
+  return { onPointerDown, onClick };
+}

package/src/web/index.ts

@@ -128,6 +128,7 @@ export type { ConfirmModalProps } from './components/ConfirmModal';
 
 export { useMediaQuery } from './hooks/useMediaQuery';
 export { useOnClickOutside } from './hooks/useOnClickOutside';
+export { useBackdropDismiss } from './hooks/useBackdropDismiss';
 export { cn } from './utils/cn';
 
 export type {