@headless-adminapp/fluent 0.0.17-alpha.1

package/form/FormControl.js

@@ -0,0 +1,95 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+// import { AttachmentControl } from './controls/AttachmentControl';
+const CurrencyControl_1 = require("./controls/CurrencyControl");
+const DateControl_1 = require("./controls/DateControl");
+const DateTimeControl_1 = require("./controls/DateTimeControl");
+const EmailControl_1 = require("./controls/EmailControl");
+const LookupControl_1 = require("./controls/LookupControl");
+const MultiSelectControl_1 = __importDefault(require("./controls/MultiSelectControl"));
+const MultiSelectLookupControl_1 = require("./controls/MultiSelectLookupControl");
+const NumberControl_1 = require("./controls/NumberControl");
+const PasswordControl_1 = require("./controls/PasswordControl");
+const SelectControl_1 = __importDefault(require("./controls/SelectControl"));
+const SwitchControl_1 = require("./controls/SwitchControl");
+const TelephoneControl_1 = require("./controls/TelephoneControl");
+const TextAreaControl_1 = require("./controls/TextAreaControl");
+const TextControl_1 = require("./controls/TextControl");
+const FormControlLoading_1 = require("./FormControlLoading");
+function Control(props) {
+    const { type, label: _label, value, onChange } = props, rest = __rest(props, ["type", "label", "value", "onChange"]);
+    switch (type) {
+        case 'custom':
+            return props.renderControl({
+                value: props.value,
+                onChange: props.onChange,
+                disabled: props.disabled,
+            });
+        case 'text':
+            return ((0, jsx_runtime_1.jsx)(TextControl_1.TextControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'textarea':
+            return ((0, jsx_runtime_1.jsx)(TextAreaControl_1.TextAreaControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'telephone':
+            return ((0, jsx_runtime_1.jsx)(TelephoneControl_1.TelephoneControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'email':
+            return ((0, jsx_runtime_1.jsx)(EmailControl_1.EmailControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'password':
+            return ((0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'number':
+            return ((0, jsx_runtime_1.jsx)(NumberControl_1.NumberControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'currency':
+            return ((0, jsx_runtime_1.jsx)(CurrencyControl_1.CurrencyControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'date':
+            return ((0, jsx_runtime_1.jsx)(DateControl_1.DateControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'datetime':
+            return ((0, jsx_runtime_1.jsx)(DateTimeControl_1.DateTimeControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'select':
+            return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'multi-select':
+            return ((0, jsx_runtime_1.jsx)(MultiSelectControl_1.default, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'lookup':
+            return ((0, jsx_runtime_1.jsx)(LookupControl_1.LookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'lookups':
+            return ((0, jsx_runtime_1.jsx)(MultiSelectLookupControl_1.MultiSelectLookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        case 'switch':
+            return ((0, jsx_runtime_1.jsx)(SwitchControl_1.SwitchControl, Object.assign({ value: value, onChange: onChange }, rest)));
+        // case 'attachment':
+        //   return (
+        //     <AttachmentControl
+        //       value={value}
+        //       onChange={onChange}
+        //       {...(rest as any)}
+        //     />
+        //   );
+        default:
+            return (0, jsx_runtime_1.jsx)("div", {});
+    }
+}
+function randomUUID() {
+    return Math.random().toString(36).substring(2, 15);
+}
+function FormControl(props) {
+    const { label, id, onChange, error, helperText, required } = props;
+    const _id = (0, react_1.useMemo)(() => id || randomUUID(), [id]);
+    const noop = (0, react_1.useCallback)(() => { }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Label, { style: { width: 160, marginTop: 4 }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(Control, Object.assign({ id: _id, onChange: onChange || noop }, props)) })] }));
+}
+FormControl.Loading = FormControlLoading_1.FormControlLoading;
+exports.default = FormControl;

package/form/FormControlLoading.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const FormControlLoading: FC;

package/form/FormControlLoading.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControlLoading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const FormControlLoading = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 6, marginTop: 2 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Skeleton, { style: { width: 100, height: 20 } }), (0, jsx_runtime_1.jsx)(react_components_1.Skeleton, { style: { height: 32 } })] }));
+};
+exports.FormControlLoading = FormControlLoading;

package/form/controls/CurrencyControl.d.ts

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

package/form/controls/CurrencyControl.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyControl = CurrencyControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, autoFocus, borderOnFocusOnly, readOnly, }) {
+    var _a;
+    console.log('CurrencyControl', value);
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+        // invalid={error}
+        // icon={<div>₹</div>}
+        // startDecorator={<div>₹</div>}
+        contentBefore: (0, jsx_runtime_1.jsx)("div", { children: "\u20B9" }), disabled: disabled, readOnly: readOnly, style: {
+            width: '100%',
+        } }));
+}

package/form/controls/DateControl.d.ts

@@ -0,0 +1,6 @@
+import { ControlProps } from './types';
+export interface DateControlProps extends ControlProps<string> {
+    maxDate?: Date;
+    minDate?: Date;
+}
+export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }: DateControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateControl.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateControl = DateControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
+const locale_1 = require("@headless-adminapp/app/locale");
+const dayjs_1 = __importDefault(require("dayjs"));
+const AppStringContext_1 = require("../../App/AppStringContext");
+function DateControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }) {
+    const { dateFormats } = (0, locale_1.useLocale)();
+    const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
+    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", 
+        // size="sm"
+        // error={error}
+        // maxDate={maxDate}
+        // minDate={minDate}
+        disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format(dateFormats.short) : ''), value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? date.toISOString() : null), strings: datePickerStrings }));
+}

package/form/controls/DateRangeControl.d.ts

@@ -0,0 +1,6 @@
+import { ControlProps } from './types';
+export interface DateRangeControlProps extends ControlProps<[string | null, string | null]> {
+    maxDate?: Date;
+    minDate?: Date;
+}
+export declare function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }: DateRangeControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateRangeControl.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeControl = DateRangeControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
+const locale_1 = require("@headless-adminapp/app/locale");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = require("react");
+const AppStringContext_1 = require("../../App/AppStringContext");
+function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }) {
+    const [from, setFrom] = (0, react_1.useState)(value ? value[0] : null);
+    const [to, setTo] = (0, react_1.useState)(value ? value[1] : null);
+    const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
+    const { dateFormats } = (0, locale_1.useLocale)();
+    (0, react_1.useEffect)(() => {
+        if (value) {
+            setFrom(value[0]);
+            setTo(value[1]);
+        }
+    }, [value]);
+    const _minDate = minDate
+        ? new Date(minDate)
+        : from
+            ? new Date(from)
+            : undefined;
+    const _maxDate = maxDate ? new Date(maxDate) : to ? new Date(to) : undefined;
+    const handleChangeFrom = (date) => {
+        var _a;
+        setFrom(date ? date.toISOString() : null);
+        // if (date && to) {
+        onChange === null || onChange === void 0 ? void 0 : onChange([(_a = date === null || date === void 0 ? void 0 : date.toISOString()) !== null && _a !== void 0 ? _a : null, to]);
+        // }
+    };
+    const handleChangeTo = (date) => {
+        var _a;
+        setTo(date ? date.toISOString() : null);
+        // if (date && from) {
+        onChange === null || onChange === void 0 ? void 0 : onChange([from, (_a = date === null || date === void 0 ? void 0 : date.toISOString()) !== null && _a !== void 0 ? _a : null]);
+        // }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 8 }, children: [(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: "From", appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).format(dateFormats.short) : '', value: from ? new Date(from) : null, onSelectDate: (date) => handleChangeFrom(date), strings: datePickerStrings, minDate: minDate, maxDate: _maxDate, style: { flex: 1 }, input: {
+                    style: { width: '100%' },
+                } }), (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: "To", appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : ''), value: to ? new Date(to) : null, onSelectDate: (date) => handleChangeTo(date), strings: datePickerStrings, minDate: _minDate, maxDate: maxDate, style: { flex: 1 }, input: {
+                    style: { width: '100%' },
+                } })] }));
+}

