@headless-adminapp/fluent 1.4.8 → 1.4.9

package/PageCalendar/Header.js

@@ -36,7 +36,7 @@ function Header({ filterForm, onCreateButtonClick, }) {
                                 } })] })] }), !!config.filterAttributes &&
                 Object.keys(config.filterAttributes).length > 0 && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
                             return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: filterForm.control, name: attributeName, render: ({ field }) => {
-                                    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
+                                    return ((0, jsx_runtime_1.jsx)("div", { style: { width: 210, minWidth: 210 }, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
                                 } }, attributeName));
                         }) })] }))] }));
 }

package/PageEntityForm/RecordCard.js

@@ -78,9 +78,9 @@ function RecordCard({ schema, cardView, record, selected, }) {
                         }
                     }
                     if (column.variant === 'strong') {
-                        return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(value, attribute, locale) }, column.name));
+                        return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
                     }
-                    return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute, locale) }, column.name));
+                    return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
                 }) }))] }));
 }
 function SecondaryColumnContent({ record: _record, column, schema, locale, }) {

package/PageEntityView/FormSubgridContainer.d.ts

@@ -4,4 +4,6 @@ interface FormSubgridContainerProps {
     hideSearch?: boolean;
 }
 export declare const FormSubgridContainer: FC<FormSubgridContainerProps>;
+export declare const FormSubgridDesktopContainer: FC<FormSubgridContainerProps>;
+export declare const FormSubgridMobileContainer: FC<FormSubgridContainerProps>;
 export {};

package/PageEntityView/FormSubgridContainer.js

@@ -1,16 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormSubgridContainer = void 0;
+exports.FormSubgridMobileContainer = exports.FormSubgridDesktopContainer = exports.FormSubgridContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const hooks_2 = require("@headless-adminapp/app/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const AppStringContext_1 = require("../App/AppStringContext");
 const FormSubgridCommandContainer_1 = require("../DataGrid/FormSubgridCommandContainer");
 const FormSubgridViewSelector_1 = require("../DataGrid/FormSubgridViewSelector");
+const GridListContainer_1 = require("../DataGrid/GridListContainer");
 const GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
 const GridTableContainer_1 = require("../DataGrid/GridTableContainer");
-const FormSubgridContainer = ({ hideCommandBar, hideSearch, }) => {
+const FormSubgridContainer = (props) => {
+    const isMobile = (0, hooks_2.useIsMobile)();
+    if (isMobile) {
+        return (0, jsx_runtime_1.jsx)(exports.FormSubgridMobileContainer, { ...props });
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)(exports.FormSubgridDesktopContainer, { ...props });
+    }
+};
+exports.FormSubgridContainer = FormSubgridContainer;
+const FormSubgridDesktopContainer = ({ hideCommandBar, hideSearch, }) => {
     const appStrings = (0, AppStringContext_1.useAppStrings)();
     const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -65,4 +77,50 @@ const FormSubgridContainer = ({ hideCommandBar, hideSearch, }) => {
                                 paddingBottom: 8,
                             }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }), (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {})] })] })] }) }));
 };
-exports.FormSubgridContainer = FormSubgridContainer;
+exports.FormSubgridDesktopContainer = FormSubgridDesktopContainer;
+const FormSubgridMobileContainer = ({ hideCommandBar, hideSearch, }) => {
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 8,
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        height: 40,
+                    }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: 10,
+                        overflow: 'hidden',
+                        width: '100%',
+                        paddingBlock: 4,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                flex: 1,
+                                minWidth: 0,
+                            }, children: !hideCommandBar && (0, jsx_runtime_1.jsx)(FormSubgridCommandContainer_1.FormSubgridCommandContainer, {}) }), !hideSearch && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'end',
+                                flexShrink: 0,
+                                paddingInline: 8,
+                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, appearance: "filled-darker", value: searchText, onChange: (e) => setSearchText(e.target.value) }) }))] })), (0, jsx_runtime_1.jsx)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            gap: 16,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flex: 1,
+                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', minHeight: 300 }, children: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}) }) }) })] }) }));
+};
+exports.FormSubgridMobileContainer = FormSubgridMobileContainer;

package/components/DialogLogin.js

@@ -4,6 +4,20 @@ exports.DialogLogin = DialogLogin;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const LoginForm_1 = require("./LoginForm");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 function DialogLogin(props) {
+    const isMobile = (0, hooks_1.useIsMobile)();
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                position: 'fixed',
+                inset: 0,
+                zIndex: 1000,
+                padding: 24,
+                maxWidth: 360,
+                maxHeight: '100vh',
+                height: 'fit-content',
+                margin: 'auto',
+            }, children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl, afterLoginContent: props.afterLoginContent, beforeLoginContent: props.beforeLoginContent, subtitle: props.subtitle }) }));
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: true, onOpenChange: () => { }, modalType: "non-modal", children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl, afterLoginContent: props.afterLoginContent, beforeLoginContent: props.beforeLoginContent, subtitle: props.subtitle }) }) }) }) }));
 }

package/form/controls/SelectControl.js

@@ -26,5 +26,9 @@ function SelectControl({ value, onChange, options, id, name, disabled, onBlur, o
         // onChange={(e, v) => handleChange(v as string)}
         selectedOptions: value ? [String(value)] : [], onOptionSelect: (event, data) => {
             handleChange(data.optionValue);
-        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), style: { pointerEvents: disabled ? 'none' : undefined, width: '100%' }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), style: {
+            pointerEvents: disabled ? 'none' : undefined,
+            width: '100%',
+            minWidth: 'unset',
+        }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "f25faf823d592f7d9c0356c1ca238e9019b8e7c0"
+  "gitHead": "39e62181f5436c5ceeaca2aa88d132593d53607a"
 }