@adam-milo/ui 1.0.33 → 1.0.34

package/dist/index12.js

@@ -1,125 +1,325 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { cn } from "./index23.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useId, useRef, useEffect, useCallback } from "react";
+import { cn } from "./index31.js";
+import { Icon } from "@adam-milo/icons";
+import { commonCountries, getPhoneMask, getPhoneDigits, formatPhoneNumber } from "./index32.js";
+import { allCountries, defaultCountries, defaultPhoneMask, getCountriesByDialCode, getCountryByCode, getCountryByDialCode, isValidPhoneLength, phoneMasks, searchCountries } from "./index32.js";
 /* empty css        */
-const Card = forwardRef(
+const PhoneInput = forwardRef(
   ({
-    variant = "default",
-    className,
-    children,
+    label,
+    error,
+    helperText,
+    fullWidth = true,
+    value = "",
+    onChange,
+    countryCode = "US",
+    onCountryChange,
+    countries = commonCountries,
+    enableFormatting = true,
+    onValidationChange,
+    disabled,
+    required,
+    placeholder,
+    id: providedId,
     "data-cy": dataCy,
     "data-testid": dataTestId,
+    className,
+    onFocus,
+    onBlur,
     ...props
   }, ref) => {
-    const finalDataCy = dataCy || `card-${variant}`;
-    const finalTestId = dataTestId || `card-${variant}`;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("card", `card--${variant}`, className),
-        "data-cy": finalDataCy,
-        "data-testid": finalTestId,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Card.displayName = "Card";
-const CardHeader = forwardRef(
-  ({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-    const finalDataCy = dataCy || "card-header";
-    const finalTestId = dataTestId || "card-header";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("card-header", className),
-        "data-cy": finalDataCy,
-        "data-testid": finalTestId,
-        ...props
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const errorId = `${id}-error`;
+    const helperId = `${id}-helper`;
+    const listboxId = `${id}-listbox`;
+    const wrapperRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const triggerRef = useRef(null);
+    const finalDataCy = dataCy || "phone-input";
+    const finalTestId = dataTestId || "phone-input";
+    const selectedCountry = countries.find((c) => c.code === countryCode) || countries[0];
+    const phoneMask = getPhoneMask(countryCode);
+    const displayPlaceholder = placeholder || phoneMask.placeholder;
+    const displayLabel = label && required && !label.includes("*") ? `${label}*` : label;
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsDropdownOpen(false);
+        }
+      };
+      if (isDropdownOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
       }
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [isDropdownOpen]);
+    const handleCountrySelect = useCallback(
+      (country) => {
+        onCountryChange == null ? void 0 : onCountryChange(country);
+        setIsDropdownOpen(false);
+        setTimeout(() => {
+          var _a;
+          const input = (_a = wrapperRef.current) == null ? void 0 : _a.querySelector("input");
+          input == null ? void 0 : input.focus();
+        }, 0);
+      },
+      [onCountryChange]
     );
-  }
-);
-CardHeader.displayName = "CardHeader";
-const CardTitle = forwardRef(
-  ({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-    const finalDataCy = dataCy || "card-title";
-    const finalTestId = dataTestId || "card-title";
-    return (
-      // eslint-disable-next-line jsx-a11y/heading-has-content
-      /* @__PURE__ */ jsx(
-        "h3",
-        {
-          ref,
-          className: cn("card-title", className),
-          "data-cy": finalDataCy,
-          "data-testid": finalTestId,
-          ...props
+    const handleDropdownKeyDown = useCallback(
+      (e) => {
+        var _a;
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex((prev) => Math.min(prev + 1, countries.length - 1));
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault();
+            handleCountrySelect(countries[highlightedIndex]);
+            break;
+          case "Escape":
+            e.preventDefault();
+            setIsDropdownOpen(false);
+            (_a = triggerRef.current) == null ? void 0 : _a.focus();
+            break;
+          case "Tab":
+            setIsDropdownOpen(false);
+            break;
         }
-      )
+      },
+      [countries, highlightedIndex, handleCountrySelect]
     );
-  }
-);
-CardTitle.displayName = "CardTitle";
-const CardDescription = forwardRef(
-  ({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-    const finalDataCy = dataCy || "card-description";
-    const finalTestId = dataTestId || "card-description";
-    return /* @__PURE__ */ jsx(
-      "p",
-      {
-        ref,
-        className: cn("card-description", className),
-        "data-cy": finalDataCy,
-        "data-testid": finalTestId,
-        ...props
+    const handleTriggerKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+        e.preventDefault();
+        setIsDropdownOpen(true);
+        const index = countries.findIndex((c) => c.code === countryCode);
+        setHighlightedIndex(index === -1 ? 0 : index);
       }
-    );
-  }
-);
-CardDescription.displayName = "CardDescription";
-const CardContent = forwardRef(
-  ({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-    const finalDataCy = dataCy || "card-content";
-    const finalTestId = dataTestId || "card-content";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("card-content", className),
-        "data-cy": finalDataCy,
-        "data-testid": finalTestId,
-        ...props
+    };
+    const handleInputChange = (e) => {
+      const inputValue = e.target.value;
+      if (enableFormatting) {
+        const digits = getPhoneDigits(inputValue);
+        const limitedDigits = digits.slice(0, phoneMask.maxLength);
+        const formattedValue = formatPhoneNumber(limitedDigits, countryCode);
+        onChange == null ? void 0 : onChange(formattedValue);
+        const isValid = limitedDigits.length === phoneMask.maxLength;
+        onValidationChange == null ? void 0 : onValidationChange(isValid);
+      } else {
+        const numericValue = inputValue.replace(/[^0-9]/g, "");
+        onChange == null ? void 0 : onChange(numericValue);
+        const isValid = numericValue.length === phoneMask.maxLength;
+        onValidationChange == null ? void 0 : onValidationChange(isValid);
       }
-    );
-  }
-);
-CardContent.displayName = "CardContent";
-const CardFooter = forwardRef(
-  ({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-    const finalDataCy = dataCy || "card-footer";
-    const finalTestId = dataTestId || "card-footer";
-    return /* @__PURE__ */ jsx(
+    };
+    const handleInputFocus = (e) => {
+      setIsFocused(true);
+      onFocus == null ? void 0 : onFocus(e);
+    };
+    const handleInputBlur = (e) => {
+      setIsFocused(false);
+      onBlur == null ? void 0 : onBlur(e);
+    };
+    const inputState = disabled ? "disabled" : error ? "error" : isFocused || isDropdownOpen ? "focus" : "idle";
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref,
-        className: cn("card-footer", className),
-        "data-cy": finalDataCy,
-        "data-testid": finalTestId,
-        ...props
+        ref: wrapperRef,
+        className: cn("phone-input-wrapper", fullWidth && "phone-input-wrapper--full-width"),
+        "data-cy": `${finalDataCy}-wrapper`,
+        "data-testid": `${finalTestId}-wrapper`,
+        children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              className: "phone-input__label",
+              "data-cy": `${finalDataCy}-label`,
+              "data-testid": `${finalTestId}-label`,
+              children: displayLabel
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "phone-input__container",
+                inputState === "focus" && "phone-input__container--focus",
+                inputState === "error" && "phone-input__container--error",
+                inputState === "disabled" && "phone-input__container--disabled"
+              ),
+              "data-state": inputState,
+              "data-cy": `${finalDataCy}-container`,
+              "data-testid": `${finalTestId}-container`,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    ref: triggerRef,
+                    type: "button",
+                    className: "phone-input__country-trigger",
+                    onClick: () => !disabled && setIsDropdownOpen(!isDropdownOpen),
+                    onKeyDown: handleTriggerKeyDown,
+                    disabled,
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": isDropdownOpen,
+                    "aria-controls": listboxId,
+                    "aria-label": `Select country. Current: ${selectedCountry.name}`,
+                    "data-cy": `${finalDataCy}-country-trigger`,
+                    "data-testid": `${finalTestId}-country-trigger`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "phone-input__flag",
+                          "data-cy": `${finalDataCy}-flag`,
+                          "data-testid": `${finalTestId}-flag`,
+                          children: selectedCountry.flag
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          name: "ChevronDownIcon",
+                          size: "sm",
+                          color: isFocused || isDropdownOpen ? "clickable" : "text",
+                          decorative: true,
+                          "data-cy": `${finalDataCy}-chevron`
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "phone-input__dial-code",
+                    "data-cy": `${finalDataCy}-dial-code`,
+                    "data-testid": `${finalTestId}-dial-code`,
+                    children: selectedCountry.dialCode
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref,
+                    id,
+                    type: "tel",
+                    inputMode: "numeric",
+                    value,
+                    onChange: handleInputChange,
+                    onFocus: handleInputFocus,
+                    onBlur: handleInputBlur,
+                    placeholder: displayPlaceholder,
+                    disabled,
+                    required,
+                    className: cn("phone-input__input", className),
+                    "aria-invalid": error ? "true" : "false",
+                    "aria-required": required ? "true" : void 0,
+                    "aria-describedby": error ? errorId : helperText ? helperId : void 0,
+                    "data-cy": finalDataCy,
+                    "data-testid": finalTestId,
+                    ...props
+                  }
+                )
+              ]
+            }
+          ),
+          isDropdownOpen && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: dropdownRef,
+              id: listboxId,
+              role: "listbox",
+              "aria-label": "Select country",
+              className: "phone-input__dropdown",
+              tabIndex: -1,
+              onKeyDown: handleDropdownKeyDown,
+              "data-cy": `${finalDataCy}-dropdown`,
+              "data-testid": `${finalTestId}-dropdown`,
+              children: countries.map((country, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "option",
+                  "aria-selected": country.code === countryCode,
+                  className: cn(
+                    "phone-input__option",
+                    country.code === countryCode && "phone-input__option--selected",
+                    index === highlightedIndex && "phone-input__option--highlighted"
+                  ),
+                  onClick: () => handleCountrySelect(country),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleCountrySelect(country);
+                    }
+                  },
+                  onMouseEnter: () => setHighlightedIndex(index),
+                  tabIndex: index === highlightedIndex ? 0 : -1,
+                  "data-cy": `${finalDataCy}-option-${country.code.toLowerCase()}`,
+                  "data-testid": `${finalTestId}-option-${country.code.toLowerCase()}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "phone-input__option-flag", children: country.flag }),
+                    /* @__PURE__ */ jsx("span", { className: "phone-input__option-name", children: country.name }),
+                    /* @__PURE__ */ jsx("span", { className: "phone-input__option-dial-code", children: country.dialCode })
+                  ]
+                },
+                country.code
+              ))
+            }
+          ),
+          error && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: errorId,
+              className: "phone-input__error",
+              role: "alert",
+              "data-cy": `${finalDataCy}-error`,
+              "data-testid": `${finalTestId}-error`,
+              children: error
+            }
+          ),
+          helperText && !error && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: helperId,
+              className: "phone-input__helper",
+              "data-cy": `${finalDataCy}-helper`,
+              "data-testid": `${finalTestId}-helper`,
+              children: helperText
+            }
+          )
+        ]
       }
     );
   }
 );
-CardFooter.displayName = "CardFooter";
+PhoneInput.displayName = "PhoneInput";
 export {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle
+  PhoneInput,
+  allCountries,
+  commonCountries,
+  defaultCountries,
+  defaultPhoneMask,
+  formatPhoneNumber,
+  getCountriesByDialCode,
+  getCountryByCode,
+  getCountryByDialCode,
+  getPhoneDigits,
+  getPhoneMask,
+  isValidPhoneLength,
+  phoneMasks,
+  searchCountries
 };

package/dist/index13.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("react"),t=require("./index23.cjs");;/* empty css          */const d=e.forwardRef(({columns:e,data:d,striped:r=!1,hoverable:l=!1,className:s,"data-cy":c,"data-testid":i,...y},o)=>{const b=c||"datatable",n=i||"datatable";return a.jsx("div",{className:"datatable-wrapper","data-cy":`${b}-wrapper`,"data-testid":`${n}-wrapper`,children:a.jsxs("table",{ref:o,className:t.cn("datatable",s),"data-cy":b,"data-testid":n,...y,children:[a.jsx("thead",{className:"datatable__head","data-cy":`${b}-head`,"data-testid":`${n}-head`,children:a.jsx("tr",{children:e.map(e=>a.jsx("th",{className:"datatable__header-cell","data-cy":`${b}-header-${e.key}`,"data-testid":`${n}-header-${e.key}`,children:e.header},e.key))})}),a.jsx("tbody",{"data-cy":`${b}-body`,"data-testid":`${n}-body`,children:0===d.length?a.jsx("tr",{children:a.jsx("td",{colSpan:e.length,className:"datatable__empty","data-cy":`${b}-empty`,"data-testid":`${n}-empty`,children:"No data available"})}):d.map((d,s)=>a.jsx("tr",{className:t.cn("datatable__body-row",l&&"datatable__body-row--hoverable",r&&"datatable__body-row--striped"),"data-cy":`${b}-row-${s}`,"data-testid":`${n}-row-${s}`,children:e.map(e=>a.jsx("td",{className:"datatable__body-cell","data-cy":`${b}-cell-${s}-${e.key}`,"data-testid":`${n}-cell-${s}-${e.key}`,children:String(d[e.key]??"")},e.key))},s))})]})})});d.displayName="DataTable",exports.DataTable=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("./index31.cjs");;/* empty css          */const r=t.forwardRef(({length:r=4,label:l,value:n="",onChange:i,onComplete:s,error:c,helperText:o,disabled:u=!1,autoFocus:p=!1,fullWidth:d=!1,centered:f=!1,type:b="numeric",required:h=!1,"data-cy":g,"data-testid":y},m)=>{const $=t.useId(),_=`${$}-error`,x=`${$}-helper`,k=g||"otp-input",v=y||"otp-input",D=t.useRef([]),[j,C]=t.useState(()=>n.split("").slice(0,r).concat(Array(r).fill("")).slice(0,r));t.useEffect(()=>{const e=n.split("").slice(0,r).concat(Array(r).fill("")).slice(0,r);C(e)},[n,r]);const w=t.useCallback(e=>"numeric"===b?/^\d$/.test(e):/^[a-zA-Z0-9]$/.test(e),[b]),A=t.useCallback(e=>{C(e);const t=e.join("");null==i||i(t),e.every(e=>""!==e)&&e.length===r&&(null==s||s(t))},[i,s,r]),I=t.useCallback(e=>{const t=D.current[e];t&&(t.focus(),t.select())},[]),N=t.useCallback((e,t)=>{const a=t.target.value;if(1===a.length&&w(a)){const t=[...j];t[e]=a,A(t),e<r-1&&I(e+1)}else if(a.length>1){const t=a.split("").filter(w),l=[...j];t.forEach((t,a)=>{e+a<r&&(l[e+a]=t)}),A(l);const n=l.findIndex(e=>""===e);I(-1===n?r-1:n)}},[j,r,w,A,I]),q=t.useCallback((e,t)=>{switch(t.key){case"Backspace":if(t.preventDefault(),j[e]){const t=[...j];t[e]="",A(t)}else if(e>0){const t=[...j];t[e-1]="",A(t),I(e-1)}break;case"Delete":if(t.preventDefault(),j[e]){const t=[...j];t[e]="",A(t)}break;case"ArrowLeft":t.preventDefault(),e>0&&I(e-1);break;case"ArrowRight":t.preventDefault(),e<r-1&&I(e+1);break;case"Home":t.preventDefault(),I(0);break;case"End":t.preventDefault(),I(r-1);break;default:if(1===t.key.length&&w(t.key)){t.preventDefault();const a=[...j];a[e]=t.key,A(a),e<r-1&&I(e+1)}}},[j,r,w,A,I]),E=t.useCallback((e,t)=>{t.preventDefault();const a=t.clipboardData.getData("text").split("").filter(w);if(0===a.length)return;const l=[...j];a.forEach((t,a)=>{e+a<r&&(l[e+a]=t)}),A(l);const n=l.findIndex(e=>""===e);I(-1===n?r-1:n)},[j,r,w,A,I]),P=t.useCallback(e=>{e.target.select()},[]);return t.useImperativeHandle(m,()=>({focus:()=>{const e=j.findIndex(e=>""===e);I(-1===e?r-1:e)},clear:()=>{const e=Array(r).fill("");A(e),I(0)},getValue:()=>j.join("")}),[j,r,I,A]),t.useEffect(()=>{p&&!u&&I(0)},[p,u,I]),e.jsxs("div",{className:a.cn("otp-input-wrapper",d&&"otp-input-wrapper--full-width"),"data-cy":`${k}-wrapper`,"data-testid":`${v}-wrapper`,children:[l&&e.jsx("label",{className:a.cn("otp-input__label",c&&"otp-input__label--error",u&&"otp-input__label--disabled"),"data-cy":`${k}-label`,"data-testid":`${v}-label`,children:l}),e.jsx("div",{className:a.cn("otp-input__container",f&&"otp-input__container--centered"),role:"group","aria-label":l||"OTP Input","data-cy":`${k}-container`,"data-testid":`${v}-container`,children:Array.from({length:r},(t,l)=>e.jsx("input",{ref:e=>{D.current[l]=e},type:"text",inputMode:"numeric"===b?"numeric":"text",pattern:"numeric"===b?"[0-9]*":"[a-zA-Z0-9]*",maxLength:1,value:j[l]||"",onChange:e=>N(l,e),onKeyDown:e=>q(l,e),onPaste:e=>E(l,e),onFocus:P,disabled:u,required:h,"aria-label":`Digit ${l+1} of ${r}`,"aria-invalid":c?"true":"false","aria-describedby":c?_:o?x:void 0,className:a.cn("otp-input__digit",j[l]&&"otp-input__digit--filled",c&&"otp-input__digit--error"),"data-cy":`${k}-digit-${l}`,"data-testid":`${v}-digit-${l}`,autoComplete:"one-time-code"},l))}),c&&e.jsx("span",{id:_,className:"otp-input__error",role:"alert","data-cy":`${k}-error`,"data-testid":`${v}-error`,children:c}),o&&!c&&e.jsx("span",{id:x,className:"otp-input__helper","data-cy":`${k}-helper`,"data-testid":`${v}-helper`,children:o})]})});r.displayName="OTPInput",exports.OTPInput=r;