@headless-adminapp/fluent 0.0.17-alpha.53 → 0.0.17-alpha.55

package/form/controls/DateTimeControl.js

@@ -1,66 +1,72 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { DatePicker } from '@fluentui/react-datepicker-compat';
-import { TimePicker } from '@fluentui/react-timepicker-compat';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { Icons } from '@headless-adminapp/icons';
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import { useEffect, useRef, useState } from 'react';
-dayjs.extend(customParseFormat);
-dayjs.extend(utc);
-dayjs.extend(timezone);
-export function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
-    const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = useLocale();
-    const [internalTimeValue, setInternalTimeValue] = useState(value ? dayjs(value).tz(timezone).format(timeFormat) : '');
-    const internalTimeValueRef = useRef(internalTimeValue);
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 { 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;
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const updatedValue = value
-            ? dayjs(value).tz(timezone).format(timeFormat)
+            ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat)
             : '';
         if (internalTimeValueRef.current !== updatedValue) {
             setInternalTimeValue(updatedValue);
         }
     }, [value, timezone, timeFormat]);
-    return (_jsxs("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
-            gap: tokens.spacingHorizontalS,
-        }, children: [_jsx(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 ? dayjs(date).tz(timezone).format(dateFormat) : '', disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
+            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 || onChange === void 0 ? void 0 : onChange(null);
+                        onChange?.(null);
                     }
                     else if (!value) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(dayjs(date).tz(timezone, true).toISOString());
+                        onChange?.((0, dayjs_1.default)(date).tz(timezone, true).toISOString());
                     }
                     else {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(dayjs(date)
+                        onChange?.((0, dayjs_1.default)(date)
                             .tz(timezone, true)
-                            .set('hour', dayjs(value).tz(timezone).hour())
-                            .set('minute', dayjs(value).tz(timezone).minute())
+                            .set('hour', (0, dayjs_1.default)(value).tz(timezone).hour())
+                            .set('minute', (0, dayjs_1.default)(value).tz(timezone).minute())
                             .toISOString());
                     }
                 }, 
                 // allowTextInput={true}
-                contentAfter: _jsx("div", { style: {
+                contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                         marginRight: -4,
-                        color: tokens.colorNeutralForeground2,
-                    }, children: _jsx(Icons.Calendar, { size: 20 }) }), style: { flex: 1 }, input: {
+                        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%' },
-                } }), _jsx(TimePicker, { appearance: "filled-darker", style: { flex: 1, minWidth: 0 }, input: {
+                } }), (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, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
                     const dateValue = value
-                        ? dayjs(value).tz(timezone)
-                        : dayjs().tz(timezone);
+                        ? (0, dayjs_1.default)(value).tz(timezone)
+                        : (0, dayjs_1.default)().tz(timezone);
                     if (data.selectedTime) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(dateValue
+                        onChange?.(dateValue
                             .set('hour', data.selectedTime.getHours())
                             .set('minute', data.selectedTime.getMinutes())
                             .toISOString());
@@ -68,7 +74,7 @@ export function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, pl
                     else if (data.selectedTimeText) {
                         let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
                         if (!resolvedTime) {
-                            setInternalTimeValue(value ? dayjs(value).format(timeFormat) : '');
+                            setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
                             return;
                         }
                         const newValue = dateValue
@@ -76,27 +82,27 @@ export function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, pl
                             .set('minute', resolvedTime.getMinutes())
                             .toISOString();
                         if (newValue !== value) {
-                            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                            onChange?.(newValue);
                         }
-                        setInternalTimeValue(newValue ? dayjs(newValue).tz(timezone).format(timeFormat) : '');
+                        setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).tz(timezone).format(timeFormat) : '');
                     }
                 }, onInput: (e) => {
                     setInternalTimeValue(e.currentTarget.value);
                 }, onBlur: () => {
-                    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-                }, expandIcon: _jsx("div", { style: {
+                    onBlur?.();
+                }, expandIcon: (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                         marginRight: -4,
-                        color: tokens.colorNeutralForeground2,
-                    }, children: _jsx(Icons.Clock, { size: 20 }) }) })] }));
+                        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 = dayjs(value, timeFormat);
+    const time = (0, dayjs_1.default)(value, timeFormat);
     if (!time.isValid()) {
         return;
     }

