next-helios-fe 1.8.15 → 1.8.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.15",
3
+ "version": "1.8.16",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -1463,7 +1463,6 @@ export interface PhoneNumberProps
1463
1463
  label?: string;
1464
1464
  description?: string;
1465
1465
  options?: {
1466
- variant?: "default" | "split";
1467
1466
  width?: "full" | "fit";
1468
1467
  height?: "short" | "medium" | "high";
1469
1468
  };
@@ -1477,7 +1476,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1477
1476
  }) => {
1478
1477
  const inputRef = useRef<HTMLDivElement>(null);
1479
1478
  const dropdownRef = useRef<HTMLButtonElement>(null);
1480
- const [tempValue, setTempValue] = useState(["62", ""]);
1479
+ const [selectedCountry, setSelectedCountry] = useState("62");
1481
1480
  const [openDropdown, setOpenDropdown] = useState(false);
1482
1481
  const [dropdownWidth, setDropdownWidth] = useState<number>(0);
1483
1482
  const width = options?.width === "fit" ? "w-fit" : "w-full";
@@ -1497,26 +1496,20 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1497
1496
  }, []);
1498
1497
 
1499
1498
  useEffect(() => {
1500
- if (options?.variant !== "split") {
1501
- if (rest.value) {
1502
- setTempValue((prev) => [prev[0], rest.value as string]);
1503
- return;
1504
- } else if (rest.defaultValue) {
1505
- setTempValue((prev) => [prev[0], rest.defaultValue as string]);
1506
- return;
1507
- }
1499
+ if (rest.value) {
1500
+ setSelectedCountry(
1501
+ countryPhoneCode.find((item) =>
1502
+ (rest.value as string).startsWith(item.dial_code)
1503
+ )?.dial_code || ""
1504
+ );
1505
+ } else if (rest.defaultValue) {
1506
+ setSelectedCountry(
1507
+ countryPhoneCode.find((item) =>
1508
+ (rest.defaultValue as string).startsWith(item.dial_code)
1509
+ )?.dial_code || ""
1510
+ );
1508
1511
  }
1509
- }, [options?.variant, rest.value, rest.defaultValue]);
1510
-
1511
- useEffect(() => {
1512
- rest.onChange &&
1513
- rest.onChange({
1514
- target: {
1515
- value:
1516
- options?.variant === "split" ? tempValue.join("") : tempValue[1],
1517
- } as HTMLInputElement,
1518
- } as React.ChangeEvent<HTMLInputElement>);
1519
- }, [tempValue]);
1512
+ }, [rest.value, rest.defaultValue]);
1520
1513
 
1521
1514
  return (
1522
1515
  <div className="flex flex-row-reverse items-end">
@@ -1545,60 +1538,59 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1545
1538
  )}
1546
1539
  <div ref={inputRef} className="flex flex-row-reverse gap-4">
1547
1540
  <div className="relative flex-1 flex items-center">
1548
- {options?.variant === "split" && (
1549
- <div className="absolute left-0 flex justify-center w-14 border-r">
1550
- <span className="text-disabled">{`+${tempValue[0]}`}</span>
1551
- </div>
1552
- )}
1541
+ <div className="absolute left-0 flex justify-center w-14 border-r">
1542
+ <span className="text-disabled">{`+${selectedCountry}`}</span>
1543
+ </div>
1553
1544
  <input
1554
1545
  type="number"
1555
- className={`w-full border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height} ${
1556
- options?.variant === "split" ? "ps-16 pe-4" : "px-4"
1557
- }`}
1558
- placeholder={rest.placeholder}
1559
- value={tempValue[1]}
1546
+ className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
1547
+ placeholder="Phone number"
1560
1548
  required={rest.required}
1561
1549
  disabled={rest.disabled}
1550
+ value={(rest.value as string).split(selectedCountry)[1]}
1562
1551
  onChange={(e) => {
1563
- setTempValue((prev) => [prev[0], e.target.value]);
1552
+ rest.onChange &&
1553
+ rest.onChange({
1554
+ target: {
1555
+ value: `${selectedCountry}${e.target.value}`,
1556
+ } as HTMLInputElement,
1557
+ } as any);
1564
1558
  }}
1565
1559
  />
1566
1560
  </div>
1567
- {options?.variant === "split" && (
1568
- <div className="relative flex items-center cursor-pointer">
1569
- <input
1570
- type="text"
1571
- className={`max-w-24 w-min ps-4 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height} ${
1572
- openDropdown
1573
- ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
1574
- : "border-default placeholder:translate-x-0"
1575
- }`}
1576
- disabled={rest.disabled}
1577
- value={`${
1578
- countryPhoneCode.find(
1579
- (item) => item.dial_code === tempValue[0]
1580
- )?.emoji
1581
- } ${
1582
- countryPhoneCode.find(
1583
- (item) => item.dial_code === tempValue[0]
1584
- )?.code
1585
- }`}
1586
- onClick={(e) => {
1587
- e.preventDefault();
1588
- setOpenDropdown(true);
1589
- dropdownRef.current?.click();
1590
- setDropdownWidth(
1591
- inputRef?.current?.getBoundingClientRect()?.width || 0
1592
- );
1593
- }}
1561
+ <div className="relative flex items-center cursor-pointer">
1562
+ <input
1563
+ type="text"
1564
+ className={`max-w-24 w-min ps-4 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height} ${
1565
+ openDropdown
1566
+ ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
1567
+ : "border-default placeholder:translate-x-0"
1568
+ }`}
1569
+ disabled={rest.disabled}
1570
+ value={`${
1571
+ countryPhoneCode.find(
1572
+ (item) => selectedCountry === item.dial_code
1573
+ )?.emoji
1574
+ } ${
1575
+ countryPhoneCode.find(
1576
+ (item) => selectedCountry === item.dial_code
1577
+ )?.code
1578
+ }`}
1579
+ onClick={(e) => {
1580
+ e.preventDefault();
1581
+ setOpenDropdown(true);
1582
+ dropdownRef.current?.click();
1583
+ setDropdownWidth(
1584
+ inputRef?.current?.getBoundingClientRect()?.width || 0
1585
+ );
1586
+ }}
1587
+ />
1588
+ <div className="absolute right-4 text-xl text-disabled pointer-events-none">
1589
+ <Icon
1590
+ icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
1594
1591
  />
1595
- <div className="absolute right-4 text-xl text-disabled pointer-events-none">
1596
- <Icon
1597
- icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
1598
- />
1599
- </div>
1600
1592
  </div>
1601
- )}
1593
+ </div>
1602
1594
  </div>
1603
1595
  </label>
1604
1596
  <div className="w-0 overflow-hidden">
@@ -1630,9 +1622,16 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1630
1622
  key={index}
1631
1623
  type="button"
1632
1624
  className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
1633
- disabled={tempValue[0] === item.dial_code}
1625
+ disabled={selectedCountry === item.dial_code}
1634
1626
  onClick={() => {
1635
- setTempValue((prev) => [item.dial_code, prev[1]]);
1627
+ rest.onChange &&
1628
+ rest.onChange({
1629
+ target: {
1630
+ value: `${item.dial_code}${
1631
+ (rest.value as string).split(selectedCountry)[1]
1632
+ }`,
1633
+ } as HTMLInputElement,
1634
+ } as any);
1636
1635
  setOpenDropdown(false);
1637
1636
  }}
1638
1637
  >
@@ -1644,6 +1643,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1644
1643
  </div>
1645
1644
  </Dropdown>
1646
1645
  </div>
1646
+ <input type="text" className="hidden" {...rest} />
1647
1647
  </div>
1648
1648
  );
1649
1649
  };