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

package/form/controls/DecimalControl.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DecimalControl = DecimalControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx } from "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);
+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);
     internalValueRef.current = internalValue;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let _value = '';
         if (typeof value === 'number') {
             _value = value.toString();
@@ -46,7 +43,7 @@ function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, dis
         setInternalValue(value);
         onChange === null || onChange === void 0 ? void 0 : 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 === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), disabled: disabled, readOnly: readOnly, style: {
+    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: {
             width: '100%',
         } }));
 }

package/form/controls/DurationControl.js

@@ -1,10 +1,7 @@
-"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)({
+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({
     listbox: {
         maxHeight: '300px !important',
     },
@@ -100,20 +97,20 @@ const options = [
         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);
+export const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, }) => {
+    const [searchText, setSearchText] = useState('');
+    const [filterEnabled, setFilterEnabled] = useState(false);
     const styles = useStyles();
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setSearchText(getDisplayValue(value));
     }, [value]);
-    const filteredItems = (0, react_1.useMemo)(() => {
+    const filteredItems = 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: () => {
+    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: () => {
                 let newValue = null;
                 if (searchText) {
                     newValue = resolveValue(searchText);
@@ -140,9 +137,8 @@ const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     onChange === null || onChange === void 0 ? void 0 : 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))) }) }));
+            }, children: filteredItems.map((item) => (_jsx(Option, { value: item.value, children: item.text }, item.value))) }) }));
 };
-exports.DurationControl = DurationControl;
 function getDisplayValue(value) {
     if (!value) {
         return '';

package/form/controls/EmailControl.js

@@ -1,11 +1,8 @@
-"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, 
+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, 
         // size="sm"
         value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
@@ -17,6 +14,6 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
         // 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 }));
+            paddingRight: tokens.spacingHorizontalXS,
+        }, contentAfter: !!value ? (_jsx(Button, { onClick: () => window.open(`mailto:${value}`, '_blank'), color: "primary", appearance: "transparent", icon: _jsx(Icons.Mail, {}), size: "small" })) : undefined }));
 }

package/form/controls/IntegerControl.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntegerControl = IntegerControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx } from "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 && value !== void 0 ? value : null, onChange: (e, data) => {
+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) => {
             if (data.value !== undefined) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(data.value);
             }

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

@@ -1,28 +1,27 @@
-"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) {
+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) {
     const Control = LookupControlMd;
-    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, props));
+    return _jsx(Control, Object.assign({}, props));
 }
-const useStyles = (0, react_components_1.makeStyles)({
+const useStyles = makeStyles({
     option: {
         padding: 0,
         '& .fui-Option__checkIcon': {
             display: 'none',
         },
         '&[data-activedescendant-focusvisible]': {
-            background: react_components_1.tokens.colorNeutralBackground1Hover,
+            background: tokens.colorNeutralBackground1Hover,
             '&:after': {
                 border: 'none !important',
                 // background: tokens.colorNeutralBackground1Hover,
@@ -31,13 +30,13 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
 });
 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)(() => {
+    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(() => {
         if (!value) {
             return '';
         }
@@ -46,11 +45,11 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
         }
         return routeResolver({
             logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
+            type: PageType.EntityForm,
             id: value.id,
         });
     }, [allowNavigation, routeResolver, schema.logicalName, value]);
-    const handleOpenRecord = (0, react_1.useCallback)((event) => {
+    const handleOpenRecord = useCallback((event) => {
         event.preventDefault();
         event.stopPropagation();
         if (!path) {
@@ -58,11 +57,11 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
         }
         router.push(path);
     }, [path, router]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (open)
             setLookupEnabled(true);
     }, [open]);
-    const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const [debouncedSearchText] = useDebouncedValue(searchText, 500);
     const styles = useStyles();
     // const useLookupData = useMemo(
     //   () =>
@@ -82,15 +81,15 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     //   search: async ? debouncedSearchText : '',
     //   enabled: lookupEnabled,
     // });
-    const { isLoading: isViewLoading, view } = (0, useLookupData_1.useGetLookupView)(schema.logicalName, viewId);
-    const { data, isLoading } = (0, useLookupData_1.useLookupData)({
+    const { isLoading: isViewLoading, view } = useGetLookupView(schema.logicalName, viewId);
+    const { data, isLoading } = 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)(() => {
+    useEffect(() => {
         if (value) {
             setSearchText(value.name);
         }
@@ -111,23 +110,61 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             });
         }
     };
-    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, 
+    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, 
                 // 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) => ((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: {
+                }, 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: {
                     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: () => {
+                }, 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: (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 })) }) }) }))] }));
+                            }, children: _jsx(Icons.Close, { size: 16 }) }), primaryText: {
+                            style: {
+                                paddingBottom: 0,
+                            },
+                        }, children: allowNavigation && path ? (_jsxs(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: {
+                                        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 })) }) }) }))] }));
+};
+const LookupAvatar = ({ logicalName, schema, value, }) => {
+    var _a, _b;
+    const { schemaMetadataDic } = 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: {
+                width: 20,
+                height: 20,
+            }, icon: {
+                style: {
+                    background: 'transparent',
+                    color: 'inherit',
+                },
+                children: _jsx(Icon, { size: 20 }),
+            } }));
+    }
+    return (_jsx(Avatar, { style: {
+            width: 20,
+            height: 20,
+            fontSize: 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,
+        } }));
 };