package/form/controls/DecimalControl.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"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 */
-import { Input } from '@fluentui/react-components';
-import { useEffect, useRef, useState } from 'react';
-export function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, }) {
-    const [internalValue, setInternalValue] = useState(value ? value.toString() : '');
-    const internalValueRef = useRef(internalValue);
+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;
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let _value = '';
         if (typeof value === 'number') {
             _value = value.toString();
@@ -22,13 +25,13 @@ export function DecimalControl({ value, onChange, id, name, onBlur, onFocus, err
         let value = e.target.value;
         if (!value) {
             setInternalValue('');
-            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            onChange?.(null);
             return;
         }
         value = value.replace(',', '');
         if (value === '-') {
             setInternalValue('-');
-            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            onChange?.(null);
             return;
         }
         if (isNaN(Number(value))) {
@@ -41,9 +44,9 @@ export function DecimalControl({ value, onChange, id, name, onBlur, onFocus, err
             }
         }
         setInternalValue(value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+        onChange?.(Number(value));
     };
-    return (_jsx(Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), disabled: disabled, readOnly: readOnly, style: {
+    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?.(), disabled: disabled, readOnly: readOnly, style: {
             width: '100%',
         } }));
 }

package/form/controls/DurationControl.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Combobox, makeStyles, Option } from '@fluentui/react-components';
-import { useEffect, useMemo, useState } from 'react';
-const useStyles = makeStyles({
+"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',
     },
@@ -97,20 +100,20 @@ const options = [
         value: '4320',
     },
 ];
-export const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, }) => {
-    const [searchText, setSearchText] = useState('');
-    const [filterEnabled, setFilterEnabled] = useState(false);
+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();
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         setSearchText(getDisplayValue(value));
     }, [value]);
-    const filteredItems = useMemo(() => {
+    const filteredItems = (0, react_1.useMemo)(() => {
         if (!filterEnabled) {
             return options;
         }
         return options.filter((item) => item.text.toLowerCase().includes(searchText.toLowerCase()));
     }, [searchText, filterEnabled]);
-    return (_jsx("div", { style: { position: 'relative', width: '100%' }, children: _jsx(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: () => {
+    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);
@@ -120,11 +123,11 @@ export const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, pl
                 }
                 if (newValue !== null) {
                     console.log('onBlur', newValue);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                    onChange?.(newValue);
                 }
                 setSearchText(getDisplayValue(newValue));
                 setFilterEnabled(false);
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                onBlur?.();
             }, onFocus: onFocus, id: id, autoFocus: autoFocus, onChange: (e) => {
                 setFilterEnabled(true);
                 setSearchText(e.target.value);
@@ -134,11 +137,12 @@ export const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, pl
                     return;
                 }
                 else {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(item.optionValue));
+                    onChange?.(Number(item.optionValue));
                 }
                 setSearchText('');
-            }, children: filteredItems.map((item) => (_jsx(Option, { value: item.value, children: item.text }, item.value))) }) }));
+            }, 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 '';

package/form/controls/EmailControl.js

@@ -1,19 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, Input, tokens } from '@fluentui/react-components';
-import { Icons } from '@headless-adminapp/icons';
-export function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }) {
-    return (_jsx(Input, { type: "email", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmailControl = EmailControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const icons_1 = require("@headless-adminapp/icons");
+function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "email", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
         // 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: {
             flex: 1,
-            paddingRight: tokens.spacingHorizontalXS,
-        }, contentAfter: !!value ? (_jsx(Button, { onClick: () => window.open(`mailto:${value}`, '_blank'), color: "primary", appearance: "transparent", icon: _jsx(Icons.Mail, {}), size: "small" })) : undefined }));
+            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.js

