@headless-adminapp/fluent 0.0.17-alpha.57 → 0.0.17-alpha.61

package/App/AppHeaderContianer.js

@@ -9,6 +9,7 @@ const hooks_1 = require("@headless-adminapp/app/auth/hooks");
 const useIsSkipAuthCheck_1 = require("@headless-adminapp/app/auth/hooks/useIsSkipAuthCheck");
 const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const route_1 = require("@headless-adminapp/app/route");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppLogo_1 = require("./AppLogo");
@@ -31,6 +32,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
     }, [authSession?.fullName]);
     const quickActionItems = (0, hooks_2.useItemsWithKey)(app.quickActionItems);
     const accountMenuItems = (0, hooks_2.useItemsWithKey)(app.accountMenuItems);
+    const router = (0, route_1.useRouter)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
@@ -69,7 +71,14 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
                                                     flex: 1,
                                                 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession?.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession?.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems?.map((item) => {
                                                 const Icon = item.icon;
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => item.onClick?.(), children: item.localizedLabel?.[language] ?? item.label }, item.__key));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => {
+                                                        if (item.onClick) {
+                                                            item.onClick();
+                                                        }
+                                                        else if (item.link) {
+                                                            router.push(item.link);
+                                                        }
+                                                    }, children: item.localizedLabel?.[language] ?? item.label }, item.__key));
                                             }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] })] }));
 };
 exports.AppHeaderContainer = AppHeaderContainer;

package/DataGrid/useTableColumns.js

@@ -13,6 +13,7 @@ const mutable_1 = require("@headless-adminapp/app/mutable");
 const hooks_4 = require("@headless-adminapp/app/recordset/hooks");
 const hooks_5 = require("@headless-adminapp/app/route/hooks");
 const utils_1 = require("@headless-adminapp/app/utils");
+const phone_1 = require("@headless-adminapp/app/utils/phone");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
@@ -264,6 +265,7 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         currencyDisplay: currency.currencyDisplay,
         currencySign: currency.currencySign,
         locale: locale.locale,
+        region: locale.region,
     }) ?? '';
     if (column.plainText) {
         return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
@@ -311,6 +313,18 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         case 'choice':
             return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
     }
+    if (attribute.type === 'string' && attribute.format === 'phone') {
+        const parsedNumber = (0, phone_1.parsePhoneNumber)(value, locale.region);
+        if (parsedNumber.isValid && parsedNumber.uri) {
+            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: parsedNumber.uri }, column.id));
+        }
+    }
+    if (attribute.type === 'string' &&
+        attribute.format === 'email' &&
+        value &&
+        typeof value === 'string') {
+        return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: `mailto:${value}` }, column.id));
+    }
     return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
 }
 function renderPrimaryAttribute({ info, column, schema, routeResolver, openRecord, value, }) {

package/DialogContainer/PromptDialog.d.ts

@@ -15,12 +15,22 @@ interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
     onDismiss?: PromptDialogOptions<SA>['onDismiss'];
 }
 export declare function PromptDialog(props: PromptDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
+export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
+    attributes: A;
+    language: string;
+    strings: FormValidationStringSet;
+    region: string;
+}) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
 }>>) & import("lodash").MemoizedFunction;
-export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => yup.ObjectSchema<{
+export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
+    attributes: A;
+    language: string;
+    strings: FormValidationStringSet;
+    region: string;
+}) => yup.ObjectSchema<{
     [x: string]: any;
 }, yup.AnyObject, {
     [x: string]: any;

package/DialogContainer/PromptDialog.js

@@ -37,13 +37,18 @@ const yup = __importStar(require("yup"));
 const SectionControl_1 = require("../DataForm/SectionControl");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function PromptDialog(props) {
-    const { language } = (0, locale_1.useLocale)();
+    const { language, region } = (0, locale_1.useLocale)();
     const formValidationStrings = (0, form_1.useFormValidationStrings)();
     const form = (0, react_hook_form_1.useForm)({
         mode: 'all',
         defaultValues: props.defaultValues,
         shouldUnregister: false,
-        resolver: (0, exports.formValidator)(props.attributes, language, formValidationStrings),
+        resolver: (0, exports.formValidator)({
+            attributes: props.attributes,
+            language,
+            strings: formValidationStrings,
+            region,
+        }),
     });
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             props.onDismiss?.();
@@ -60,7 +65,7 @@ function PromptDialog(props) {
                                             const errorMessage = fieldState.isTouched || formState.isSubmitted
                                                 ? fieldState.error?.message
                                                 : '';
-                                            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError }) }));
+                                            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: attribute.readonly }) }));
                                         } }, attributeName));
                                 }) })] }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
                                     props.onCancel?.();