package/form/controls/MultiSelectControl.js

@@ -1,17 +1,14 @@
-"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]);
+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]);
     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) => {
+    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) => {
             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 === 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))) }));
 }

package/form/controls/MultiSelectLookupControl.js

@@ -1,28 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiSelectLookupControl = MultiSelectLookupControl;
-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 MultiSelectLookupControl(props) {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body1, Combobox, Divider, Link, makeStyles, mergeClasses, Option, Spinner, Tag, TagGroup, tokens, ToolbarButton, } from '@fluentui/react-components';
+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 { Icons } from '@headless-adminapp/icons';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useAppStrings } from '../../App/AppStringContext';
+import { RecordCard } from '../../PageEntityForm/RecordCard';
+import { useGetLookupView, useLookupData } from './useLookupData';
+export function MultiSelectLookupControl(props) {
     const Control = LookupControlMd;
-    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, props));
+    return _jsx(Control, Object.assign({}, props));
 }
-const useStyles = (0, react_components_1.makeStyles)({
+const useStyles = makeStyles({
     option: {
         padding: 0,
         '& .fui-Option__checkIcon': {
             display: 'none',
         },
         '&[data-activedescendant-focusvisible]': {
-            background: react_components_1.tokens.colorNeutralBackground1Hover,
+            background: tokens.colorNeutralBackground1Hover,
             '&:after': {
                 border: 'none !important',
                 // background: tokens.colorNeutralBackground1Hover,
@@ -31,28 +28,28 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
 });
 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)();
-    (0, react_1.useEffect)(() => {
+    const [lookupEnabled, setLookupEnabled] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    const { loockupStrings } = useAppStrings();
+    useEffect(() => {
         if (open)
             setLookupEnabled(true);
     }, [open]);
-    const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const [debouncedSearchText] = useDebouncedValue(searchText, 500);
     const styles = useStyles();
-    const { isLoading: isViewLoading, view } = (0, useLookupData_1.useGetLookupView)(schema.logicalName, viewId);
-    const { data, isLoading } = (0, useLookupData_1.useLookupData)({
+    const { isLoading: isViewLoading, view } = useGetLookupView(schema.logicalName, viewId);
+    const { data, isLoading } = useLookupData({
         schema,
         view: view === null || view === void 0 ? void 0 : view.experience,
         searchText: debouncedSearchText,
         dataService,
         enabled: lookupEnabled && !isViewLoading && !readOnly && !disabled,
     });
-    const tagGroupContainerRef = (0, react_1.useRef)(null);
-    const [inputLeft, setInputLeft] = (0, react_1.useState)(0);
-    const [containerHeight, setContainerHeight] = (0, react_1.useState)(32);
-    (0, react_1.useEffect)(() => {
+    const tagGroupContainerRef = useRef(null);
+    const [inputLeft, setInputLeft] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(32);
+    useEffect(() => {
         const timer = setInterval(() => {
             var _a, _b, _c;
             if (!tagGroupContainerRef.current) {
@@ -122,7 +119,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%', height: containerHeight }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', right: 4, bottom: 8 }, children: 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 })) }), input: {
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: containerHeight }, children: [_jsxs(Combobox, { name: name, appearance: "filled-darker", expandIcon: _jsx("div", { style: { position: 'absolute', right: 4, bottom: 8 }, children: readOnly || disabled ? null : isLoading ? (_jsx(Spinner, { size: "extra-tiny" })) : (_jsx(Icons.Search, { size: 18 })) }), input: {
                     style: {
                         position: 'absolute',
                         bottom: 0,
@@ -139,10 +136,10 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     if (!_item)
                         return;
                     handleAdd(_item);
-                }, 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 }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { ref: tagGroupContainerRef, style: {
+                }, 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 }) })] }))] }), _jsx("div", { ref: tagGroupContainerRef, style: {
                     position: 'absolute',
                     top: 4,
                     left: 0,
@@ -151,12 +148,12 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     paddingInline: 4,
                     display: 'flex',
                     pointerEvents: 'none',
-                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", style: { flexWrap: 'wrap', rowGap: 8 }, children: value === null || value === void 0 ? void 0 : value.map((item, index) => ((0, jsx_runtime_1.jsx)(TagItem, { disabled: disabled, readOnly: readOnly, value: item, onRemove: handleRemove, allowNavigation: allowNavigation }, `${item.id}-${index}`))) }) })] }));
+                }, children: _jsx(TagGroup, { as: "div", style: { flexWrap: 'wrap', rowGap: 8 }, children: value === null || value === void 0 ? void 0 : value.map((item, index) => (_jsx(TagItem, { disabled: disabled, readOnly: readOnly, value: item, onRemove: handleRemove, allowNavigation: allowNavigation }, `${item.id}-${index}`))) }) })] }));
 };
 function TagItem({ disabled, readOnly, value, onRemove, allowNavigation, }) {
-    const routeResolver = (0, hooks_2.useRouteResolver)();
-    const router = (0, hooks_2.useRouter)();
-    const path = (0, react_1.useMemo)(() => {
+    const routeResolver = useRouteResolver();
+    const router = useRouter();
+    const path = useMemo(() => {
         if (!value) {
             return '';
         }
@@ -165,11 +162,11 @@ function TagItem({ disabled, readOnly, value, onRemove, allowNavigation, }) {
         }
         return routeResolver({
             logicalName: value.logicalName,
-            type: app_1.PageType.EntityForm,
+            type: PageType.EntityForm,
             id: value.id,
         });
     }, [allowNavigation, routeResolver, value]);
-    const handleOpenRecord = (0, react_1.useCallback)((event) => {
+    const handleOpenRecord = useCallback((event) => {
         event.preventDefault();
         event.stopPropagation();
         if (!path) {
@@ -177,10 +174,10 @@ function TagItem({ disabled, readOnly, value, onRemove, allowNavigation, }) {
         }
         router.push(path);
     }, [path, router]);
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: {
+    return (_jsx(Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: {
             paddingRight: !disabled && !readOnly ? 0 : 5,
             pointerEvents: 'auto',
-        }, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
+        }, dismissIcon: _jsx("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
                 onRemove === null || onRemove === void 0 ? void 0 : onRemove(value.id);
-            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), children: allowNavigation && !!path ? ((0, jsx_runtime_1.jsx)(react_components_1.Link, { 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 })) }));
+            }, children: _jsx(Icons.Close, { size: 16 }) }), children: allowNavigation && !!path ? (_jsx(Link, { onClick: handleOpenRecord, children: _jsx(Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, 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 })) }));
 }

