@fangzsx/component-library 0.0.28 → 0.0.30

package/dist/components/PhoneAndCountryDropdown/index.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+
+export interface CountryOption {
+    iso: string;
+    country: string;
+    code: string;
+}
+export interface CountryValue {
+    iso: string | null;
+    country: string | null;
+    dialCode: string | null;
+    countryCode: string | null;
+}
+export declare const PH_DEFAULT: CountryValue;
+interface BaseProps {
+    options: CountryOption[];
+    value?: CountryValue;
+    onChange: (value: CountryValue) => void;
+    searchPlaceholder?: string;
+    error?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    renderFlag?: (iso: string) => React.ReactNode;
+}
+interface PhoneMode extends BaseProps {
+    mode: "phone";
+    phoneNumber: string;
+    onPhoneChange: (value: string) => void;
+    phoneError?: boolean;
+    phoneHelperText?: string;
+}
+interface CountryMode extends BaseProps {
+    mode: "country";
+    phoneNumber?: never;
+    onPhoneChange?: never;
+    phoneError?: never;
+    phoneHelperText?: never;
+}
+export type PhoneAndCountryDropdownProps = PhoneMode | CountryMode;
+export declare function PhoneAndCountryDropdown(props: PhoneAndCountryDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PhoneAndCountryDropdown/index.js

@@ -0,0 +1,295 @@
+import { jsx as e, jsxs as t, Fragment as N } from "react/jsx-runtime";
+import { c as B } from "../../createSvgIcon-C0YrvByi.js";
+import { Box as d, Typography as p, TextField as K, Popper as U, ClickAwayListener as Y, Paper as _, InputBase as G, InputAdornment as J, List as Q, ListItemButton as V, ListItemIcon as X, ListItemText as Z } from "@mui/material";
+import { useState as v, useRef as D, useEffect as $, useMemo as ee } from "react";
+const H = B(/* @__PURE__ */ e("path", {
+  d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
+}), "KeyboardArrowDown"), oe = B(/* @__PURE__ */ e("path", {
+  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+}), "Search"), re = {
+  iso: "PH",
+  country: "Philippines",
+  dialCode: "63",
+  countryCode: "PH"
+}, R = (n) => n.replace(/-/g, "");
+function ne(n) {
+  return n.toUpperCase().split("").map((l) => String.fromCodePoint(127397 + l.charCodeAt(0))).join("");
+}
+function te(n) {
+  return /* @__PURE__ */ e(
+    d,
+    {
+      component: "span",
+      sx: {
+        fontSize: 20,
+        lineHeight: 1,
+        width: 24,
+        textAlign: "center",
+        userSelect: "none"
+      },
+      children: ne(n)
+    }
+  );
+}
+function k({
+  anchorEl: n,
+  open: l,
+  options: x,
+  searchValue: o,
+  onSearchChange: w,
+  onSelect: y,
+  onClose: m,
+  showDialCode: C,
+  searchPlaceholder: i = "Search country or code",
+  renderFlag: u
+}) {
+  const f = D(null);
+  $(() => {
+    l && setTimeout(() => f.current?.focus(), 50);
+  }, [l]);
+  const c = ee(() => {
+    const r = o.toLowerCase(), h = R(r);
+    return x.filter(
+      (a) => a.country.toLowerCase().includes(r) || a.code.includes(r) || R(a.code).includes(h) || a.iso.toLowerCase().includes(r)
+    );
+  }, [x, o]);
+  return !l || !n ? null : /* @__PURE__ */ e(
+    U,
+    {
+      open: l,
+      anchorEl: n,
+      placement: "bottom-start",
+      disablePortal: !1,
+      sx: {
+        zIndex: 1300,
+        width: Math.max(n.offsetWidth, 340)
+      },
+      modifiers: [
+        { name: "offset", options: { offset: [0, 4] } },
+        { name: "preventOverflow", options: { boundary: "viewport" } }
+      ],
+      children: /* @__PURE__ */ e(Y, { onClickAway: m, children: /* @__PURE__ */ t(_, { elevation: 4, sx: { borderRadius: 1.5, overflow: "hidden" }, children: [
+        /* @__PURE__ */ e(d, { sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ e(
+          G,
+          {
+            inputRef: f,
+            fullWidth: !0,
+            placeholder: i,
+            value: o,
+            onChange: (r) => w(r.target.value),
+            startAdornment: /* @__PURE__ */ e(J, { position: "start", children: /* @__PURE__ */ e(oe, { fontSize: "small", color: "action" }) }),
+            sx: { fontSize: 14 }
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          Q,
+          {
+            dense: !0,
+            sx: {
+              maxHeight: 240,
+              overflowY: "auto",
+              py: 0.5
+            },
+            children: [
+              c.length === 0 && /* @__PURE__ */ e(p, { variant: "body2", color: "text.secondary", sx: { px: 2, py: 1 }, children: "No results found" }),
+              c.map((r) => /* @__PURE__ */ t(
+                V,
+                {
+                  onClick: () => y(r),
+                  sx: { px: 2, py: 0.75 },
+                  children: [
+                    /* @__PURE__ */ e(X, { sx: { minWidth: 36 }, children: u(r.iso) }),
+                    /* @__PURE__ */ e(
+                      Z,
+                      {
+                        primary: r.country,
+                        primaryTypographyProps: { fontSize: 14 }
+                      }
+                    ),
+                    C && /* @__PURE__ */ t(p, { variant: "body2", color: "text.secondary", sx: { ml: 1, whiteSpace: "nowrap" }, children: [
+                      "+",
+                      r.code
+                    ] })
+                  ]
+                },
+                r.iso
+              ))
+            ]
+          }
+        )
+      ] }) })
+    }
+  );
+}
+function ae(n) {
+  const {
+    mode: l,
+    options: x,
+    value: o = re,
+    onChange: w,
+    searchPlaceholder: y,
+    error: m = !1,
+    helperText: C,
+    disabled: i = !1,
+    renderFlag: u = te
+  } = n, [f, c] = v(!1), [r, h] = v(""), [a, E] = v(!1), [b, S] = v(!1), g = D(null), P = (s) => {
+    w({
+      iso: s.iso,
+      country: s.country,
+      dialCode: s.code,
+      countryCode: s.iso
+    }), c(!1), h("");
+  }, I = () => {
+    c(!1), h("");
+  };
+  if (l === "phone") {
+    const { phoneNumber: s, onPhoneChange: q, phoneError: F, phoneHelperText: M } = n, O = F || a && !s.trim(), L = M || (a && !s.trim() ? "Phone number is required" : void 0), W = m || b && !o.iso, A = C || (b && !o.iso ? "Country is required" : void 0);
+    return /* @__PURE__ */ t(d, { sx: { position: "relative" }, children: [
+      /* @__PURE__ */ t(d, { sx: { display: "flex" }, children: [
+        /* @__PURE__ */ t(
+          d,
+          {
+            ref: g,
+            tabIndex: 0,
+            onClick: () => !i && c(!0),
+            onBlur: () => S(!0),
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.75,
+              px: 1.5,
+              height: 40,
+              border: "1px solid",
+              borderColor: W ? "error.main" : "rgba(0,0,0,0.23)",
+              borderRight: "none",
+              borderRadius: "4px 0 0 4px",
+              cursor: i ? "default" : "pointer",
+              bgcolor: "background.paper",
+              "&:hover": i ? {} : { borderColor: "rgba(0,0,0,0.87)" },
+              minWidth: 110,
+              flexShrink: 0,
+              boxSizing: "border-box",
+              outline: "none"
+            },
+            children: [
+              o.iso && /* @__PURE__ */ t(N, { children: [
+                u(o.iso),
+                /* @__PURE__ */ t(p, { variant: "body2", sx: { whiteSpace: "nowrap" }, children: [
+                  "+",
+                  o.dialCode
+                ] })
+              ] }),
+              /* @__PURE__ */ e(
+                H,
+                {
+                  fontSize: "small",
+                  sx: { ml: "auto", color: "action.active" }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          K,
+          {
+            fullWidth: !0,
+            size: "small",
+            type: "tel",
+            value: s,
+            onChange: (j) => q(j.target.value),
+            onBlur: () => E(!0),
+            disabled: i,
+            error: O,
+            sx: {
+              "& .MuiOutlinedInput-root": {
+                borderRadius: "0 4px 4px 0"
+              }
+            }
+          }
+        )
+      ] }),
+      (A || L) && /* @__PURE__ */ e(
+        p,
+        {
+          variant: "caption",
+          color: "error",
+          sx: { display: "block", mt: 0.5, ml: 0 },
+          children: A || L
+        }
+      ),
+      /* @__PURE__ */ e(
+        k,
+        {
+          anchorEl: g.current,
+          open: f,
+          options: x,
+          searchValue: r,
+          onSearchChange: h,
+          onSelect: P,
+          onClose: I,
+          showDialCode: !0,
+          searchPlaceholder: y,
+          renderFlag: u
+        }
+      )
+    ] });
+  }
+  const T = m || b && !o.iso, z = C || (b && !o.iso ? "Country is required" : void 0);
+  return /* @__PURE__ */ t(d, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ t(
+      d,
+      {
+        ref: g,
+        tabIndex: 0,
+        onClick: () => !i && c(!0),
+        onBlur: () => S(!0),
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          px: 1.5,
+          height: 40,
+          border: "1px solid",
+          borderColor: T ? "error.main" : "grey.400",
+          borderRadius: "6px",
+          cursor: i ? "default" : "pointer",
+          bgcolor: "background.paper",
+          "&:hover": i ? {} : { borderColor: "grey.800" },
+          outline: "none"
+        },
+        children: [
+          o.countryCode && u(o.countryCode),
+          /* @__PURE__ */ e(
+            p,
+            {
+              variant: "body2",
+              sx: { flex: 1, color: o.country ? "text.primary" : "text.secondary" },
+              children: o.country ?? "Select country"
+            }
+          ),
+          /* @__PURE__ */ e(H, { fontSize: "small", sx: { color: "action.active" } })
+        ]
+      }
+    ),
+    z && /* @__PURE__ */ e(p, { variant: "caption", color: T ? "error" : "text.secondary", sx: { mt: 0.5, ml: 0.5 }, children: z }),
+    /* @__PURE__ */ e(
+      k,
+      {
+        anchorEl: g.current,
+        open: f,
+        options: x,
+        searchValue: r,
+        onSearchChange: h,
+        onSelect: P,
+        onClose: I,
+        showDialCode: !1,
+        searchPlaceholder: y,
+        renderFlag: u
+      }
+    )
+  ] });
+}
+export {
+  re as PH_DEFAULT,
+  ae as PhoneAndCountryDropdown
+};

package/dist/main.d.ts

@@ -9,6 +9,7 @@ export { FlatBanner } from './components/FlatBanner';
 export { Label } from './components/Label';
 export { LinearProgress } from './components/LinearProgress';
 export { MediaCardWithAction } from './components/MediaCardWithAction';
+export { PhoneAndCountryDropdown } from './components/PhoneAndCountryDropdown';
 export { PromoCode } from './components/PromoCode';
 export { RadioButtonGroup } from './components/RadioButtonGroup';
 export { Stepper } from './components/Stepper';

package/dist/main.js

@@ -3,32 +3,34 @@ import { Banner as p } from "./components/Banner/index.js";
 import { B as m } from "./index-CS-LWC7Z.js";
 import { CheckBox as a } from "./components/Checkbox/index.js";
 import { ScrollableDialog as i } from "./components/Dialog/index.js";
-import { CheckboxGroup as B } from "./components/CheckboxGroup/index.js";
-import { Dropdown as u } from "./components/Dropdown/index.js";
-import { FlatBanner as b } from "./components/FlatBanner/index.js";
-import { Label as C } from "./components/Label/index.js";
-import { LinearProgress as h } from "./components/LinearProgress/index.js";
-import { MediaCardWithAction as P } from "./components/MediaCardWithAction/index.js";
-import { PromoCode as A } from "./components/PromoCode/index.js";
-import { RadioButtonGroup as G } from "./components/RadioButtonGroup/index.js";
-import { Stepper as S } from "./components/Stepper/index.js";
-import { Text as w } from "./components/Text/index.js";
-import { TextFieldInput as M } from "./components/TextFieldInput/index.js";
+import { CheckboxGroup as d } from "./components/CheckboxGroup/index.js";
+import { Dropdown as B } from "./components/Dropdown/index.js";
+import { FlatBanner as C } from "./components/FlatBanner/index.js";
+import { Label as h } from "./components/Label/index.js";
+import { LinearProgress as D } from "./components/LinearProgress/index.js";
+import { MediaCardWithAction as g } from "./components/MediaCardWithAction/index.js";
+import { PhoneAndCountryDropdown as k } from "./components/PhoneAndCountryDropdown/index.js";
+import { PromoCode as F } from "./components/PromoCode/index.js";
+import { RadioButtonGroup as L } from "./components/RadioButtonGroup/index.js";
+import { Stepper as T } from "./components/Stepper/index.js";
+import { Text as I } from "./components/Text/index.js";
+import { TextFieldInput as R } from "./components/TextFieldInput/index.js";
 export {
   e as AppBarPublic,
   p as Banner,
   m as Button,
   a as CheckBox,
-  B as CheckboxGroup,
+  d as CheckboxGroup,
   i as Dialog,
-  u as Dropdown,
-  b as FlatBanner,
-  C as Label,
-  h as LinearProgress,
-  P as MediaCardWithAction,
-  A as PromoCode,
-  G as RadioButtonGroup,
-  S as Stepper,
-  w as Text,
-  M as TextFieldInput
+  B as Dropdown,
+  C as FlatBanner,
+  h as Label,
+  D as LinearProgress,
+  g as MediaCardWithAction,
+  k as PhoneAndCountryDropdown,
+  F as PromoCode,
+  L as RadioButtonGroup,
+  T as Stepper,
+  I as Text,
+  R as TextFieldInput
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fangzsx/component-library",
   "author": "Jay Gilbert Garzon",
   "private": false,
-  "version": "0.0.28",
+  "version": "0.0.30",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",