@@ -1,22 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"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 */
-import { SpinButton } from '@fluentui/react-components';
-export function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
-    return (_jsx(SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value !== null && value !== void 0 ? value : null, onChange: (e, data) => {
+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, onChange: (e, data) => {
             if (data.value !== undefined) {
-                onChange === null || onChange === void 0 ? void 0 : onChange(data.value);
+                onChange?.(data.value);
             }
             else if (!data.displayValue) {
-                onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                onChange?.(null);
             }
             else if (data.displayValue !== undefined) {
                 const newValue = parseFloat(data.displayValue);
                 if (!Number.isNaN(newValue)) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                    onChange?.(newValue);
                 }
             }
             else {
-                onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                onChange?.(null);
             }
         } }));
 }

package/form/controls/LookupControl.js

@@ -1,27 +1,30 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Body1, Combobox, Divider, Link, makeStyles, mergeClasses, Option, Spinner, Tag, TagGroup, tokens, ToolbarButton, } from '@fluentui/react-components';
-import { useAppContext } from '@headless-adminapp/app/app';
-import { useDebouncedValue } from '@headless-adminapp/app/hooks';
-import { useRouter, useRouteResolver, } from '@headless-adminapp/app/route/hooks';
-import { PageType } from '@headless-adminapp/core/experience/app';
-import { IconPlaceholder, Icons } from '@headless-adminapp/icons';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useAppStrings } from '../../App/AppStringContext';
-import { RecordCard } from '../../PageEntityForm/RecordCard';
-import { getAvatarColor } from '../../utils/avatar';
-import { useGetLookupView, useLookupData } from './useLookupData';
-export function LookupControl(props) {
+"use strict";
+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_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 _jsx(Control, Object.assign({}, props));
+    return (0, jsx_runtime_1.jsx)(Control, { ...props });
 }