@@ -70,24 +75,29 @@ function PromptDialog(props) {
                                     })();
                                 }, children: props.confirmText ?? 'Confirm' })] })] }) }) }));
 }
-exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes, language, strings) {
+exports.formValidator = (0, lodash_1.memoize)(function formValidator({ attributes, language, strings, region, }) {
     return async (values, context, options) => {
-        const validator = (0, exports.generateValidationSchema)(attributes, language, strings);
+        const validator = (0, exports.generateValidationSchema)({
+            attributes,
+            language,
+            strings,
+            region,
+        });
         const resolver = (0, yup_1.yupResolver)(validator);
         const result = await resolver(values, context, options);
         return result;
     };
-}, (attributes) => JSON.stringify({ attributes }));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes, language, strings) {
+}, (options) => JSON.stringify(options));
+exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema({ attributes, language, strings, region, }) {
     const columns = Object.keys(attributes);
     return yup.object().shape({
         ...columns.reduce((acc, column) => {
             const attribute = attributes[column];
-            const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings);
+            const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings, region);
             return {
                 ...acc,
                 [column]: validationSchema,
             };
         }, {}),
     });
-}, (attributes) => JSON.stringify({ attributes }));
+}, (options) => JSON.stringify(options));

package/PageEntityForm/RecordAvatar.js

@@ -23,6 +23,7 @@ const RecordAvatar = () => {
     const dataService = (0, transport_1.useDataService)();
     const refresh = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.refresh);
     const [showAvatarChangeDialog, setShowAvatarChangeDialog] = (0, react_1.useState)(false);
+    const fileService = (0, transport_1.useFileService)();
     const { showProgressIndicator, hideProgressIndicator } = (0, progress_indicator_1.useProgressIndicator)();
     const openErrorDialog = (0, dialog_1.useOpenErrorDialog)();
     if (!schema.avatarAttribute) {
@@ -73,7 +74,10 @@ const RecordAvatar = () => {
         }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: { width: 36, height: 36 }, name: recordTitle, color: (0, avatar_1.getAvatarColor)(recordTitle), image: {
                     src: value?.url,
                 }, onClick: () => {
+                    if (!fileService) {
+                        return;
+                    }
                     setShowAvatarChangeDialog(true);
-                } }), !!recordId && ((0, jsx_runtime_1.jsx)(UploadImageDialog_1.UploadImageDialog, { recordTitle: recordTitle, currentImage: value, onChange: handleChange, recordId: recordId, open: showAvatarChangeDialog, onOpenChange: (open) => setShowAvatarChangeDialog(open) }))] }));
+                } }), !!recordId && !!fileService && ((0, jsx_runtime_1.jsx)(UploadImageDialog_1.UploadImageDialog, { recordTitle: recordTitle, currentImage: value, onChange: handleChange, recordId: recordId, open: showAvatarChangeDialog, onOpenChange: (open) => setShowAvatarChangeDialog(open) }))] }));
 };
 exports.RecordAvatar = RecordAvatar;

package/PageEntityForm/SectionContainer.d.ts

