{"version":3,"file":"index25.mjs","sources":["../src/components/input/phone-number/index.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode, useRef, useState } from \"react\";\nimport TextFieldAtom from \"../../../atoms/textfield\";\nimport styles from \"./PhoneNumber.module.css\";\nimport {\n  LabelPairedChevronDownSmBoldIcon,\n  LabelPairedMobileNotchLgBoldIcon,\n} from \"@deriv/quill-icons\";\nimport { useClickOutside } from \"../../../../src/hooks/useClickOutside\";\nimport DropdownContainerAtom, {\n  DropdownDataType,\n  DropdownItemType,\n} from \"../../../../src/atoms/dropdown/container\";\nimport { usePortalClick } from \"../../../hooks/usePortalClick\";\n\nexport type PhoneNumberType = {\n  className?: string;\n  label?: string;\n  labelLeft?: string;\n  labelLeftValue?: string;\n  placeholder?: string;\n  message?: string;\n\n  /** Variant props */\n  indicator?: \"neutral\" | \"fail\" | \"success\";\n  state?: \"default\" | \"disabled\";\n  type?: \"outline\" | \"fill\";\n  size?: \"lg\" | \"md\" | \"sm\";\n  textAlignment?: \"left\" | \"center\";\n\n  /** Custom  input props */\n  itemSize?: \"md\" | \"sm\";\n  iconRight?: ReactNode;\n  isRequired?: boolean;\n  optionalText?: string;\n  containerRef?: React.RefObject<HTMLDivElement>;\n  customContent?: ReactNode;\n  onChange?: (item: DropdownItemType | DropdownItemType[]) => void;\n  onClick?: () => void;\n  variant?: \"labelled\" | \"labelless\";\n  value?: string | number;\n\n  /**Custom Dropdown props */\n  data?: DropdownDataType[];\n  selected?: DropdownItemType;\n};\n\nexport const PhoneNumber: FunctionComponent<PhoneNumberType> = ({\n  className,\n  label = \"Phone number\",\n  labelLeft = \"Code\",\n  labelLeftValue = \"+00\",\n  placeholder = \"Select an option\",\n  message,\n  indicator,\n  state,\n  type,\n  size = \"md\",\n  itemSize = \"md\",\n  textAlignment = \"left\",\n  isRequired,\n  optionalText,\n  containerRef,\n  iconRight,\n  selected: internalSelected,\n  onChange,\n  onClick,\n  data = [],\n  variant = \"labelled\",\n  value,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const defaultRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const dropdownRef = containerRef || defaultRef;\n  const [code, setCode] = useState<string>(\"+00\");\n  const [selected, setSelected] = useState<DropdownItemType | undefined>(\n    internalSelected\n  );\n  const handleClick = (e: React.MouseEvent) => {\n    const { isPortalClick } = usePortalClick(\n      dropdownRef as React.RefObject<HTMLElement>\n    );\n\n    if (isPortalClick(e) || state === \"disabled\") {\n      return;\n    }\n\n    setIsOpen(!isOpen);\n    onClick?.();\n  };\n\n  useClickOutside(dropdownRef, () => setIsOpen(false), [\n    \"quill-ui-next-dropdown-container\",\n  ]);\n\n  return (\n    <TextFieldAtom\n      ref={inputRef}\n      containerRef={dropdownRef as React.RefObject<HTMLDivElement>}\n      label={label}\n      labelLeft={labelLeft}\n      labelLeftValue={code || labelLeftValue}\n      placeholder={placeholder}\n      message={message}\n      inputType=\"number\"\n      className={`quill-ui-next-pointer ${styles.root} ${className}`}\n      onAddonLeftClick={(e) => {\n        (document.activeElement as HTMLElement)?.blur();\n        handleClick(e);\n      }}\n      iconLeft={<LabelPairedMobileNotchLgBoldIcon />}\n      iconRight={iconRight}\n      iconLeftSecondary={\n        <LabelPairedChevronDownSmBoldIcon\n          className={`quill-ui-next-rotatable ${\n            isOpen && \"quill-ui-next-rotate\"\n          }`}\n        />\n      }\n      isLeftGroup={true}\n      indicator={indicator}\n      state={state}\n      type={type}\n      size={size}\n      textAlignment={textAlignment}\n      isRequired={isRequired}\n      optionalText={optionalText}\n      variant={variant}\n      value={value}\n      customContent={\n        <DropdownContainerAtom\n          width=\"100%\"\n          textAlignment={textAlignment}\n          parent={dropdownRef}\n          isOpen={isOpen}\n          itemSize={itemSize}\n          data={data}\n          containerSize=\"md\"\n          selected={selected}\n          onChange={(e: DropdownItemType | DropdownItemType[]) => {\n            onChange?.(e);\n            const selectedItem = Array.isArray(e) ? e[0] : e;\n            setSelected(selectedItem);\n            setCode(selectedItem.value);\n            setIsOpen(false);\n            inputRef.current?.focus();\n          }}\n        />\n      }\n    />\n  );\n};\n\nPhoneNumber.displayName = \"PhoneNumber\";\n\nexport default PhoneNumber;\n"],"names":[],"mappings":";;;;;;;;AA8CO,MAAM,cAAkD,CAAC;AAAA,EAC9D;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO,CAAC;AAAA,EACR,UAAU;AAAA,EACV;AACF,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AACpC,QAAA,aAAa,OAAuB,IAAI;AACxC,QAAA,WAAW,OAAyB,IAAI;AAC9C,QAAM,cAAc,gBAAgB;AACpC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAiB,KAAK;AACxC,QAAA,CAAC,UAAU,WAAW,IAAI;AAAA,IAC9B;AAAA,EACF;AACM,QAAA,cAAc,CAAC,MAAwB;AACrC,UAAA,EAAE,kBAAkB;AAAA,MACxB;AAAA,IACF;AAEA,QAAI,cAAc,CAAC,KAAK,UAAU,YAAY;AAC5C;AAAA,IAAA;AAGF,cAAU,CAAC,MAAM;AACP;AAAA,EACZ;AAEA,kBAAgB,aAAa,MAAM,UAAU,KAAK,GAAG;AAAA,IACnD;AAAA,EAAA,CACD;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,gBAAgB,QAAQ;AAAA,MACxB;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,WAAW,yBAAyB,OAAO,IAAI,IAAI,SAAS;AAAA,MAC5D,kBAAkB,CAAC,MAAM;;AACtB,uBAAS,kBAAT,mBAAwC;AACzC,oBAAY,CAAC;AAAA,MACf;AAAA,MACA,8BAAW,kCAAiC,EAAA;AAAA,MAC5C;AAAA,MACA,mBACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,2BACT,UAAU,sBACZ;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA,eAAc;AAAA,UACd;AAAA,UACA,UAAU,CAAC,MAA6C;;AACtD,iDAAW;AACX,kBAAM,eAAe,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC,IAAI;AAC/C,wBAAY,YAAY;AACxB,oBAAQ,aAAa,KAAK;AAC1B,sBAAU,KAAK;AACf,2BAAS,YAAT,mBAAkB;AAAA,UAAM;AAAA,QAC1B;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAEJ;AAEA,YAAY,cAAc;"}