foxit-component 1.0.4 → 1.0.5-alpha.10

package/es/Accordion/Accordion.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import './accordion.css';
+export interface AccordionItem {
+    key: string;
+    label: React.ReactNode;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+    activeKey?: string | string[];
+    defaultActiveKey?: string | string[];
+    accordion?: boolean;
+    destroyInactivePanel?: boolean;
+    onChange?: (keys: string[]) => void;
+    className?: string;
+}
+declare const Accordion: React.FC<AccordionProps>;
+export { Accordion };

package/es/Accordion/Accordion.js

@@ -0,0 +1,60 @@
+import { __spreadArray, __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, useCallback } from 'react';
+import classNames from 'classnames';
+
+var ChevronIcon = function (_a) {
+    var className = _a.className;
+    return (jsx("svg", __assign({ className: className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, { children: jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+};
+var AccordionPanel = function (_a) {
+    var item = _a.item, isOpen = _a.isOpen, onToggle = _a.onToggle, headerId = _a.headerId, contentId = _a.contentId, _b = _a.destroyInactivePanel, destroyInactivePanel = _b === void 0 ? false : _b;
+    var handleClick = function () {
+        if (!item.disabled) {
+            onToggle(item.key);
+        }
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+    return (jsxs("div", __assign({ className: classNames('foxit-accordion-item', {
+            'foxit-accordion-item-active': isOpen,
+            'foxit-accordion-item-disabled': item.disabled
+        }) }, { children: [jsxs("button", __assign({ id: headerId, type: "button", className: "foxit-accordion-header", "aria-expanded": isOpen, "aria-controls": contentId, onClick: handleClick, onKeyDown: handleKeyDown, disabled: item.disabled }, { children: [jsx("span", __assign({ className: "foxit-accordion-label" }, { children: item.label })), jsx(ChevronIcon, { className: "foxit-accordion-icon" })] })), jsx("div", __assign({ id: contentId, role: "region", "aria-labelledby": headerId, className: classNames('foxit-accordion-content-wrapper', {
+                    'foxit-accordion-content-wrapper-open': isOpen
+                }) }, { children: (!destroyInactivePanel || isOpen) && (jsx("div", __assign({ className: "foxit-accordion-content" }, { children: item.children }))) }))] })));
+};
+var normalizeKeys = function (keys) {
+    if (keys === undefined || keys === null)
+        return [];
+    return Array.isArray(keys) ? keys : [keys];
+};
+var Accordion = function (_a) {
+    var items = _a.items, title = _a.title, subTitle = _a.subTitle, _b = _a.align, align = _b === void 0 ? 'left' : _b, activeKey = _a.activeKey, defaultActiveKey = _a.defaultActiveKey, _c = _a.accordion, accordion = _c === void 0 ? false : _c, _d = _a.destroyInactivePanel, destroyInactivePanel = _d === void 0 ? false : _d, onChange = _a.onChange, className = _a.className;
+    var uid = useId();
+    var isControlled = activeKey !== undefined;
+    var _e = useState(function () {
+        return normalizeKeys(defaultActiveKey);
+    }), internalOpenKeys = _e[0], setInternalOpenKeys = _e[1];
+    var openKeys = isControlled ? normalizeKeys(activeKey) : internalOpenKeys;
+    var handleToggle = useCallback(function (key) {
+        var isCurrentlyOpen = openKeys.includes(key);
+        var nextKeys;
+        if (isCurrentlyOpen) {
+            nextKeys = openKeys.filter(function (k) { return k !== key; });
+        }
+        else {
+            nextKeys = accordion ? [key] : __spreadArray(__spreadArray([], openKeys, true), [key], false);
+        }
+        if (!isControlled) {
+            setInternalOpenKeys(nextKeys);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextKeys);
+    }, [openKeys, accordion, isControlled, onChange]);
+    return (jsxs("div", __assign({ className: classNames('foxit-accordion', className) }, { children: [(title || subTitle) && (jsxs("div", __assign({ className: "foxit-accordion-head", style: { textAlign: align } }, { children: [title && jsx("h2", __assign({ className: "foxit-accordion-title" }, { children: title })), subTitle && jsx("p", __assign({ className: "foxit-accordion-subtitle" }, { children: subTitle }))] }))), items.map(function (item, index) { return (jsx(AccordionPanel, { item: item, isOpen: openKeys.includes(item.key), onToggle: handleToggle, headerId: "".concat(uid, "-header-").concat(index), contentId: "".concat(uid, "-content-").concat(index), destroyInactivePanel: destroyInactivePanel }, item.key)); })] })));
+};
+
+export { Accordion };

package/es/Alert/Alert.d.ts

@@ -6,8 +6,9 @@ import './alert.css';
 interface AlertProps {
     message: string | React.ReactNode;
     showIcon?: boolean;
-    type?: 'success' | 'warning' | 'error' | 'gradient';
+    type?: 'success' | 'warning' | 'error' | 'gradient' | 'arrows';
     className?: string;
+    arrowPosition?: 'left' | 'right';
 }
 declare const Alert: React.FC<AlertProps>;
 export { Alert };

package/es/Alert/Alert.js

@@ -4,7 +4,8 @@ import { Icon } from '../Icon/index.js';
 import classNames from 'classnames';
 
 var Alert = function (_a) {
-    var message = _a.message, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.type, type = _c === void 0 ? 'success' : _c, className = _a.className;
+    var _b;
+    var message = _a.message, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.type, type = _d === void 0 ? 'success' : _d, className = _a.className, _e = _a.arrowPosition, arrowPosition = _e === void 0 ? 'left' : _e;
     var getIconName = function (type) {
         switch (type) {
             case 'success':
@@ -19,7 +20,9 @@ var Alert = function (_a) {
                 return 'WarningColoursOutlined';
         }
     };
-    return (jsxs("div", __assign({ className: classNames('foxit-alert', "foxit-alert-".concat(type), className) }, { children: [showIcon && (jsx("div", __assign({ className: "foxit-alert-icon-container" }, { children: jsx(Icon, { name: getIconName(type), className: "foxit-alert-icon" }) }))), jsx("div", __assign({ className: "foxit-alert-message" }, { children: message }))] })));
+    return (jsxs("div", __assign({ className: classNames('foxit-alert', "foxit-alert-".concat(type), (_b = {},
+            _b["foxit-alert-arrows-".concat(arrowPosition)] = type === 'arrows',
+            _b), className) }, { children: [showIcon && type !== 'arrows' && (jsx("div", __assign({ className: "foxit-alert-icon-container" }, { children: jsx(Icon, { name: getIconName(type), className: "foxit-alert-icon" }) }))), jsx("div", __assign({ className: "foxit-alert-message" }, { children: message }))] })));
 };
 
 export { Alert };

package/es/Button/Button.d.ts

@@ -10,5 +10,6 @@ export interface ButtonProps {
     style?: React.CSSProperties;
     [key: string]: unknown;
     loading?: boolean;
+    link?: boolean;
 }
-export declare const Button: ({ primary, size, shape, children, className, style, loading, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ primary, size, shape, children, className, style, loading, link, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/es/Button/Button.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { Icon } from '../Icon/index.js';
 
 var Button = function (_a) {
-    var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.shape, shape = _d === void 0 ? 'default' : _d, _e = _a.children, children = _e === void 0 ? '' : _e, className = _a.className, style = _a.style, loading = _a.loading, props = __rest(_a, ["primary", "size", "shape", "children", "className", "style", "loading"]);
+    var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.shape, shape = _d === void 0 ? 'default' : _d, _e = _a.children, children = _e === void 0 ? '' : _e, className = _a.className, style = _a.style, loading = _a.loading, _f = _a.link, link = _f === void 0 ? false : _f, props = __rest(_a, ["primary", "size", "shape", "children", "className", "style", "loading", "link"]);
     var mode = primary ? 'foxit-button-primary' : 'foxit-button-secondary';
-    return (jsxs("button", __assign({ type: "button", className: classNames('foxit-button', "foxit-button-".concat(size), shape === 'circle' && 'foxit-button-circle', mode, className, loading && 'foxit-button-prevent-click'), style: style }, props, { children: [loading && jsx(Icon, { name: "LoadingOutlined", className: "foxit-button-loading" }), children] })));
+    return (jsxs("button", __assign({ type: "button", className: classNames('foxit-button', !link && "foxit-button-".concat(size), shape === 'circle' && 'foxit-button-circle', !link && mode, link && 'foxit-button-link', className, loading && 'foxit-button-prevent-click'), style: style }, props, { children: [loading && jsx(Icon, { name: "LoadingOutlined", className: "foxit-button-loading" }), children] })));
 };
 
 export { Button };

package/es/Checkbox/Checkbox.d.ts

@@ -5,7 +5,9 @@ interface CheckboxProps {
     checked?: boolean;
     disabled?: boolean;
     value?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    size?: 'default' | 'small';
+    indeterminate?: boolean;
 }
 interface CheckboxGroupProps {
     value?: string[];

package/es/Checkbox/Checkbox.js

@@ -1,17 +1,23 @@
 import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useRef, useEffect } from 'react';
 
 var CheckboxGroupContext = createContext(null);
 var Checkbox = function (_a) {
-    var onChange = _a.onChange, checked = _a.checked, _b = _a.disabled, disabled = _b === void 0 ? false : _b, value = _a.value, children = _a.children;
+    var onChange = _a.onChange, checked = _a.checked, _b = _a.disabled, disabled = _b === void 0 ? false : _b, value = _a.value, children = _a.children, _c = _a.size, size = _c === void 0 ? 'default' : _c, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d;
     var groupContext = useContext(CheckboxGroupContext);
-    var _c = useState(checked || false), internalChecked = _c[0], setInternalChecked = _c[1];
+    var _e = useState(checked || false), internalChecked = _e[0], setInternalChecked = _e[1];
+    var inputRef = useRef(null);
     useEffect(function () {
         if (checked !== undefined) {
             setInternalChecked(checked);
         }
     }, [checked]);
+    useEffect(function () {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
     var handleChange = function (e) {
         var newChecked = e.target.checked;
         setInternalChecked(newChecked);
@@ -23,7 +29,7 @@ var Checkbox = function (_a) {
         }
     };
     var isChecked = groupContext ? groupContext.value.includes(value || '') : internalChecked;
-    return (jsxs("label", __assign({ className: "foxit-checkbox-container ".concat(disabled ? 'disabled' : '') }, { children: [jsx("input", { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange }), jsx("span", { className: "foxit-checkbox-checkmark ".concat(disabled ? 'disabled' : '') }), jsx("span", __assign({ className: "foxit-checkbox-content" }, { children: children }))] })));
+    return (jsxs("label", __assign({ className: "foxit-checkbox-container ".concat(disabled ? 'disabled' : '', " ").concat(size === 'small' ? 'small' : '') }, { children: [jsx("input", { ref: inputRef, type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange }), jsx("span", { className: "foxit-checkbox-checkmark ".concat(disabled ? 'disabled' : '') }), jsx("span", __assign({ className: "foxit-checkbox-content" }, { children: children }))] })));
 };
 var CheckboxGroup = function (_a) {
     var value = _a.value, onChange = _a.onChange, children = _a.children;

package/es/ConfigProvider/ConfigProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ConfigProviderProps {
+    dir?: 'ltr' | 'rtl';
+    children?: React.ReactNode;
+}
+interface ConfigContextType {
+    dir: 'ltr' | 'rtl';
+}
+export declare const useConfig: () => ConfigContextType;
+declare const ConfigProvider: React.FC<ConfigProviderProps>;
+export { ConfigProvider };

package/es/ConfigProvider/ConfigProvider.js

@@ -0,0 +1,19 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+var ConfigContext = createContext({
+    dir: 'ltr'
+});
+var useConfig = function () {
+    return useContext(ConfigContext);
+};
+var ConfigProvider = function (_a) {
+    var _b = _a.dir, dir = _b === void 0 ? 'ltr' : _b, children = _a.children;
+    var value = {
+        dir: dir
+    };
+    return (jsx(ConfigContext.Provider, __assign({ value: value }, { children: jsx("div", __assign({ dir: dir }, { children: children })) })));
+};
+
+export { ConfigProvider, useConfig };

package/es/Input/Input.d.ts

@@ -11,5 +11,10 @@ interface SearchInputProps extends InputProps {
 }
 declare const SearchInput: React.FC<SearchInputProps>;
 declare const PasswordInput: React.FC<InputProps>;
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    rows?: number;
+}
+declare const TextArea: React.FC<TextAreaProps>;
 export default Input;
-export { SearchInput, PasswordInput };
+export { SearchInput, PasswordInput, TextArea };

package/es/Input/Input.js

@@ -25,5 +25,9 @@ var PasswordInput = function (props) {
     };
     return (jsx(Input, __assign({}, props, { type: visible ? 'text' : 'password', addonAfter: jsx("div", __assign({ style: { display: 'flex' }, onClick: toggleVisibility }, { children: jsx(Icon, { name: visible ? 'EyeOutlined' : 'EyeInvisibleOutlined' }) })) })));
 };
+var TextArea = function (_a) {
+    var className = _a.className, _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["className", "rows"]);
+    return (jsx("div", __assign({ className: "foxit-input-wrapper foxit-input-wrapper-textarea" }, { children: jsx("textarea", __assign({ className: classNames('foxit-input-element foxit-textarea-element', rest.disabled && 'foxit-input-wrapper-disabled', className), rows: rows }, rest)) })));
+};
 
-export { PasswordInput, SearchInput, Input as default };
+export { PasswordInput, SearchInput, TextArea, Input as default };

package/es/Input/PhoneInput.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { InputProps } from './Input';
+import { AreaCodeOption } from './areaCodeData';
+import './input.css';
+export interface PhoneInputValue {
+    areaCode: string;
+    dialCode: string;
+    name: string;
+    phoneNumber: string;
+}
+export type PhoneInputFieldValue = Partial<PhoneInputValue>;
+export interface PhoneInputProps extends Omit<InputProps, 'addonBefore' | 'value' | 'defaultValue' | 'onChange'> {
+    value?: PhoneInputFieldValue;
+    defaultValue?: PhoneInputFieldValue;
+    areaCodeOptions?: AreaCodeOption[];
+    flagBaseUrl?: string;
+    onChange?: (value: PhoneInputValue) => void;
+}
+declare const PhoneInput: React.FC<PhoneInputProps>;
+export default PhoneInput;

package/es/Input/PhoneInput.js

@@ -0,0 +1,145 @@
+import { __assign, __rest, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import Select from '../Select/Select.js';
+import Input from './Input.js';
+import { US_FLAG_DATA_URI, areaCodeOptions, AREA_FLAG_BASE_URL } from './areaCodeData.js';
+
+var getFlagUrl = function (baseUrl, countryCode) {
+    return baseUrl ? "".concat(baseUrl.replace(/\/$/, ''), "/").concat(countryCode.toLowerCase(), ".svg") : '';
+};
+var getPhoneInputValue = function (option, phoneNumber) { return ({
+    areaCode: option.value,
+    dialCode: option.dialCode,
+    name: option.name,
+    phoneNumber: phoneNumber
+}); };
+var LazyFlag = function (_a) {
+    var src = _a.src, alt = _a.alt, _b = _a.lazy, lazy = _b === void 0 ? true : _b;
+    var imgRef = useRef(null);
+    var _c = useState(!lazy), shouldLoad = _c[0], setShouldLoad = _c[1];
+    useEffect(function () {
+        var img = imgRef.current;
+        if (!lazy) {
+            setShouldLoad(true);
+            return;
+        }
+        if (!img || shouldLoad) {
+            return;
+        }
+        if (typeof IntersectionObserver === 'undefined') {
+            setShouldLoad(true);
+            return;
+        }
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            if (entry.isIntersecting) {
+                setShouldLoad(true);
+                observer.disconnect();
+            }
+        }, { rootMargin: '80px' });
+        observer.observe(img);
+        return function () { return observer.disconnect(); };
+    }, [lazy, shouldLoad]);
+    return (jsx("img", { ref: imgRef, className: "foxit-area-code-flag", src: shouldLoad && src ? src : undefined, alt: alt, loading: "lazy" }));
+};
+var AreaCodeOptionLabel = function (_a) {
+    var option = _a.option, flagBaseUrl = _a.flagBaseUrl, isMenu = _a.isMenu;
+    // SSR 时 flagBaseUrl 为空，选中值展示兜底使用 US 国旗；菜单项不展示图片（不会影响交互）
+    var flagSrc = flagBaseUrl
+        ? getFlagUrl(flagBaseUrl, option.value)
+        : !isMenu
+            ? US_FLAG_DATA_URI
+            : '';
+    return (jsxs("div", __assign({ className: classNames('foxit-area-code-option', !isMenu && 'foxit-area-code-option-value') }, { children: [jsxs("div", __assign({ className: "foxit-area-code-option-main" }, { children: [jsx(LazyFlag, { src: flagSrc, alt: option.name, lazy: isMenu }), isMenu && jsx("span", __assign({ className: "foxit-area-code-name" }, { children: option.name })), !isMenu && jsx("span", __assign({ className: "foxit-area-code-dial" }, { children: option.dialCode }))] })), isMenu && jsx("span", __assign({ className: "foxit-area-code-dial" }, { children: option.dialCode }))] })));
+};
+var phoneAreaCodeSelectStyles = {
+    control: {
+        minHeight: 24,
+        height: 24,
+        border: 'none',
+        paddingLeft: 0,
+        backgroundColor: 'transparent'
+    },
+    singleValue: {
+        margin: 0
+    },
+    input: {
+        margin: 0,
+        padding: 0
+    },
+    menu: function (base, state) { return (__assign(__assign({}, base), { transform: "translate(-12px, ".concat(state.placement === 'top' ? -8 : 10, "px)") })); }
+};
+var filterAreaCodeOption = function (candidate, inputValue) {
+    var keyword = inputValue.trim().toLowerCase();
+    if (!keyword) {
+        return true;
+    }
+    var option = candidate.data;
+    var normalizedDialCode = option.dialCode.replace('+', '');
+    var normalizedKeyword = keyword.replace('+', '');
+    return (option.value.toLowerCase().includes(keyword) ||
+        option.name.toLowerCase().includes(keyword) ||
+        option.dialCode.includes(keyword) ||
+        normalizedDialCode.includes(normalizedKeyword));
+};
+var PhoneAreaCodeSelectBase = function (_a) {
+    var options = _a.options, value = _a.value, disabled = _a.disabled, flagBaseUrl = _a.flagBaseUrl, onChange = _a.onChange;
+    var handleChange = useCallback(function (option) {
+        var nextOption = option;
+        if (!nextOption) {
+            return;
+        }
+        onChange(nextOption);
+    }, [onChange]);
+    var formatOptionLabel = useCallback(function (option, meta) { return (jsx(AreaCodeOptionLabel, { option: option, flagBaseUrl: flagBaseUrl, isMenu: meta.context === 'menu' })); }, [flagBaseUrl]);
+    return (jsx(Select, { className: "foxit-phone-input-select", classNamePrefix: "foxit-phone-input-select", options: options, value: value, onChange: handleChange, isDisabled: disabled, isSearchable: true, showSelectedIcon: false, placeholder: "", filterOption: filterAreaCodeOption, formatOptionLabel: formatOptionLabel, styles: phoneAreaCodeSelectStyles }));
+};
+var PhoneAreaCodeSelect = React.memo(PhoneAreaCodeSelectBase);
+var PhoneInput = function (_a) {
+    var _b;
+    var value = _a.value, defaultValue = _a.defaultValue, _c = _a.areaCodeOptions, passAreaCodeOptions = _c === void 0 ? areaCodeOptions : _c, flagBaseUrl = _a.flagBaseUrl, onChange = _a.onChange, className = _a.className, rest = __rest(_a, ["value", "defaultValue", "areaCodeOptions", "flagBaseUrl", "onChange", "className"]);
+    var resolvedFlagBaseUrl = flagBaseUrl || AREA_FLAG_BASE_URL();
+    var selectOptions = useMemo(function () {
+        return __spreadArray([], passAreaCodeOptions, true).sort(function (a, b) {
+            var dialCodeDiff = Number(a.dialCode.replace(/\D/g, '')) - Number(b.dialCode.replace(/\D/g, ''));
+            if (dialCodeDiff !== 0) {
+                return dialCodeDiff;
+            }
+            return a.value.localeCompare(b.value);
+        })
+            .map(function (option) { return (__assign(__assign({}, option), { label: option.dialCode })); });
+    }, [passAreaCodeOptions]);
+    var _d = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.areaCode) || 'US'), innerAreaCode = _d[0], setInnerAreaCode = _d[1];
+    var _e = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.phoneNumber) || ''), innerPhoneNumber = _e[0], setInnerPhoneNumber = _e[1];
+    var selectedAreaCode = (_b = value === null || value === void 0 ? void 0 : value.areaCode) !== null && _b !== void 0 ? _b : innerAreaCode;
+    var phoneNumber = value === undefined ? innerPhoneNumber : value.phoneNumber || '';
+    var phoneNumberRef = useRef(phoneNumber);
+    phoneNumberRef.current = phoneNumber;
+    var selectedOption = selectOptions.find(function (option) { return option.value === selectedAreaCode; }) || selectOptions[0];
+    var isControlled = value !== undefined;
+    var onChangeRef = useRef(onChange);
+    var isControlledRef = useRef(isControlled);
+    onChangeRef.current = onChange;
+    isControlledRef.current = isControlled;
+    var handleAreaCodeChange = useCallback(function (nextOption) {
+        var _a;
+        if (!isControlledRef.current) {
+            setInnerAreaCode(nextOption.value);
+        }
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, getPhoneInputValue(nextOption, phoneNumberRef.current));
+    }, []);
+    var handlePhoneNumberChange = function (e) {
+        var nextPhoneNumber = e.target.value.replace(/\D/g, '');
+        if (value === undefined) {
+            setInnerPhoneNumber(nextPhoneNumber);
+        }
+        if (selectedOption) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(getPhoneInputValue(selectedOption, nextPhoneNumber));
+        }
+    };
+    return (jsx(Input, __assign({}, rest, { inputMode: rest.inputMode || 'numeric', pattern: rest.pattern || '[0-9]*', value: phoneNumber, onChange: handlePhoneNumberChange, className: classNames('foxit-phone-input', className), addonBefore: jsx(PhoneAreaCodeSelect, { options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, disabled: rest.disabled, flagBaseUrl: resolvedFlagBaseUrl, onChange: handleAreaCodeChange }) })));
+};
+
+export { PhoneInput as default };

package/es/Input/areaCodeData.d.ts

@@ -0,0 +1,8 @@
+export interface AreaCodeOption {
+    value: string;
+    dialCode: string;
+    name: string;
+}
+export declare const AREA_FLAG_BASE_URL: () => string;
+export declare const US_FLAG_DATA_URI: string;
+export declare const areaCodeOptions: AreaCodeOption[];