@@ -3,4 +3,4 @@ import { SchemaAttributes } from '@headless-adminapp/core/schema';
 export declare function SectionContainer<S extends SchemaAttributes = SchemaAttributes>({ section }: {
     section: Section<S>;
     readOnly: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;

package/PageEntityForm/SectionContainer.js

@@ -2,9 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionContainer = SectionContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const constants_1 = require("@headless-adminapp/app/dataform/constants");
+const utils_1 = require("@headless-adminapp/app/dataform/DataFormProvider/utils");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const useEventManager_1 = require("@headless-adminapp/app/dataform/hooks/useEventManager");
 const locale_1 = require("@headless-adminapp/app/locale");
-const utils_1 = require("@headless-adminapp/app/locale/utils");
+const utils_2 = require("@headless-adminapp/app/locale/utils");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const componentStore_1 = require("../componentStore");
 const SectionControl_1 = require("../DataForm/SectionControl");
@@ -15,9 +21,23 @@ function SectionContainer({ section }) {
     const schema = (0, hooks_1.useDataFormSchema)();
     const formInstance = (0, hooks_1.useFormInstance)();
     const recordId = (0, hooks_1.useRecordId)();
-    const readonly = (0, hooks_1.useFormIsReadonly)();
+    const isFormReadonly = (0, hooks_1.useFormIsReadonly)();
     const { language } = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_1.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: section.controls.map((control, index) => {
+    const eventManager = (0, useEventManager_1.useEventManager)();
+    const disabledControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.disabledControls);
+    const hiddenControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenControls);
+    const requiredFields = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.requiredFields);
+    const hiddenSections = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenSections);
+    const visibleControls = (0, react_1.useMemo)(() => section.controls.filter((control) => {
+        return !(0, utils_1.getIsControlHidden)({
+            control,
+            hiddenControls,
+        });
+    }), [section.controls, hiddenControls]);
+    if (hiddenSections[section.name] || visibleControls.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_2.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: visibleControls.map((control, index) => {
             switch (control.type) {
                 case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
@@ -28,6 +48,17 @@ function SectionContainer({ section }) {
                             Control = OverrideControl;
                         }
                     }
+                    const disabled = (0, utils_1.getIsFieldDisabled)({
+                        isFormReadonly,
+                        disabledFields: disabledControls,
+                        attribute,
+                        control,
+                    });
+                    const required = (0, utils_1.getIsFieldRequired)({
+                        attribute,
+                        requiredFields,
+                        control,
+                    });
                     return ((0, jsx_runtime_1.jsx)("div", { style: {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
@@ -42,7 +73,10 @@ function SectionContainer({ section }) {
                                     attribute.localizedLabels?.[language] ??
                                     control.label ??
                                     attribute.label;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true, fileServiceContext: {
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: (value) => {
+                                            field.onChange(value);
+                                            eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, control.attributeName, value);
+                                        }, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: disabled, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true, fileServiceContext: {
                                             type: 'entity-form',
                                             recordId,
                                             attributeName: control.attributeName,

package/PageEntityForm/StandardControl.d.ts

@@ -11,7 +11,6 @@ export interface StandardControlProps {
     onChange: (value: any) => void;
     onBlur?: () => void;
     fileServiceContext?: Record<string, unknown>;
-    disabled?: boolean;
     borderOnFocusOnly?: boolean;
     hideLabel?: boolean;
     hidePlaceholder?: boolean;

package/PageEntityForm/StandardControl.js

@@ -35,12 +35,12 @@ const StandardControl = (props) => {
     name, value, onBlur, onChange, 
     // dataService,
     // fileService,
-    disabled, borderOnFocusOnly, placeholder: _placeholder, 
+    borderOnFocusOnly, placeholder: _placeholder, 
     // hideLabel,
     hidePlaceholder, readOnly, 
     // quickViewControl,
     allowNavigation, allowNewRecord, } = props;
-    const isDisabled = attribute.readonly || disabled;
+    const isDisabled = readOnly;
     // const label = hideLabel ? undefined : _label ?? attribute.label;
     const placeholder = hidePlaceholder
         ? undefined
@@ -51,7 +51,7 @@ const StandardControl = (props) => {
     const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
     // const { openQuickCreate } = useQuickCreateForm();
     switch (attribute.type) {
-        case 'string':
+        case 'string': {
             const controlProps = {
                 name,
                 placeholder,
@@ -59,7 +59,7 @@ const StandardControl = (props) => {
                 onChange,
                 onBlur,
                 error: isError,
-                disabled: isDisabled,
+                disabled: readOnly,
                 readOnly,
             };
             switch (attribute.format) {
@@ -91,6 +91,7 @@ const StandardControl = (props) => {
                 default:
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
             }
+        }
         case 'number': {
             switch (attribute.format) {
                 case 'decimal': {

package/PageEntityForm/UploadImageDialog.js

@@ -38,6 +38,9 @@ const UploadImageDialog = ({ currentImage, recordTitle, recordId, onChange, open
     };
     const { isPending, mutate: handleApply } = (0, react_query_1.useMutation)({
         mutationFn: async () => {
+            if (!fileService) {
+                throw new Error('File service is not available');
+            }
             if (file) {
                 const url = await fileService.uploadFile(file, {
                     context: {

package/form/controls/AttachmentControl.d.ts

@@ -13,12 +13,12 @@ export declare function useAttachmentSelector({ fileService, fileServiceContext,
     selectFile: (accept: string) => void;
 };
 export interface AttachmentImageControlProps extends ControlProps<FileObject> {
-    fileService: IFileService;
+    fileService: IFileService | null;
     fileServiceContext?: Record<string, unknown>;
     location: AttachmentAttribute['location'];
 }
 interface AttachmentControlProps extends ControlProps<FileObject> {
-    fileService: IFileService;
+    fileService: IFileService | null;
     fileServiceContext?: Record<string, unknown>;
     location: AttachmentAttribute['location'];
     format: AttachmentAttribute['format'];

package/form/controls/EmailControl.d.ts

@@ -3,4 +3,4 @@ export interface EmailControlProps extends ControlProps<string> {
     autoComplete?: string;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
 }
-export declare function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }: EmailControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }: Readonly<EmailControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/EmailControl.js

@@ -15,7 +15,7 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
                     : onChange?.(e.target.value);
         }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
-        disabled: disabled, readOnly: readOnly, autoComplete: autoComplete, style: {
+        readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             flex: 1,
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => window.open(`mailto:${value}`, '_blank'), color: "primary", appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Mail, {}), size: "small" })) : undefined }));

package/form/controls/TelephoneControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface TelephoneControlProps extends ControlProps<string> {
     autoComplete?: string;
 }
-export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }: Readonly<TelephoneControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/TelephoneControl.js

@@ -3,14 +3,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TelephoneControl = TelephoneControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const phone_1 = require("@headless-adminapp/app/utils/phone");
 const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
 function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    const [internalValue, setInternalValue] = (0, react_1.useState)('');
+    const { region } = (0, locale_1.useLocale)();
+    const number = (0, react_1.useMemo)(() => {
+        if (!value) {
+            return null;
+        }
+        return (0, phone_1.parsePhoneNumber)(value, region);
+    }, [value, region]);
+    (0, react_1.useEffect)(() => {
+        setInternalValue(number?.formattedInternationalValue ?? '');
+    }, [number]);
+    const handleChange = () => {
+        const parsedPhoneNumber = (0, phone_1.parsePhoneNumber)(internalValue, region);
+        setInternalValue(parsedPhoneNumber.formattedInternationalValue);
+        onChange?.(parsedPhoneNumber.rawValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: (e) => setInternalValue?.(e.target.value), onBlur: () => {
+            handleChange();
+            onBlur?.();
+        }, onFocus: () => onFocus?.(), 
         // invalid={error}
         readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             width: '100%',
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 
         // size="sm"
-        contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(`tel:${value}`, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
+        contentAfter: !!number?.uri ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(number.uri, '_blank'), title: number.uri, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.57",
+  "version": "0.0.17-alpha.61",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -42,5 +42,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "94ff249ba308bb261b4835136f2b8d7e2ec1676c"
+  "gitHead": "a7c93843f02223313660e422a21db0c2eefb3296"
 }