@scripso-homepad/ui 0.4.39 → 0.4.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.39",
+  "version": "0.4.41",
   "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/Drawer.tsx

@@ -1,5 +1,6 @@
 import { X } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
@@ -10,6 +11,7 @@ const DRAWER_TRANSITION_MS = 300;
 
 let bodyScrollLockCount = 0;
 let previousBodyOverflow = '';
+let previousHtmlOverflow = '';
 
 function lockBodyScroll() {
   if (typeof document === 'undefined') {
@@ -18,7 +20,9 @@ function lockBodyScroll() {
 
   if (bodyScrollLockCount === 0) {
     previousBodyOverflow = document.body.style.overflow;
+    previousHtmlOverflow = document.documentElement.style.overflow;
     document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
   }
 
   bodyScrollLockCount += 1;
@@ -33,7 +37,9 @@ function unlockBodyScroll() {
 
   if (bodyScrollLockCount === 0) {
     document.body.style.overflow = previousBodyOverflow;
+    document.documentElement.style.overflow = previousHtmlOverflow;
     previousBodyOverflow = '';
+    previousHtmlOverflow = '';
   }
 }
 
@@ -141,9 +147,9 @@ export function Drawer({
     return null;
   }
 
-  return (
+  const drawer = (
     <div
-      className="fixed inset-0 z-50 flex justify-end p-2 max-md:p-0"
+      className="fixed inset-0 z-50 flex justify-end overscroll-none p-2 max-md:p-0"
       role="presentation"
     >
       <button
@@ -163,7 +169,7 @@ export function Drawer({
         aria-labelledby="homepad-drawer-title"
         {...(subtitle ? { 'aria-describedby': 'homepad-drawer-subtitle' } : {})}
         className={cn(
-          'relative z-10 flex h-[calc(100dvh-16px)] min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:h-dvh max-md:rounded-none',
+          'relative z-10 flex h-full max-h-full min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:rounded-none',
           // Keep GPU transform only while animating — settled translate-x-0 blurs text.
           !isTransformSettled && 'will-change-transform',
           isAnimatedIn
@@ -229,4 +235,6 @@ export function Drawer({
       </aside>
     </div>
   );
+
+  return typeof document !== 'undefined' ? createPortal(drawer, document.body) : drawer;
 }

package/src/web/components/table/TablePrimitives.tsx

@@ -111,22 +111,22 @@ export function TableHead({
   sortDirection = null,
   onSort,
   children,
+  onClick,
+  onKeyDown,
   ...props
 }: TableHeadProps) {
   const isSortable = sortable && onSort != null;
 
   const content = isSortable ? (
-    <button
-      type="button"
-      onClick={onSort}
+    <span
       className={cn(
-        'inline-flex w-full cursor-pointer items-center gap-2.5 border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit transition-colors hover:text-storm-gray-500',
+        'inline-flex w-full items-center gap-2.5 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit',
         tableHeadSortButtonAlignClasses[align],
       )}
     >
       <span>{children}</span>
       <TableSortIcon direction={sortDirection} />
-    </button>
+    </span>
   ) : (
     children
   );
@@ -138,10 +138,31 @@ export function TableHead({
         tableHeadPaddingClassName,
         tableHeaderClassName,
         !isSortable && tableAlignClasses[align],
+        isSortable && 'cursor-pointer select-none hover:text-storm-gray-500',
         className,
       )}
       aria-sort={resolveAriaSort(sortDirection, isSortable)}
+      tabIndex={isSortable ? 0 : undefined}
       {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || !isSortable) {
+          return;
+        }
+
+        onSort();
+      }}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || !isSortable) {
+          return;
+        }
+
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onSort();
+        }
+      }}
     >
       {content}
     </th>

package/src/web/layout/DashboardLayout.tsx

@@ -27,11 +27,11 @@ export function DashboardLayout({
   mainClassName,
 }: DashboardLayoutProps) {
   return (
-    <div className={cn('flex h-screen min-w-0 overflow-hidden flex-row bg-storm-gray-0', className)}>
-      <div className="max-md:contents md:h-screen md:shrink-0">
+    <div className={cn('flex h-dvh min-w-0 overflow-hidden flex-row bg-storm-gray-0', className)}>
+      <div className="max-md:contents md:h-dvh md:shrink-0">
         <Sidebar {...sidebar} />
       </div>
-      <div className="flex h-screen min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+      <div className="flex h-dvh min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
         <SidebarMobileHeader {...mobileHeader} />
         <AppHeader {...header} />
         <main className={mainClassName ?? 'min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto p-4 xl:p-6'}>{children}</main>

package/src/web/layout/Sidebar.tsx

@@ -173,12 +173,12 @@ export function Sidebar({
       />
 
       {showCollapsedRail && mobileOpen ? (
-        <div className="h-screen w-[76px] shrink-0" aria-hidden />
+        <div className="h-dvh w-[76px] shrink-0" aria-hidden />
       ) : null}
 
       <aside
         className={cn(
-          'fixed inset-y-0 left-0 z-50 flex h-screen w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl',
+          'fixed inset-y-0 left-0 z-50 flex h-dvh w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl',
           'transition-[transform,width,padding,gap] duration-300 ease-in-out will-change-[transform,width]',
           mobileOpen ? 'translate-x-0' : '-translate-x-full pointer-events-none',
           'md:relative md:z-auto md:w-[76px] md:translate-x-0 md:pointer-events-auto md:shadow-none md:items-center md:gap-2 md:px-3 md:py-4',