@headless-adminapp/fluent 0.0.17-alpha.7 → 1.0.0

package/form/controls/DateTimeControl.js

@@ -5,19 +5,114 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateTimeControl = DateTimeControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
 const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
+const react_timepicker_compat_1 = require("@fluentui/react-timepicker-compat");
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const react_1 = require("react");
+dayjs_1.default.extend(customParseFormat_1.default);
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
 function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
-    // const { shortDate: dateFormat } = useLocale();
-    // return (
-    //   <TimePicker
-    // )
-    return ((0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD HH:mm:ss') : '', 
-        // size="sm"
-        // error={error}
-        // maxDate={maxDate}
-        // minDate={minDate}
-        disabled: disabled, readOnly: readOnly, 
-        // inputFormat={inputFormat}
-        value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? date.toISOString() : null) }));
+    const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
+    const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat) : '');
+    const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
+    internalTimeValueRef.current = internalTimeValue;
+    (0, react_1.useEffect)(() => {
+        const updatedValue = value
+            ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat)
+            : '';
+        if (internalTimeValueRef.current !== updatedValue) {
+            setInternalTimeValue(updatedValue);
+        }
+    }, [value, timezone, timeFormat]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: react_components_1.tokens.spacingHorizontalS,
+        }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormat) : '', disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
+                    if (!date) {
+                        onChange?.(null);
+                    }
+                    else if (!value) {
+                        onChange?.((0, dayjs_1.default)(date).tz(timezone, true).toISOString());
+                    }
+                    else {
+                        onChange?.((0, dayjs_1.default)(date)
+                            .tz(timezone, true)
+                            .set('hour', (0, dayjs_1.default)(value).tz(timezone).hour())
+                            .set('minute', (0, dayjs_1.default)(value).tz(timezone).minute())
+                            .toISOString());
+                    }
+                }, 
+                // allowTextInput={true}
+                contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginRight: -4,
+                        color: react_components_1.tokens.colorNeutralForeground2,
+                    }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }), style: { flex: 1 }, input: {
+                    style: { minWidth: 0, width: '100%' },
+                } }), (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: { flex: 1, minWidth: 0 }, input: {
+                    style: { minWidth: 0 },
+                }, readOnly: readOnly || disabled || !value, 
+                // selectedTime={value ? new Date(value) : null}
+                selectedTime: value
+                    ? (0, dayjs_1.default)((0, dayjs_1.default)(value).tz(timezone).format('YYYY-MM-DD HH:mm:ss')).toDate()
+                    : null, freeform: true, 
+                // formatDateToTimeString={(date) => {
+                //   return dayjs(date).tz(timezone).format(timeFormat);
+                // }}
+                value: internalTimeValue, onTimeChange: (_, data) => {
+                    const dateValue = value
+                        ? (0, dayjs_1.default)(value).tz(timezone)
+                        : (0, dayjs_1.default)().tz(timezone);
+                    if (data.selectedTime) {
+                        onChange?.(dateValue
+                            .set('hour', (0, dayjs_1.default)(data.selectedTime).tz(timezone, true).hour())
+                            .set('minute', (0, dayjs_1.default)(data.selectedTime).tz(timezone, true).minute())
+                            .toISOString());
+                    }
+                    else if (data.selectedTimeText) {
+                        let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
+                        if (!resolvedTime) {
+                            setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
+                            return;
+                        }
+                        const newValue = dateValue
+                            .set('hour', resolvedTime.getHours())
+                            .set('minute', resolvedTime.getMinutes())
+                            .toISOString();
+                        if (newValue !== value) {
+                            onChange?.(newValue);
+                        }
+                        setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).tz(timezone).format(timeFormat) : '');
+                    }
+                }, onInput: (e) => {
+                    setInternalTimeValue(e.currentTarget.value);
+                }, onBlur: () => {
+                    onBlur?.();
+                }, expandIcon: (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginRight: -4,
+                        color: react_components_1.tokens.colorNeutralForeground2,
+                    }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) })] }));
+}
+function resolveTimeValue(value, timeFormat) {
+    if (!value) {
+        return;
+    }
+    const time = (0, dayjs_1.default)(value, timeFormat);
+    if (!time.isValid()) {
+        return;
+    }
+    return time.toDate();
 }

