@headless-adminapp/fluent 1.4.24 → 1.4.26

package/form/controls/DurationControl.js

@@ -6,6 +6,8 @@ const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/utils");
 const react_1 = require("react");
 const SkeletonControl_1 = require("./SkeletonControl");
+const fluent_1 = require("../../components/fluent");
+const Option_1 = require("../../components/fluent/Option");
 const useStyles = (0, react_components_1.makeStyles)({
     listbox: {
         maxHeight: '300px !important',
@@ -118,7 +120,11 @@ const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placehold
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    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 ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: '100%' }, children: (0, jsx_runtime_1.jsx)(fluent_1.Combobox, { name: name, appearance: "filled-darker", placeholder: placeholder, inputMode: "search", style: {
+                width: '100%',
+                minWidth: 'unset',
+                paddingRight: react_components_1.tokens.spacingHorizontalXS,
+            }, 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);
@@ -143,7 +149,7 @@ const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     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) => ((0, jsx_runtime_1.jsx)(Option_1.Option, { value: item.value, children: item.text }, item.value))) }) }));
 };
 exports.DurationControl = DurationControl;
 function resolveValue(value) {

package/form/controls/EmailControl.js

@@ -4,6 +4,7 @@ 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");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, skeleton, }) {
     if (skeleton) {
@@ -19,7 +20,7 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
         }
         onChange?.(value);
     };
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "email", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Input, { type: "email", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
         // size="sm"
         value: value ?? '', onChange: handleOnChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
@@ -27,5 +28,5 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
             flex: 1,
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
             width: '100%',
-        }, 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 }));
+        }, contentAfter: value ? ((0, jsx_runtime_1.jsx)(fluent_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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IntegerControl = IntegerControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable unused-imports/no-unused-vars */
-const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, skeleton, }) {
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value ?? null, readOnly: readOnly || disabled, style: {
+    return ((0, jsx_runtime_1.jsx)(fluent_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value ?? null, readOnly: readOnly || disabled, style: {
             width: '100%',
         }, input: {
             style: {

package/form/controls/LookupControl.js

@@ -12,6 +12,8 @@ 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 fluent_1 = require("../../components/fluent");
+const Option_1 = require("../../components/fluent/Option");
 const RecordCard_1 = require("../../PageEntityForm/RecordCard");
 const avatar_1 = require("../../utils/avatar");
 const SkeletonControl_1 = require("./SkeletonControl");
@@ -110,7 +112,11 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    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' }, input: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(fluent_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',
+                    paddingRight: react_components_1.tokens.spacingHorizontalXS,
+                }, input: {
                     style: {
                         width: '100%',
                     },
@@ -124,10 +130,10 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                         recentItemStore.addItem((0, useLookupData_1.createLookupRecentKey)(schema.logicalName), _item[schema.idAttribute], _item[schema.idAttribute]);
                     }
                     handleChange(_item ?? null);
-                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, autoCapitalize: "none", autoCorrect: "off", spellCheck: false, 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: view?.experience.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, autoCapitalize: "none", autoCorrect: "off", spellCheck: false, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(Option_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: view?.experience.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, 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: lookupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: async () => {
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.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)(fluent_1.ToolbarButton, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: async () => {
                                         if (isQuickCreateSupported) {
                                             const result = await openQuickCreate({
                                                 logicalName: schema.logicalName,
@@ -150,7 +156,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     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: {
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", children: (0, jsx_runtime_1.jsx)(fluent_1.Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: {
                             paddingRight: !disabled && !readOnly ? 0 : 5,
                             background: react_components_1.tokens.colorNeutralBackground6,
                         }, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {

package/form/controls/MultiSelectControl.js

@@ -4,6 +4,7 @@ exports.default = MultiSelectControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 function MultiSelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, }) {
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
@@ -15,9 +16,17 @@ function MultiSelectControl({ value, onChange, options, id, name, disabled, onBl
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    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) => {
+    return ((0, jsx_runtime_1.jsx)(fluent_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?.(), onFocus: () => onFocus?.(), disabled: disabled, style: {
             width: '100%',
-        }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
+        }, clearButton: {
+            style: {
+                marginRight: react_components_1.tokens.spacingHorizontalXS,
+            },
+        }, expandIcon: {
+            style: {
+                marginRight: -6,
+            },
+        }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(fluent_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }

package/form/controls/MultiSelectLookupControl.js

@@ -10,6 +10,8 @@ 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 fluent_1 = require("../../components/fluent");
+const Option_1 = require("../../components/fluent/Option");
 const RecordCard_1 = require("../../PageEntityForm/RecordCard");
 const SkeletonControl_1 = require("./SkeletonControl");
 const useLookupData_1 = require("./useLookupData");
@@ -120,7 +122,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    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 ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%', height: containerHeight }, children: [(0, jsx_runtime_1.jsxs)(fluent_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: {
                     style: {
                         position: 'absolute',
                         bottom: 0,
@@ -128,7 +130,12 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                         left: inputLeft,
                         height: 30,
                     },
-                }, placeholder: placeholder, inputMode: "search", style: { width: '100%', height: '100%', minWidth: 'unset' }, autoComplete: "off", readOnly: readOnly || disabled, open: open && !readOnly && !disabled, value: searchText, onOpenChange: (e, data) => {
+                }, placeholder: placeholder, inputMode: "search", style: {
+                    width: '100%',
+                    height: '100%',
+                    minWidth: 'unset',
+                    paddingRight: react_components_1.tokens.spacingHorizontalXS,
+                }, autoComplete: "off", readOnly: readOnly || disabled, open: open && !readOnly && !disabled, value: searchText, onOpenChange: (e, data) => {
                     setOpen(data.open);
                 }, onChange: (e) => {
                     setSearchText(e.target.value);
@@ -138,10 +145,10 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                         return;
                     recentItemStore.addItem((0, useLookupData_1.createLookupRecentKey)(schema.logicalName), _item[schema.idAttribute], _item[schema.idAttribute]);
                     handleAdd(_item);
-                }, 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: {
+                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(Option_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: lookupStrings.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: lookupStrings.newRecord }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { ref: tagGroupContainerRef, style: {
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.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)(fluent_1.ToolbarButton, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), children: lookupStrings.newRecord }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { ref: tagGroupContainerRef, style: {
                     position: 'absolute',
                     top: 4,
                     left: 0,
@@ -176,7 +183,7 @@ 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 ((0, jsx_runtime_1.jsx)(fluent_1.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: () => {

package/form/controls/PasswordControl.js

@@ -5,9 +5,13 @@ 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");
+const fluent_1 = require("../../components/fluent");
 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?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Input, { placeholder: placeholder, id: id, name: name, appearance: appearance, type: showPassword ? 'text' : 'password', autoFocus: autoFocus, value: value ?? '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => 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 }) }) }));
+        readOnly: disabled, style: {
+            width: '100%',
+            paddingRight: react_components_1.tokens.spacingHorizontalXS,
+        }, contentAfter: (0, jsx_runtime_1.jsx)(fluent_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 }) }) }));
 }

package/form/controls/RegardingControl.js

@@ -12,6 +12,8 @@ const icons_1 = require("@headless-adminapp/icons");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
+const fluent_1 = require("../../components/fluent");
+const Option_1 = require("../../components/fluent/Option");
 const RecordCard_1 = require("../../PageEntityForm/RecordCard");
 const avatar_1 = require("../../utils/avatar");
 const SkeletonControl_1 = require("./SkeletonControl");
@@ -55,13 +57,13 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             id: value.id,
         });
     }, [allowNavigation, routeResolver, value]);
-    const handleOpenRecord = (0, react_1.useCallback)((event) => {
+    const handleOpenRecord = (0, react_1.useCallback)(async (event) => {
         event.preventDefault();
         event.stopPropagation();
         if (!path) {
             return;
         }
-        router.push(path);
+        await router.push(path);
     }, [path, router]);
     (0, react_1.useEffect)(() => {
         if (open)
@@ -123,7 +125,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    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 ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(fluent_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);
@@ -148,7 +150,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                             return null;
                         }
                         return ((0, jsx_runtime_1.jsx)(react_components_1.OptionGroup, { label: schema.label, children: data?.records.map((item) => {
-                                return ((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: view?.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, item[schema.idAttribute]));
+                                return ((0, jsx_runtime_1.jsx)(Option_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: view?.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, item[schema.idAttribute]));
                             }) }, schema.logicalName));
                     }), !isLoading &&
                         result.every((item) => !item.data?.records.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -160,7 +162,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     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: {
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", children: (0, jsx_runtime_1.jsx)(fluent_1.Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: {
                             paddingRight: !disabled && !readOnly ? 0 : 5,
                             background: react_components_1.tokens.colorNeutralBackground6,
                         }, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {

package/form/controls/SelectControl.js

@@ -4,6 +4,8 @@ exports.default = SelectControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
+const Option_1 = require("../../components/fluent/Option");
 const SkeletonControl_1 = require("./SkeletonControl");
 function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, }) {
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
@@ -20,7 +22,7 @@ function SelectControl({ value, onChange, options, id, name, disabled, onBlur, o
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { placeholder: placeholder, id: id, name: name, appearance: "filled-darker", 
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Dropdown, { placeholder: placeholder, id: id, name: name, appearance: "filled-darker", 
         // data={transformedOptions}
         value: selectedOption?.label ?? '', 
         // onChange={(e, v) => handleChange(v as string)}
@@ -30,5 +32,13 @@ function SelectControl({ value, onChange, options, id, name, disabled, onBlur, o
             pointerEvents: disabled ? 'none' : undefined,
             width: '100%',
             minWidth: 'unset',
-        }, clearable: clearable, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
+        }, clearable: clearable, clearButton: {
+            style: {
+                marginRight: react_components_1.tokens.spacingHorizontalXS,
+            },
+        }, expandIcon: {
+            style: {
+                marginRight: -6,
+            },
+        }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(Option_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }

package/form/controls/SkeletonControl.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../../components/fluent");
 const useStyles = (0, react_components_1.makeStyles)({
     skeleton: {
         backgroundColor: 'var(--colorNeutralBackground3)',
@@ -13,6 +14,10 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 const SkeletonControl = ({ height = 32, width, }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: { height: height - 4, width }, className: styles.skeleton }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+                height: height - 4,
+                width,
+                borderRadius: fluent_1.extendedTokens.controlBorderRadius,
+            }, className: styles.skeleton }) }));
 };
 exports.SkeletonControl = SkeletonControl;

package/form/controls/TelephoneControl.js

@@ -7,6 +7,7 @@ const locale_1 = require("@headless-adminapp/app/locale");
 const phone_1 = require("@headless-adminapp/app/utils/phone");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, skeleton, }) {
     const [internalValue, setInternalValue] = (0, react_1.useState)('');
@@ -28,7 +29,7 @@ function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placehol
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: (e) => setInternalValue?.(e.target.value), onBlur: () => {
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: (e) => setInternalValue?.(e.target.value), onBlur: () => {
             handleChange();
             onBlur?.();
         }, onFocus: () => onFocus?.(), 
@@ -38,5 +39,5 @@ function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placehol
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 
         // size="sm"
-        contentAfter: number?.uri ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(number.uri, '_blank'), title: number.uri, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
+        contentAfter: number?.uri ? ((0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(number.uri, '_blank'), title: number.uri, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
 }

package/form/controls/TextAreaControl.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAreaControl = TextAreaControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 const DEFAULT_MAX_HEIGHT = 260;
 function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows = 5, textTransform, autoHeight, maxHeight, skeleton, }) {
@@ -39,7 +39,7 @@ function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFoc
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, { height: 116 });
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { ref: textAreaRef, placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value ?? '', onChange: handleInput, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Textarea, { ref: textAreaRef, placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value ?? '', onChange: handleInput, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // error={error}
         readOnly: disabled || readOnly, rows: rows, style: {
             width: '100%',

package/form/controls/TextControl.js

@@ -4,12 +4,13 @@ exports.StaticSuggestionLoader = exports.DynamicSuggestionLoader = void 0;
 exports.useSuggestions = useSuggestions;
 exports.TextControl = TextControl;
 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 metadata_1 = require("@headless-adminapp/app/metadata");
 const useRetriveRecords_1 = require("@headless-adminapp/app/transport/hooks/useRetriveRecords");
 const lodash_1 = require("lodash");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
+const Option_1 = require("../../components/fluent/Option");
 const SkeletonControl_1 = require("./SkeletonControl");
 function useSuggestions({ searchText, readOnly, }) {
     const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
@@ -48,7 +49,7 @@ readOnly, appearance = 'filled-darker', maxLength, skeleton, suggestions, }) {
         onChange?.(value);
     };
     if (suggestions) {
-        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Combobox, { autoCapitalize: "none", autoCorrect: "off", placeholder: placeholder, appearance: "filled-darker", spellCheck: false, autoComplete: "off", freeform: true, id: id, name: name, autoFocus: autoFocus, maxLength: maxLength, style: { width: '100%', minWidth: 'unset' }, input: { style: { width: '100%' } }, expandIcon: null, open: open && !!data.length && !readOnly, onOpenChange: (e, data) => {
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(fluent_1.Combobox, { autoCapitalize: "none", autoCorrect: "off", placeholder: placeholder, appearance: "filled-darker", spellCheck: false, autoComplete: "off", freeform: true, id: id, name: name, autoFocus: autoFocus, maxLength: maxLength, style: { width: '100%', minWidth: 'unset' }, input: { style: { width: '100%' } }, expandIcon: null, open: open && !!data.length && !readOnly, onOpenChange: (e, data) => {
                         if (!data.open) {
                             setOpen(data.open);
                         }
@@ -57,12 +58,12 @@ readOnly, appearance = 'filled-darker', maxLength, skeleton, suggestions, }) {
                         setOpen(true);
                     }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), onOptionSelect: (e, item) => {
                         onChange?.(item.optionText ?? '');
-                    }, children: data.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item, checkIcon: null, children: item }, item))) }), suggestions?.type === 'static' && ((0, jsx_runtime_1.jsx)(exports.StaticSuggestionLoader, { values: suggestions.values, disabled: !lookupEnabled, onData: onData, searchText: debouncedSearchText })), suggestions?.type === 'dynamic' && ((0, jsx_runtime_1.jsx)(exports.DynamicSuggestionLoader, { entity: suggestions.entity, field: suggestions.field, disabled: !lookupEnabled, searchText: debouncedSearchText, onData: onData }))] }));
+                    }, children: data.map((item) => ((0, jsx_runtime_1.jsx)(Option_1.Option, { value: item, checkIcon: null, children: item }, item))) }), suggestions?.type === 'static' && ((0, jsx_runtime_1.jsx)(exports.StaticSuggestionLoader, { values: suggestions.values, disabled: !lookupEnabled, onData: onData, searchText: debouncedSearchText })), suggestions?.type === 'dynamic' && ((0, jsx_runtime_1.jsx)(exports.DynamicSuggestionLoader, { entity: suggestions.entity, field: suggestions.field, disabled: !lookupEnabled, searchText: debouncedSearchText, onData: onData }))] }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, autoFocus: autoFocus, appearance: appearance, value: value ?? '', onChange: (e) => handleOnChange(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Input, { placeholder: placeholder, id: id, name: name, autoFocus: autoFocus, appearance: appearance, value: value ?? '', onChange: (e) => handleOnChange(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         // readOnly={readOnly || disabled}
-        readOnly: readonly, autoComplete: autoComplete, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, className: (0, react_components_1.mergeClasses)(readonly && 'TextControl_readonly'), style: {
+        readOnly: readonly, autoComplete: autoComplete, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, style: {
             width: '100%',
         }, maxLength: maxLength, input: {
             style: {

package/form/controls/TimeControl/TimeControl.js

@@ -12,6 +12,7 @@ const icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const react_1 = require("react");
+const fluent_1 = require("../../../components/fluent");
 const SkeletonControl_1 = require("../SkeletonControl");
 const utils_1 = require("./utils");
 dayjs_1.default.extend(customParseFormat_1.default);
@@ -46,6 +47,8 @@ function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled,
                 flex: 1,
                 minWidth: 0,
                 pointerEvents: isReadonly ? 'none' : 'auto',
+                borderRadius: fluent_1.extendedTokens.controlBorderRadius,
+                minHeight: fluent_1.extendedTokens.controlMinHeightM,
             }, placeholder: placeholder, id: id, name: name, input: {
                 style: { minWidth: 0 },
             }, readOnly: isReadonly, selectedTime: selectedTime, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
@@ -78,5 +81,9 @@ function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled,
                     justifyContent: 'center',
                     marginRight: -4,
                     color: react_components_1.tokens.colorNeutralForeground2,
-                }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) }) }));
+                }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }), listbox: {
+                style: {
+                    borderRadius: fluent_1.extendedTokens.paperBorderRadius,
+                },
+            } }) }));
 }