package/form/controls/PasswordControl.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PasswordControl = PasswordControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const icons_1 = require("@headless-adminapp/icons");
-const react_1 = require("react");
-function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance = 'filled-darker', }) {
-    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, appearance: appearance, type: showPassword ? 'text' : 'password', autoFocus: autoFocus, value: value || '', onChange: (e) => 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(), 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Input } from '@fluentui/react-components';
+import { Icons } from '@headless-adminapp/icons';
+import { useState } from 'react';
+export function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance = 'filled-darker', }) {
+    const [showPassword, setShowPassword] = useState(false);
+    return (_jsx(Input, { placeholder: placeholder, id: id, name: name, appearance: appearance, type: showPassword ? 'text' : 'password', autoFocus: autoFocus, value: value || '', onChange: (e) => 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, contentAfter: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => setShowPassword(!showPassword), icon: showPassword ? (0, jsx_runtime_1.jsx)(icons_1.Icons.EyeOff, { size: 18 }) : (0, jsx_runtime_1.jsx)(icons_1.Icons.Eye, { size: 18 }) }) }));
+        disabled: disabled, contentAfter: _jsx(Button, { appearance: "transparent", size: "small", onClick: () => setShowPassword(!showPassword), icon: showPassword ? _jsx(Icons.EyeOff, { size: 18 }) : _jsx(Icons.Eye, { size: 18 }) }) }));
 }

package/form/controls/RichTextControl.js

@@ -1,33 +1,6 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy } from 'react';
+const ReactQuill = lazy(() => import('react-quill'));
+export const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
+    return (_jsx(ReactQuill, { value: value !== null && value !== void 0 ? value : '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextControl = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ReactQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-quill'))));
-const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
-    return ((0, jsx_runtime_1.jsx)(ReactQuill, { value: value !== null && value !== void 0 ? value : '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }));
-};
-exports.RichTextControl = RichTextControl;