package/form/controls/DecimalControl.d.ts

@@ -0,0 +1,5 @@
+import { ControlProps } from './types';
+export interface DecimalControlProps extends ControlProps<number> {
+    decimalPlaces?: number;
+}
+export declare function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, }: DecimalControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/DecimalControl.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DecimalControl = DecimalControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable unused-imports/no-unused-vars */
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, }) {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
+    const internalValueRef = (0, react_1.useRef)(internalValue);
+    internalValueRef.current = internalValue;
+    (0, react_1.useEffect)(() => {
+        let _value = '';
+        if (typeof value === 'number') {
+            _value = value.toString();
+        }
+        if (!_value && internalValueRef.current === '-') {
+            return;
+        }
+        if (internalValueRef.current !== _value) {
+            setInternalValue(_value);
+        }
+    }, [value]);
+    const handleChange = (e) => {
+        let value = e.target.value;
+        if (!value) {
+            setInternalValue('');
+            onChange?.(null);
+            return;
+        }
+        value = value.replace(',', '');
+        if (value === '-') {
+            setInternalValue('-');
+            onChange?.(null);
+            return;
+        }
+        if (isNaN(Number(value))) {
+            return;
+        }
+        if (decimalPlaces) {
+            const parts = value.split('.');
+            if (parts.length > 1) {
+                value = `${parts[0]}.${parts[1].slice(0, decimalPlaces)}`;
+            }
+        }
+        setInternalValue(value);
+        onChange?.(Number(value));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), readOnly: readOnly || disabled, style: {
+            width: '100%',
+        } }));
+}

package/form/controls/DurationControl.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ControlProps } from './types';
+export type DurationControlProps = ControlProps<number>;
+export declare const DurationControl: FC<DurationControlProps>;