-const useStyles = makeStyles({
+const useStyles = (0, react_components_1.makeStyles)({
     option: {
         padding: 0,
         '& .fui-Option__checkIcon': {
             display: 'none',
         },
         '&[data-activedescendant-focusvisible]': {
-            background: tokens.colorNeutralBackground1Hover,
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
             '&:after': {
                 border: 'none !important',
                 // background: tokens.colorNeutralBackground1Hover,
@@ -30,13 +33,13 @@ const useStyles = makeStyles({
     },
 });
 const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, schema, viewId, allowNavigation, allowNewRecord, }) => {
-    const [lookupEnabled, setLookupEnabled] = useState(false);
-    const [open, setOpen] = useState(false);
-    const [searchText, setSearchText] = useState('');
-    const { loockupStrings } = useAppStrings();
-    const routeResolver = useRouteResolver();
-    const router = useRouter();
-    const path = useMemo(() => {
+    const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const { loockupStrings } = (0, AppStringContext_1.useAppStrings)();
+    const routeResolver = (0, hooks_2.useRouteResolver)();
+    const router = (0, hooks_2.useRouter)();
+    const path = (0, react_1.useMemo)(() => {
         if (!value) {
             return '';
         }
@@ -45,11 +48,11 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
         }
         return routeResolver({
             logicalName: schema.logicalName,
-            type: PageType.EntityForm,
+            type: app_2.PageType.EntityForm,
             id: value.id,
         });
     }, [allowNavigation, routeResolver, schema.logicalName, value]);
-    const handleOpenRecord = useCallback((event) => {
+    const handleOpenRecord = (0, react_1.useCallback)((event) => {
         event.preventDefault();
         event.stopPropagation();
         if (!path) {
@@ -57,11 +60,11 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
         }
         router.push(path);
     }, [path, router]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (open)
             setLookupEnabled(true);
     }, [open]);
-    const [debouncedSearchText] = useDebouncedValue(searchText, 500);
+    const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
     const styles = useStyles();
     // const useLookupData = useMemo(
     //   () =>
@@ -81,15 +84,15 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     //   search: async ? debouncedSearchText : '',
     //   enabled: lookupEnabled,
     // });
-    const { isLoading: isViewLoading, view } = useGetLookupView(schema.logicalName, viewId);
-    const { data, isLoading } = useLookupData({
+    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,
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (value) {
             setSearchText(value.name);
         }
@@ -100,55 +103,54 @@ 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 (_jsxs("div", { style: { position: 'relative', width: '100%' }, children: [_jsxs(Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? (_jsx(Spinner, { size: "extra-tiny" })) : (_jsx(Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%', minWidth: 'unset' }, 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]) === String(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) => (_jsx(Option, { value: item[schema.idAttribute], className: mergeClasses(styles.option), text: item[schema.primaryAttribute], children: _jsx(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) && (_jsx("div", { style: {
-                            paddingInline: tokens.spacingHorizontalL,
-                            paddingBlock: tokens.spacingVerticalS,
-                        }, children: _jsx(Body1, { children: loockupStrings.noRecordsFound }) })), allowNewRecord && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx("div", { style: { marginTop: tokens.spacingVerticalXXS }, children: _jsx(ToolbarButton, { style: { fontWeight: 'normal' }, icon: _jsx(Icons.Add, {}), children: loockupStrings.newRecord }) })] }))] }), !!value && (_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: {
                     position: 'absolute',
                     inset: 0,
                     alignItems: 'center',
                     paddingInline: 4,
                     display: 'flex',
-                }, children: _jsx(TagGroup, { as: "div", children: _jsx(Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: { paddingRight: !disabled && !readOnly ? 0 : 5 }, dismissIcon: _jsx("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
-                                onChange === null || onChange === void 0 ? void 0 : onChange(null);
-                            }, children: _jsx(Icons.Close, { size: 16 }) }), primaryText: {
+                }, 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);
+                            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), primaryText: {
                             style: {
                                 paddingBottom: 0,
                             },
-                        }, children: allowNavigation && path ? (_jsxs(Link, { href: path, onClick: handleOpenRecord, style: {
+                        }, children: allowNavigation && path ? ((0, jsx_runtime_1.jsxs)(react_components_1.Link, { href: path, onClick: handleOpenRecord, style: {
                                 display: 'flex',
                                 alignItems: 'center',
-                                gap: tokens.spacingHorizontalXS,
-                            }, children: [_jsx(LookupAvatar, { schema: schema, logicalName: schema.logicalName, value: value }), _jsx(Body1, { style: {
+                                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 === null || value === void 0 ? void 0 : value.name })] })) : (_jsx(Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value === null || value === void 0 ? void 0 : value.name })) }) }) }))] }));
+                                    }, 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, }) => {
-    var _a, _b;
-    const { schemaMetadataDic } = useAppContext();
+    const { schemaMetadataDic } = (0, app_1.useAppContext)();
     if (!schema.avatarAttribute) {
         const experienceSchema = schemaMetadataDic[logicalName];
-        const Icon = (_b = (_a = experienceSchema.icon) !== null && _a !== void 0 ? _a : Icons.Entity) !== null && _b !== void 0 ? _b : IconPlaceholder;
-        return (_jsx(Avatar, { style: {
+        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: {
@@ -156,15 +158,15 @@ const LookupAvatar = ({ logicalName, schema, value, }) => {
                     background: 'transparent',
                     color: 'inherit',
                 },
-                children: _jsx(Icon, { size: 20 }),
+                children: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }),
             } }));
     }
-    return (_jsx(Avatar, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
             width: 20,
             height: 20,
-            fontSize: tokens.fontSizeBase100,
+            fontSize: react_components_1.tokens.fontSizeBase100,
             backgroundColor: 'transparent',
-        }, name: value === null || value === void 0 ? void 0 : value.name, color: getAvatarColor(value === null || value === void 0 ? void 0 : value.name), image: {
-            src: value === null || value === void 0 ? void 0 : value.avatar,
+        }, name: value?.name, color: (0, avatar_1.getAvatarColor)(value?.name), image: {
+            src: value?.avatar,
         } }));
 };

package/form/controls/MultiSelectControl.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Dropdown, Option } from '@fluentui/react-components';
-import { useMemo } from 'react';
-export default function MultiSelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
-    const transformedOptions = useMemo(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MultiSelectControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+function MultiSelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
+    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 = useMemo(() => options.filter((x) => value === null || value === void 0 ? void 0 : value.includes(x.value)), [options, value]);
-    return (_jsx(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) => {
+    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) => (_jsx(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))) }));
 }