package/form/controls/DateTimeControl.d.ts

@@ -0,0 +1,6 @@
+import { ControlProps } from './types';
+export interface DateTimeControlProps extends ControlProps<string> {
+    maxDate?: Date;
+    minDate?: Date;
+}
+export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }: DateTimeControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateTimeControl.js

@@ -0,0 +1,23 @@
+"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_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
+const dayjs_1 = __importDefault(require("dayjs"));
+function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, 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) }));
+}

package/form/controls/EmailControl.d.ts

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

package/form/controls/EmailControl.js

@@ -0,0 +1,22 @@
+"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, error, placeholder, disabled, autoComplete, textTransform, borderOnFocusOnly, 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())
+                : 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(), 
+        // invalid={error}
+        disabled: disabled, readOnly: 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/LookupControl.d.ts

@@ -0,0 +1,26 @@
+import { Schema } from '@headless-adminapp/core/schema';
+import { ISchemaExperienceStore } from '@headless-adminapp/core/store';
+import { IDataService } from '@headless-adminapp/core/transport';
+import { ControlProps } from './types';
+export interface LookupOption {
+    limit: number;
+    search: string;
+    enabled?: boolean;
+}
+export type DataLookup = {
+    id: string;
+    name: string;
+    logicalName: string;
+};
+export type LookupControlProps = ControlProps<DataLookup> & {
+    async?: boolean;
+    lookupKey?: string;
+    openRecord?: (id: string) => void;
+    dataService: IDataService;
+    schema: Schema;
+    experienceStore: ISchemaExperienceStore;
+    viewId?: string;
+    allowNavigation?: boolean;
+    allowNewRecord?: boolean;
+};
+export declare function LookupControl(props: LookupControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/LookupControl.js

@@ -0,0 +1,134 @@
+"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 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 icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const AppStringContext_1 = require("../../App/AppStringContext");
+const RecordCard_1 = require("../../PageEntityForm/RecordCard");
+const useLookupData_1 = require("./useLookupData");
+function LookupControl(props) {
+    const Control = LookupControlMd;
+    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, props));
+}
+const useStyles = (0, react_components_1.makeStyles)({
+    option: {
+        padding: 0,
+        '& .fui-Option__checkIcon': {
+            display: 'none',
+        },
+        '&[data-activedescendant-focusvisible]': {
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
+            '&:after': {
+                border: 'none !important',
+                // background: tokens.colorNeutralBackground1Hover,
+            },
+        },
+    },
+});
+const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, schema, viewId, allowNavigation, allowNewRecord, }) => {
+    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 '';
+        }
+        if (!allowNavigation) {
+            return '';
+        }
+        return routeResolver({
+            logicalName: schema.logicalName,
+            type: app_1.PageType.EntityForm,
+            id: value.id,
+        });
+    }, [allowNavigation, routeResolver, schema.logicalName, value]);
+    const handleOpenRecord = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!path) {
+            return;
+        }
+        router.push(path);
+    }, [path, router]);
+    (0, react_1.useEffect)(() => {
+        if (open)
+            setLookupEnabled(true);
+    }, [open]);
+    const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const styles = useStyles();
+    // const useLookupData = useMemo(
+    //   () =>
+    //     createUseLookupDataHook({
+    //       dataResolver: dataResolverRef.current,
+    //       useLookupQuery: undefined,
+    //       lookupKey,
+    //     }),
+    //   [lookupKey]
+    // );
+    // const {
+    //   data,
+    //   isLoading: loading,
+    //   isFetching,
+    // } = useLookupData({
+    //   limit: 10,
+    //   search: async ? debouncedSearchText : '',
+    //   enabled: lookupEnabled,
+    // });
+    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,
+        searchText: debouncedSearchText,
+        dataService,
+        enabled: lookupEnabled && !isViewLoading && !value && !readOnly && !disabled,
+    });
+    (0, react_1.useEffect)(() => {
+        if (value) {
+            setSearchText(value.name);
+        }
+        else {
+            setSearchText('');
+        }
+    }, [value]);
+    const handleChange = (value) => {
+        setSearchText('');
+        if (!value) {
+            return onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        }
+        else {
+            return onChange === null || onChange === void 0 ? void 0 : 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, 
+                // 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) => {
+                    console.log('onOptionSelect', 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: {
+                            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: (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 })) }) }) }))] }));
+};