package/form/controls/DurationControl.js

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DurationControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const useStyles = (0, react_components_1.makeStyles)({
+    listbox: {
+        maxHeight: '300px !important',
+    },
+});
+const options = [
+    { text: '1 minute', value: '1' },
+    {
+        text: '5 minutes',
+        value: '5',
+    },
+    {
+        text: '15 minutes',
+        value: '15',
+    },
+    {
+        text: '30 minutes',
+        value: '30',
+    },
+    {
+        text: '45 minutes',
+        value: '45',
+    },
+    {
+        text: '1 hour',
+        value: '60',
+    },
+    {
+        text: '1.5 hours',
+        value: '90',
+    },
+    {
+        text: '2 hours',
+        value: '120',
+    },
+    {
+        text: '2.5 hours',
+        value: '150',
+    },
+    {
+        text: '3 hours',
+        value: '180',
+    },
+    {
+        text: '3.5 hours',
+        value: '210',
+    },
+    {
+        text: '4 hours',
+        value: '240',
+    },
+    {
+        text: '4.5 hours',
+        value: '270',
+    },
+    {
+        text: '5 hours',
+        value: '300',
+    },
+    {
+        text: '5.5 hours',
+        value: '330',
+    },
+    {
+        text: '6 hours',
+        value: '360',
+    },
+    {
+        text: '6.5 hours',
+        value: '390',
+    },
+    {
+        text: '7 hours',
+        value: '420',
+    },
+    {
+        text: '7.5 hours',
+        value: '450',
+    },
+    {
+        text: '8 hours',
+        value: '480',
+    },
+    {
+        text: '1 day',
+        value: '1440',
+    },
+    {
+        text: '2 days',
+        value: '2880',
+    },
+    {
+        text: '3 days',
+        value: '4320',
+    },
+];
+const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, }) => {
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [filterEnabled, setFilterEnabled] = (0, react_1.useState)(false);
+    const styles = useStyles();
+    (0, react_1.useEffect)(() => {
+        setSearchText(getDisplayValue(value));
+    }, [value]);
+    const filteredItems = (0, react_1.useMemo)(() => {
+        if (!filterEnabled) {
+            return options;
+        }
+        return options.filter((item) => item.text.toLowerCase().includes(searchText.toLowerCase()));
+    }, [searchText, filterEnabled]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: '100%' }, children: (0, jsx_runtime_1.jsx)(react_components_1.Combobox, { name: name, appearance: "filled-darker", placeholder: placeholder, inputMode: "search", style: { width: '100%', minWidth: 'unset' }, listbox: { className: styles.listbox }, autoComplete: "off", readOnly: readOnly || disabled, value: searchText, disableAutoFocus: true, selectedOptions: value ? [value.toString()] : [], onBlur: () => {
+                let newValue = null;
+                if (searchText) {
+                    newValue = resolveValue(searchText);
+                    if (newValue === undefined) {
+                        newValue = value;
+                    }
+                }
+                if (newValue !== null) {
+                    console.log('onBlur', newValue);
+                    onChange?.(newValue);
+                }
+                setSearchText(getDisplayValue(newValue));
+                setFilterEnabled(false);
+                onBlur?.();
+            }, onFocus: onFocus, id: id, autoFocus: autoFocus, onChange: (e) => {
+                setFilterEnabled(true);
+                setSearchText(e.target.value);
+            }, onOptionSelect: (e, item) => {
+                console.log('onOptionSelect', e, item);
+                if (!item.optionValue) {
+                    return;
+                }
+                else {
+                    onChange?.(Number(item.optionValue));
+                }
+                setSearchText('');
+            }, children: filteredItems.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item.value, children: item.text }, item.value))) }) }));
+};
+exports.DurationControl = DurationControl;
+function getDisplayValue(value) {
+    if (!value) {
+        return '';
+    }
+    // No decimal, if value is decimal, round to nearest whole number
+    // 1 - 1 minute
+    // 2-59 minutes -> 2-59 minutes
+    // 90 minutes -> 1.5 hours
+    // more than a day -> 1 day, 1.5 days, 2 days, etc.
+    // check if value has decimal
+    if (value % 1 !== 0) {
+        // round to nearest whole number
+        value = Math.round(value);
+    }
+    if (!value) {
+        return '';
+    }
+    if (value === 1) {
+        return '1 minute';
+    }
+    if (value < 60) {
+        return `${value} minutes`;
+    }
+    if (value === 60) {
+        return '1 hour';
+    }
+    if (value < 1440) {
+        return `${Number((value / 60).toFixed(2))} hours`;
+    }
+    if (value === 1440) {
+        return '1 day';
+    }
+    return `${Number((value / 1440).toFixed(2))} days`;
+}
+function resolveValue(value) {
+    if (!value) {
+        return null;
+    }
+    const numberValue = Number(value);
+    if (!isNaN(numberValue)) {
+        return numberValue;
+    }
+    const timeFormat = /^(\d+):[0-5][0-9]$/;
+    if (timeFormat.test(value)) {
+        const [hours, minutes] = value.split(':').map(Number);
+        return hours * 60 + minutes;
+    }
+    const minutesFormat = /^(\d+(\.\d+)?) m/;
+    if (minutesFormat.test(value)) {
+        const [, minutes] = value.match(minutesFormat);
+        return Math.floor(Number(minutes));
+    }
+    const hoursFormat = /^(\d+(\.\d+)?) h/;
+    if (hoursFormat.test(value)) {
+        const [, hours] = value.match(hoursFormat);
+        return Math.floor(Number(hours) * 60);
+    }
+    const daysFormat = /^(\d+(\.\d+)?) d/;
+    if (daysFormat.test(value)) {
+        const [, days] = value.match(daysFormat);
+        return Math.floor(Number(days) * 1440);
+    }
+    return undefined;
+}

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

@@ -9,13 +9,13 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
         // size="sm"
         value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
