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

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?.();
@@ -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/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.59",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -42,5 +42,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "94ff249ba308bb261b4835136f2b8d7e2ec1676c"
+  "gitHead": "813d07729a10a5613b46f012ba4b24bcaab384dc"
 }