package/form/controls/MultiSelectControl.d.ts

@@ -0,0 +1,6 @@
+import { Lookup } from './SelectControl';
+import { ControlProps } from './types';
+export interface MultiSelectControlProps<T> extends ControlProps<T[]> {
+    options: Lookup<T>[];
+}
+export default function MultiSelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, error, onBlur, onFocus, placeholder, }: MultiSelectControlProps<T>): import("react/jsx-runtime").JSX.Element;

package/form/controls/MultiSelectControl.js

@@ -0,0 +1,17 @@
+"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, error, 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));
+    };
+    const selectedOptions = (0, react_1.useMemo)(() => options.filter((x) => value === null || value === void 0 ? void 0 : 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))) }));
+}

package/form/controls/MultiSelectLookupControl.d.ts

@@ -0,0 +1,26 @@
+import { Schema } from '@headless-adminapp/core/schema';
+import { ISchemaExperienceStore } from '@headless-adminapp/core/store';
+import { IDataService } from '@headless-adminapp/core/transport';
+import { ControlProps } from './types';
+export interface LookupOption {
+    limit: number;
+    search: string;
+    enabled?: boolean;
+}
+export type DataLookup = {
+    id: string;
+    name: string;
+    logicalName: string;
+};
+export type MultiSelectLookupControlProps = ControlProps<DataLookup[]> & {
+    async?: boolean;
+    lookupKey?: string;
+    openRecord?: (id: string) => void;
+    dataService: IDataService;
+    schema: Schema;
+    experienceStore: ISchemaExperienceStore;
+    viewId?: string;
+    allowNavigation?: boolean;
+    allowNewRecord?: boolean;
+};
+export declare function MultiSelectLookupControl(props: MultiSelectLookupControlProps): import("react/jsx-runtime").JSX.Element;