notionsoft-ui 1.0.20 → 1.0.22

package/src/notion-ui/phone-input/phone-input.tsx

@@ -0,0 +1,400 @@
+import { defaultCountries } from "./country-data";
+import { LazyFlag } from "./lazy-flag";
+import type { ParsedCountry } from "./type";
+import { cn } from "@/utils/cn";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+} from "react";
+import { createPortal } from "react-dom";
+
+interface VirtualListProps {
+  items: ParsedCountry[];
+  renderRow: (item: ParsedCountry, index: number) => React.ReactNode;
+  height: number;
+  ROW_HEIGHT: number;
+  BUFFER: number;
+}
+
+const VirtualList: React.FC<VirtualListProps> = ({
+  items,
+  renderRow,
+  height,
+  ROW_HEIGHT,
+  BUFFER,
+}) => {
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const totalHeight = items.length * ROW_HEIGHT;
+
+  // calculate visible indices
+  const startIndex = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - BUFFER);
+  const endIndex = Math.min(
+    items.length,
+    Math.ceil((scrollTop + height) / ROW_HEIGHT) + BUFFER
+  );
+
+  // Slice items to render
+  const visibleItems = items.slice(startIndex, endIndex);
+
+  return (
+    <div
+      className="overflow-y-auto max-h-60"
+      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+    >
+      <div style={{ height: totalHeight, position: "relative" }}>
+        {visibleItems.map((item, i) => {
+          const index = startIndex + i; // absolute index
+          return (
+            <div
+              key={`${item.iso2}-${index}`} // absolute key ensures React updates
+              style={{
+                position: "absolute",
+                top: index * ROW_HEIGHT,
+                left: 0,
+                right: 0,
+                height: ROW_HEIGHT,
+              }}
+            >
+              {renderRow(item, index)} {/* pass absolute index */}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+export type PhoneCountryPickerSize = "sm" | "md" | "lg";
+
+interface PhoneCountryPickerProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  requiredHint?: string;
+  label?: string;
+  errorMessage?: string;
+  classNames?: {
+    rootDivClassName?: string;
+    iconClassName?: string;
+  };
+  measurement?: PhoneCountryPickerSize;
+  ROW_HEIGHT?: number;
+  VISIBLE_ROWS?: number;
+  BUFFER?: number;
+}
+
+export const PhoneCountryPicker: React.FC<PhoneCountryPickerProps> = ({
+  measurement = "sm",
+  errorMessage,
+  label,
+  readOnly,
+  className,
+  classNames,
+  requiredHint,
+  value,
+  onChange,
+  ROW_HEIGHT = 32,
+  VISIBLE_ROWS = 10,
+  BUFFER = 5,
+  ...rest
+}) => {
+  const { rootDivClassName, iconClassName = "size-4" } = classNames || {};
+  const [open, setOpen] = useState(false);
+  const [country, setCountry] = useState<ParsedCountry>(defaultCountries[0]);
+  const [highlightedIndex, setHighlightedIndex] = useState<number>(0);
+  const [phone, setPhone] = useState<string>(
+    typeof value == "string" ? value : ""
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+
+  const [dropDirection, setDropDirection] = useState<"down" | "up">("down");
+
+  const hasError = !!errorMessage;
+
+  // Choose country
+  const chooseCountry = (c: ParsedCountry) => {
+    setCountry(c);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "Enter") {
+        setOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      setHighlightedIndex((prev) =>
+        Math.min(prev + 1, defaultCountries.length - 1)
+      );
+      e.preventDefault();
+    } else if (e.key === "ArrowUp") {
+      setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+      e.preventDefault();
+    } else if (e.key === "Enter") {
+      chooseCountry(defaultCountries[highlightedIndex]);
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      e.preventDefault();
+    }
+  };
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (!open || !dropdownRef.current) return;
+
+    // Get the scrollable container inside the virtual list
+    const scrollableContainer =
+      dropdownRef.current.querySelector(".overflow-y-auto");
+    if (!scrollableContainer) return;
+
+    const rowTop = highlightedIndex * ROW_HEIGHT;
+    const rowBottom = rowTop + ROW_HEIGHT;
+    const scrollContainer = scrollableContainer as HTMLDivElement;
+
+    if (rowTop < scrollContainer.scrollTop) {
+      scrollContainer.scrollTop = rowTop;
+    } else if (
+      rowBottom >
+      scrollContainer.scrollTop + ROW_HEIGHT * VISIBLE_ROWS
+    ) {
+      scrollContainer.scrollTop = rowBottom - ROW_HEIGHT * VISIBLE_ROWS;
+    }
+  }, [highlightedIndex, open]);
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        !containerRef.current?.contains(e.target as Node) &&
+        !dropdownRef.current?.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Update dropdown position
+  const updateDropdownPosition = () => {
+    const inputEl = containerRef.current;
+    const dropdownEl = dropdownRef.current;
+    if (!inputEl || !dropdownEl) return;
+
+    const rect = inputEl.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const gap = 4;
+
+    const dropdownHeight = Math.min(dropdownEl.offsetHeight || 0, 260);
+
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      setDropDirection("up");
+      setPosition({
+        top: rect.top + window.scrollY - dropdownHeight - gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    } else {
+      setDropDirection("down");
+      setPosition({
+        top: rect.bottom + window.scrollY + gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
+  };
+
+  useLayoutEffect(() => updateDropdownPosition(), [open]);
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener("resize", updateDropdownPosition);
+    window.addEventListener("scroll", updateDropdownPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateDropdownPosition);
+      window.removeEventListener("scroll", updateDropdownPosition, true);
+    };
+  }, [open]);
+
+  // Reset highlighted index when opening
+  useEffect(() => {
+    if (open) {
+      const currentIndex = defaultCountries.findIndex(
+        (c) => c.iso2 === country.iso2
+      );
+      if (currentIndex >= 0) {
+        setHighlightedIndex(currentIndex);
+      }
+    }
+  }, [open, country]);
+  const heightStyle = useMemo(
+    () =>
+      measurement == "lg"
+        ? {
+            height: "50px",
+            endContent: label
+              ? "ltr:top-[48px] rtl:top-[54px]-translate-y-1/2"
+              : "top-[26px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[48px] rtl:top-[54px] -translate-y-1/2"
+              : "top-[26px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          }
+        : measurement == "md"
+        ? {
+            height: "44px",
+            endContent: label
+              ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
+              : "top-[22px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
+              : "top-[22px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          }
+        : {
+            height: "40px",
+            endContent: label
+              ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
+              : "top-[20px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
+              : "top-[20px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          },
+    [measurement, label]
+  );
+  const readOnlyStyle = readOnly && "opacity-40";
+
+  return (
+    <div
+      className={cn(
+        rootDivClassName,
+        "relative flex flex-col w-full",
+        readOnlyStyle
+      )}
+      ref={containerRef}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Required Hint */}
+      {requiredHint && (
+        <span
+          className={cn(
+            "absolute font-semibold text-red-600 rtl:text-[13px] ltr:text-[11px] ltr:right-2.5 rtl:left-2.5",
+            heightStyle.required
+          )}
+        >
+          {requiredHint}
+        </span>
+      )}
+
+      {/* Label */}
+      {label && (
+        <label
+          htmlFor={label}
+          className={cn(
+            "font-semibold ltr:text-[13px] rtl:text-[18px] text-start inline-block pb-1"
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <div className="flex gap-2">
+        <button
+          type="button"
+          style={{
+            height: heightStyle.height,
+          }}
+          className="flex items-center dark:bg-input/30 gap-2 px-2 border rounded-sm bg-card hover:bg-primary/5 focus:outline-none focus:ring-1 focus:ring-tertiary/60"
+          onClick={() => setOpen(!open)}
+          aria-haspopup="listbox"
+          aria-expanded={open}
+        >
+          <LazyFlag iso2={country.iso2} className={iconClassName} />
+          <span className="text-primary ltr:text-sm rtl:text-sm rtl:font-semibold">
+            +{country.dialCode}
+          </span>
+        </button>
+        <input
+          ref={inputRef}
+          type="tel"
+          value={phone}
+          onChange={(e) => {
+            if (onChange) onChange(e);
+            setPhone(e.target.value);
+          }}
+          placeholder="Phone number"
+          style={{
+            height: heightStyle.height,
+          }}
+          className={cn(
+            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex w-full min-w-0 rounded-sm border px-3 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card",
+            "focus-visible:border-tertiary/60",
+            "[&::-webkit-outer-spin-button]:appearance-none",
+            "[&::-webkit-inner-spin-button]:appearance-none",
+            "[-moz-appearance:textfield] ",
+            hasError && "border-red-400",
+            className
+          )}
+          {...rest}
+          disabled={readOnly}
+        />
+      </div>
+
+      {open &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            className={cn(
+              "absolute z-50 border bg-card shadow-lg",
+              dropDirection === "down" ? "rounded-b" : "rounded-t"
+            )}
+            style={{
+              top: position.top,
+              left: position.left,
+              width: position.width,
+              maxHeight: ROW_HEIGHT * VISIBLE_ROWS, // Set maxHeight here instead
+            }}
+            role="listbox"
+          >
+            <VirtualList
+              ROW_HEIGHT={ROW_HEIGHT}
+              BUFFER={BUFFER}
+              items={defaultCountries}
+              height={ROW_HEIGHT * VISIBLE_ROWS}
+              renderRow={(c, i) => (
+                <div
+                  onClick={() => chooseCountry(c)}
+                  onMouseEnter={() => setHighlightedIndex(i)}
+                  className={`flex ltr:text-sm rtl:text-sm rtl:font-semibold items-center gap-2 px-2 py-1 cursor-pointer ${
+                    i == highlightedIndex ? "bg-primary/5" : ""
+                  }`}
+                  role="option"
+                  aria-selected={i === highlightedIndex}
+                >
+                  <LazyFlag iso2={c.iso2} className={iconClassName} />
+                  <span className="flex-1 truncate">{c.name}</span>
+                  <span>+{c.dialCode}</span>
+                </div>
+              )}
+            />
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};

package/src/notion-ui/phone-input/type.ts

@@ -0,0 +1,227 @@
+export type CountryIso2 =
+  | (string & {}) // allow any string but add autocompletion
+  | "af"
+  | "al"
+  | "dz"
+  | "ad"
+  | "ao"
+  | "ag"
+  | "ar"
+  | "am"
+  | "aw"
+  | "au"
+  | "at"
+  | "az"
+  | "bs"
+  | "bh"
+  | "bd"
+  | "bb"
+  | "by"
+  | "be"
+  | "bz"
+  | "bj"
+  | "bt"
+  | "bo"
+  | "ba"
+  | "bw"
+  | "br"
+  | "io"
+  | "bn"
+  | "bg"
+  | "bf"
+  | "bi"
+  | "kh"
+  | "cm"
+  | "ca"
+  | "cv"
+  | "bq"
+  | "cf"
+  | "td"
+  | "cl"
+  | "cn"
+  | "co"
+  | "km"
+  | "cd"
+  | "cg"
+  | "cr"
+  | "ci"
+  | "hr"
+  | "cu"
+  | "cw"
+  | "cy"
+  | "cz"
+  | "dk"
+  | "dj"
+  | "dm"
+  | "do"
+  | "ec"
+  | "eg"
+  | "sv"
+  | "gq"
+  | "er"
+  | "ee"
+  | "et"
+  | "fj"
+  | "fo"
+  | "fi"
+  | "fr"
+  | "gf"
+  | "pf"
+  | "ga"
+  | "gm"
+  | "ge"
+  | "de"
+  | "gh"
+  | "gr"
+  | "gd"
+  | "gp"
+  | "gu"
+  | "gt"
+  | "gn"
+  | "gw"
+  | "gy"
+  | "ht"
+  | "hn"
+  | "hk"
+  | "hu"
+  | "is"
+  | "in"
+  | "id"
+  | "ir"
+  | "iq"
+  | "ie"
+  | "il"
+  | "it"
+  | "jm"
+  | "jp"
+  | "jo"
+  | "kz"
+  | "ke"
+  | "ki"
+  | "xk"
+  | "kw"
+  | "kg"
+  | "la"
+  | "lv"
+  | "lb"
+  | "ls"
+  | "lr"
+  | "ly"
+  | "li"
+  | "lt"
+  | "lu"
+  | "mo"
+  | "mk"
+  | "mg"
+  | "mw"
+  | "my"
+  | "mv"
+  | "ml"
+  | "mt"
+  | "mh"
+  | "mq"
+  | "mr"
+  | "mu"
+  | "mx"
+  | "fm"
+  | "md"
+  | "mc"
+  | "mn"
+  | "me"
+  | "ma"
+  | "mz"
+  | "mm"
+  | "na"
+  | "nr"
+  | "np"
+  | "nl"
+  | "nc"
+  | "nz"
+  | "ni"
+  | "ne"
+  | "ng"
+  | "kp"
+  | "no"
+  | "om"
+  | "pk"
+  | "pw"
+  | "ps"
+  | "pa"
+  | "pg"
+  | "py"
+  | "pe"
+  | "ph"
+  | "pl"
+  | "pm"
+  | "pt"
+  | "pr"
+  | "qa"
+  | "re"
+  | "ro"
+  | "ru"
+  | "rw"
+  | "kn"
+  | "lc"
+  | "vc"
+  | "ws"
+  | "sm"
+  | "st"
+  | "sa"
+  | "sn"
+  | "rs"
+  | "sc"
+  | "sl"
+  | "sg"
+  | "sk"
+  | "si"
+  | "sb"
+  | "so"
+  | "za"
+  | "kr"
+  | "ss"
+  | "es"
+  | "lk"
+  | "sd"
+  | "sr"
+  | "sz"
+  | "se"
+  | "ch"
+  | "sy"
+  | "tw"
+  | "tj"
+  | "tz"
+  | "th"
+  | "tl"
+  | "tg"
+  | "to"
+  | "tt"
+  | "tn"
+  | "tr"
+  | "tm"
+  | "tv"
+  | "ug"
+  | "ua"
+  | "ae"
+  | "gb"
+  | "us"
+  | "uy"
+  | "uz"
+  | "vu"
+  | "va"
+  | "ve"
+  | "vn"
+  | "wf"
+  | "ye"
+  | "yt"
+  | "zm"
+  | "zw";
+type FormatConfig = Record<string, string> & { default: string };
+
+export interface ParsedCountry {
+  name: string;
+  iso2: CountryIso2;
+  dialCode: string;
+  format?: string | FormatConfig; // make sure this line exists
+  priority?: number;
+  areaCodes?: string[];
+}

package/src/notion-ui/phone-input/utils.ts

@@ -0,0 +1,23 @@
+const alphabet = "abcdefghijklmnopqrstuvwxyz";
+const A_LETTER_CODEPOINT = "1f1e6";
+
+const incrementCodepoint = (codePoint: string, incrementBy: number): string => {
+  const decimal = parseInt(codePoint, 16);
+  return (decimal + incrementBy).toString(16);
+};
+
+const codepoints: Record<string, string> = alphabet.split("").reduce(
+  (obj, currentLetter, index) => ({
+    ...obj,
+    [currentLetter]: incrementCodepoint(A_LETTER_CODEPOINT, index),
+  }),
+  {}
+);
+export const getFlagCodepoint = (iso2: string) => {
+  if (!iso2 || iso2.length !== 2) return "";
+  const lower = iso2.toLowerCase();
+  const first = codepoints[lower[0]];
+  const second = codepoints[lower[1]];
+  if (!first || !second) return "";
+  return `${first}-${second}`;
+};