-                ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toUpperCase())
+                ? onChange?.(e.target.value.toUpperCase())
                 : textTransform === 'lowercase'
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toLowerCase())
-                    : onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
-        }, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+                    ? onChange?.(e.target.value.toLowerCase())
+                    : 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/IntegerControl.d.ts

@@ -0,0 +1,4 @@
+import { ControlProps } from './types';
+export interface IntegerControlProps extends ControlProps<number> {
+}
+export declare function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }: IntegerControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/IntegerControl.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntegerControl = IntegerControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable unused-imports/no-unused-vars */
+const react_components_1 = require("@fluentui/react-components");
+function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value ?? null, readOnly: readOnly || disabled, onChange: (e, data) => {
+            if (data.value !== undefined) {
+                onChange?.(data.value);
+            }
+            else if (!data.displayValue) {
+                onChange?.(null);
+            }
+            else if (data.displayValue !== undefined) {
+                const newValue = parseFloat(data.displayValue);
+                if (!Number.isNaN(newValue)) {
+                    onChange?.(newValue);
+                }
+            }
+            else {
+                onChange?.(null);
+            }
+        } }));
+}

package/form/controls/LookupControl.d.ts

@@ -11,6 +11,7 @@ export type DataLookup = {
     id: string;
     name: string;
     logicalName: string;
+    avatar?: string;
 };
 export type LookupControlProps = ControlProps<DataLookup> & {
     async?: boolean;

package/form/controls/LookupControl.js

@@ -3,17 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LookupControl = LookupControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const app_1 = require("@headless-adminapp/app/app");
 const hooks_1 = require("@headless-adminapp/app/hooks");
 const hooks_2 = require("@headless-adminapp/app/route/hooks");
-const app_1 = require("@headless-adminapp/core/experience/app");
+const app_2 = require("@headless-adminapp/core/experience/app");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
 const RecordCard_1 = require("../../PageEntityForm/RecordCard");
+const avatar_1 = require("../../utils/avatar");
 const useLookupData_1 = require("./useLookupData");
 function LookupControl(props) {
     const Control = LookupControlMd;
-    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, props));
+    return (0, jsx_runtime_1.jsx)(Control, { ...props });
 }
 const useStyles = (0, react_components_1.makeStyles)({
     option: {
@@ -46,7 +48,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
         }
         return routeResolver({
             logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
+            type: app_2.PageType.EntityForm,
             id: value.id,
         });
     }, [allowNavigation, routeResolver, schema.logicalName, value]);
@@ -85,7 +87,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const { isLoading: isViewLoading, view } = (0, useLookupData_1.useGetLookupView)(schema.logicalName, viewId);
     const { data, isLoading } = (0, useLookupData_1.useLookupData)({
         schema,
-        view: view === null || view === void 0 ? void 0 : view.experience,
+        view: view?.experience,
         searchText: debouncedSearchText,
         dataService,
         enabled: lookupEnabled && !isViewLoading && !value && !readOnly && !disabled,
@@ -101,33 +103,75 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const handleChange = (value) => {
         setSearchText('');
         if (!value) {
-            return onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return onChange?.(null);
         }
         else {
-            return onChange === null || onChange === void 0 ? void 0 : onChange({
+            return onChange?.({
                 id: value[schema.idAttribute],
                 name: value[schema.primaryAttribute],
                 logicalName: schema.logicalName,
             });
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: placeholder, inputMode: "search", style: { width: '100%' }, autoComplete: "off", readOnly: readOnly || disabled, 
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%', minWidth: 'unset' }, autoComplete: "off", readOnly: readOnly || disabled, 
                 // disabled={disabled}
                 open: open && !value && !readOnly && !disabled, value: !value ? searchText : '', onOpenChange: (e, data) => setOpen(data.open), onChange: (e) => {
                     setSearchText(e.target.value);
                 }, onOptionSelect: (e, item) => {
-                    const _item = data === null || data === void 0 ? void 0 : data.records.find((x) => String(x[schema.idAttribute]) === item.optionValue);
-                    handleChange(_item !== null && _item !== void 0 ? _item : null);
-                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data === null || data === void 0 ? void 0 : data.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view === null || view === void 0 ? void 0 : view.experience.card, record: item, schema: schema }) }, item[schema.idAttribute]))), !isLoading && !(data === null || data === void 0 ? void 0 : data.records.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    const _item = data?.records.find((x) => String(x[schema.idAttribute]) === String(item.optionValue));
+                    handleChange(_item ?? null);
+                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view?.experience.card, record: item, schema: schema }) }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                             paddingInline: react_components_1.tokens.spacingHorizontalL,
                             paddingBlock: react_components_1.tokens.spacingVerticalS,
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: loockupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), children: loockupStrings.newRecord }) })] }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: loockupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
+                                        router.push(routeResolver({
+                                            logicalName: schema.logicalName,
+                                            type: app_2.PageType.EntityForm,
+                                        }));
+                                    }, children: loockupStrings.newRecord }) })] }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     alignItems: 'center',
                     paddingInline: 4,
                     display: 'flex',
                 }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", children: (0, jsx_runtime_1.jsx)(react_components_1.Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: { paddingRight: !disabled && !readOnly ? 0 : 5 }, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