package/form/controls/UrlControl.js

@@ -4,17 +4,18 @@ exports.UrlControl = UrlControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, skeleton, }) {
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "url", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value ?? '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Input, { type: "url", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value ?? '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         readOnly: disabled || readOnly, autoComplete: "off", style: {
             width: '100%',
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 
         // size="sm"
-        contentAfter: value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(value, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.OpenInNew, {}) })) : undefined }));
+        contentAfter: value ? ((0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(value, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.OpenInNew, {}) })) : undefined }));
 }

package/form/layout/FormSection/FormSection.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// import { Divider, Flex, Grid, Paper, Stack, Text } from '@mantine/core';
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/hooks");
 const react_1 = require("react");
+const fluent_1 = require("../../../components/fluent");
 const FormSectionColumn_1 = require("./FormSectionColumn");
 const FormSectionLoading_1 = require("./FormSectionLoading");
 function determineItemCount(availableWidth, itemWidth, gap, padding) {
@@ -62,7 +62,7 @@ const FormSection = ({ title, children, columnCount, labelPosition, noPadding, h
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, style: {
             boxShadow: react_components_1.tokens.shadow2,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             background: react_components_1.tokens.colorNeutralBackground1,
             display: 'flex',
             flexDirection: 'column',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.24",
+  "version": "1.4.26",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/lodash": "4.17.20"
   },
-  "gitHead": "3a4c06f1e18f8ac7861647b82d4a4f8cd8f0141c"
+  "gitHead": "086994cfa783e4228290a2108dc84e057dbb00fb"
 }

package/styles.css

@@ -4,10 +4,6 @@ body {
   margin: 0;
 }
 
-.TextControl_readonly:after {
-  border-bottom-color: var(--colorNeutralStrokeDisabled) !important;
-}
-
 .FormBody_scrollview > div {
   display: flex;
   flex-direction: column;
@@ -31,7 +27,7 @@ body {
   flex-direction: column;
   background-color: var(--colorNeutralBackground3);
   overflow: hidden;
-  border-radius: var(--borderRadiusMedium);
+  border-radius: var(--controlBorderRadius);
   border: 1px solid transparent;
 }
 .hdlapp_rte:focus-within {