-                                onChange === null || onChange === void 0 ? void 0 : onChange(null);
-                            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), children: allowNavigation && path ? ((0, jsx_runtime_1.jsx)(react_components_1.Link, { href: path, onClick: handleOpenRecord, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value === null || value === void 0 ? void 0 : value.name }) })) : ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value === null || value === void 0 ? void 0 : value.name })) }) }) }))] }));
+                                onChange?.(null);
+                            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), primaryText: {
+                            style: {
+                                paddingBottom: 0,
+                            },
+                        }, children: allowNavigation && path ? ((0, jsx_runtime_1.jsxs)(react_components_1.Link, { href: path, onClick: handleOpenRecord, style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: react_components_1.tokens.spacingHorizontalXS,
+                            }, children: [(0, jsx_runtime_1.jsx)(LookupAvatar, { schema: schema, logicalName: schema.logicalName, value: value }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: value?.name })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value?.name })) }) }) }))] }));
+};
+const LookupAvatar = ({ logicalName, schema, value, }) => {
+    const { schemaMetadataDic } = (0, app_1.useAppContext)();
+    if (!schema.avatarAttribute) {
+        const experienceSchema = schemaMetadataDic[logicalName];
+        const Icon = experienceSchema.icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
+        return ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+                width: 20,
+                height: 20,
+            }, icon: {
+                style: {
+                    background: 'transparent',
+                    color: 'inherit',
+                },
+                children: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }),
+            } }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+            width: 20,
+            height: 20,
+            fontSize: react_components_1.tokens.fontSizeBase100,
+            backgroundColor: 'transparent',
+        }, name: value?.name, color: (0, avatar_1.getAvatarColor)(value?.name), image: {
+            src: value?.avatar,
+        } }));
 };

package/form/controls/MultiSelectControl.js

@@ -8,10 +8,10 @@ function MultiSelectControl({ value, onChange, options, id, name, disabled, onBl
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {
         const selectedOptions = options.filter((x) => value.includes(String(x.value)));
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions.map((x) => x.value));
+        onChange?.(selectedOptions.map((x) => x.value));
     };
-    const selectedOptions = (0, react_1.useMemo)(() => options.filter((x) => value === null || value === void 0 ? void 0 : value.includes(x.value)), [options, value]);
+    const selectedOptions = (0, react_1.useMemo)(() => options.filter((x) => value?.includes(x.value)), [options, value]);
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { placeholder: placeholder, id: id, name: name, appearance: "filled-darker", multiselect: true, value: selectedOptions.map((x) => x.label).join(', '), selectedOptions: value ? value.map(String) : [], onOptionSelect: (event, data) => {
             handleChange(data.selectedOptions);
-        }, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), disabled: disabled, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), disabled: disabled, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }