@headless-adminapp/fluent 0.0.17-alpha.3 → 0.0.17-alpha.7

package/CommandBar/MenuButton.js

@@ -36,7 +36,7 @@ exports.CommandMenuButton = (0, react_1.forwardRef)(function CommandMenuButton({
     const styles = useStyles();
     return (
     // <div ref={ref}>
-    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, {}), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
+    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
     // </div>
     );
 });

package/CommandBar/MenuItem.js

@@ -30,8 +30,8 @@ const useStyles = (0, react_components_1.makeStyles)({
 const MenuItem = ({ Icon, text, disabled, danger, onClick, items, }) => {
     const styles = useStyles();
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
-        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
+        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
 };
 exports.MenuItem = MenuItem;

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -61,7 +61,7 @@ minWidth,
 column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const schema = (0, hooks_1.useDataGridSchema)();
-    const { getSchema } = (0, hooks_2.useMetadata)();
+    const { schemaStore } = (0, hooks_2.useMetadata)();
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const attribute = (0, react_1.useMemo)(() => {
         const _attribute = schema.attributes[column.name];
@@ -71,9 +71,9 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
         if (_attribute.type !== 'lookup') {
             throw new Error('Invalid attribute type');
         }
-        const lookupSchema = getSchema(_attribute.entity);
+        const lookupSchema = schemaStore.getSchema(_attribute.entity);
         return lookupSchema.attributes[column.expandedKey];
-    }, [column.expandedKey, column.name, getSchema, schema.attributes]);
+    }, [column.expandedKey, column.name, schemaStore, schema.attributes]);
     const align = (0, react_1.useMemo)(() => {
         switch (attribute.type) {
             case 'money':

package/DataGrid/GridHeaderDesktop.js

@@ -24,7 +24,6 @@ const GridHeaderDesktop = (props) => {
             alignItems: 'center',
             paddingInline: 8,
             gap: 16,
-            width: '100%',
             display: 'flex',
         }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: {
                     flex: 1,

package/DataGrid/GridTableContainer.js

@@ -7,9 +7,8 @@ const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
+const navigation_1 = require("@headless-adminapp/app/navigation");
 const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
-const hooks_3 = require("@headless-adminapp/app/route/hooks");
-const app_1 = require("@headless-adminapp/core/experience/app");
 const react_table_1 = require("@tanstack/react-table");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
@@ -73,25 +72,16 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         }));
     }, [sorting]);
     const tableWrapperRef = (0, react_1.useRef)(null);
-    const routeResolver = (0, hooks_3.useRouteResolver)();
-    const router = (0, hooks_3.useRouter)();
     const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
+    const openFormInternal = (0, navigation_1.useOpenForm)();
     const openRecord = (0, react_1.useCallback)((id) => {
         var _a, _b;
-        const path = routeResolver({
+        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+        openFormInternal({
             logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
             id,
         });
-        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
-        router.push(path);
-    }, [
-        recordSetSetter,
-        routeResolver,
-        router,
-        schema.idAttribute,
-        schema.logicalName,
-    ]);
+    }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
     const { direction } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;

package/DataGrid/useTableColumns.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const useOpenRecord_1 = require("@headless-adminapp/app/datagrid/hooks/useOpenRecord");
 const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
@@ -36,14 +37,16 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const columns = (0, hooks_1.useGridColumns)();
     const [, setSorting] = (0, hooks_1.useGridSorting)();
     const schema = (0, hooks_1.useDataGridSchema)();
-    const { getSchema } = (0, hooks_3.useMetadata)();
+    const { schemaStore } = (0, hooks_3.useMetadata)();
     const [, setSelectedIds] = (0, hooks_1.useGridSelection)();
     const setSelectedIdsRef = (0, react_1.useRef)(setSelectedIds);
     setSelectedIdsRef.current = setSelectedIds;
     const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
     const contextCommands = isSubgrid
-        ? (0, hooks_1.useSubGridCommands)()
-        : (0, hooks_1.useMainGridContextCommands)();
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, hooks_1.useSubGridCommands)()
+        : // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, hooks_1.useMainGridContextCommands)();
     const mutableContextCommandState = (0, mutable_1.useMutableState)(contextCommands, true);
     (0, react_1.useEffect)(() => {
         mutableContextCommandState.setValue(contextCommands);
@@ -69,22 +72,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const routeResolver = (0, hooks_5.useRouteResolver)();
     const router = (0, hooks_5.useRouter)();
     const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
-    const openRecord = (0, react_1.useCallback)((id) => {
-        var _a, _b;
-        const path = routeResolver({
-            logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
-            id,
-        });
-        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
-        router.push(path);
-    }, [
-        recordSetSetter,
-        routeResolver,
-        router,
-        schema.idAttribute,
-        schema.logicalName,
-    ]);
+    const openRecord = (0, useOpenRecord_1.useOpenRecord)();
     const { currency, dateFormats } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
@@ -149,7 +137,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                             const field = column.expandedKey;
                             const entity = schema.attributes[lookup]
                                 .entity;
-                            const lookupSchema = getSchema(entity);
+                            const lookupSchema = schemaStore.getSchema(entity);
                             attribute = lookupSchema.attributes[field];
                             value = (_b = (_a = info.row.original.$expand) === null || _a === void 0 ? void 0 : _a[lookup]) === null || _b === void 0 ? void 0 : _b[field];
                         }
@@ -241,7 +229,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         setSorting,
         currency.currency,
         dateFormats.short,
-        getSchema,
+        schemaStore,
         routeResolver,
         openRecord,
         recordSetSetter,

package/PageEntityForm/CommandContainer.js

@@ -43,7 +43,15 @@ const CommandContainer = () => {
                 : []),
             ...gridCommands,
         ];
-    }, [gridCommands, recordSetContext, recordSetVisible, schema.logicalName]);
+    }, [
+        gridCommands,
+        recordSetContext.ids.length,
+        recordSetContext.logicalName,
+        recordSetVisible,
+        router,
+        schema.logicalName,
+        setRecordSetVisible,
+    ]);
     return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: extendedCommands });
 };
 exports.CommandContainer = CommandContainer;

package/PageEntityForm/FormTabRelated.js

@@ -4,11 +4,10 @@ exports.FormTabRelated = FormTabRelated;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
-const hooks_2 = require("@headless-adminapp/app/dataform/hooks");
 const FormTab_1 = require("../form/layout/FormTab");
 const SubgridControl_1 = require("./SubgridControl");
 function FormTabRelated({ selectedRelatedItem }) {
-    const recordId = (0, hooks_2.useRecordId)();
+    const recordId = (0, hooks_1.useRecordId)();
     const schema = (0, hooks_1.useDataFormSchema)();
     return ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: "related", noWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -6,9 +6,8 @@ const react_components_1 = require("@fluentui/react-components");
 const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const navigation_1 = require("@headless-adminapp/app/navigation");
 const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
-const hooks_3 = require("@headless-adminapp/app/route/hooks");
-const app_1 = require("@headless-adminapp/core/experience/app");
 const react_1 = require("react");
 const RecordCard_1 = require("./RecordCard");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -31,8 +30,7 @@ const RecordSetNavigatorContainer = () => {
     const [visible] = (0, hooks_2.useRecordSetVisibility)();
     const recordId = (0, hooks_1.useRecordId)();
     const styles = useStyles();
-    const routeResolver = (0, hooks_3.useRouteResolver)();
-    const router = (0, hooks_3.useRouter)();
+    const openForm = (0, navigation_1.useOpenForm)();
     const { language, direction } = (0, locale_1.useLocale)();
     if (!schema) {
         return null;
@@ -60,12 +58,11 @@ const RecordSetNavigatorContainer = () => {
                     }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (_b = (_a = schema.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : schema === null || schema === void 0 ? void 0 : schema.pluralLabel }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data === null || data === void 0 ? void 0 : data.map((record) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, react_components_1.mergeClasses)(styles.item, recordId ===
                                         record[schema.idAttribute] &&
                                         styles.selected), onClick: () => {
-                                        const path = routeResolver({
-                                            type: app_1.PageType.EntityForm,
+                                        openForm({
                                             logicalName: schema.logicalName,
                                             id: record[schema.idAttribute],
+                                            replace: true,
                                         });
-                                        router.replace(path);
                                     }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: cardView, record: record, schema: schema, selected: recordId ===
                                             record[schema.idAttribute] }) }), (0, jsx_runtime_1.jsx)("div", { style: { paddingInline: react_components_1.tokens.spacingHorizontalL }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) })] }, record[schema.idAttribute]))) }) })] }) }));
 };

package/components/PageLogin.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLogin = PageLogin;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @next/next/no-img-element */
 const react_components_1 = require("@fluentui/react-components");
 const LoginForm_1 = require("./LoginForm");
 function PageLogin(props) {

package/form/FormControl.js

@@ -86,7 +86,7 @@ function randomUUID() {
     return Math.random().toString(36).substring(2, 15);
 }
 function FormControl(props) {
-    const { label, id, onChange, error, helperText, required } = props;
+    const { label, id, onChange } = props;
     const _id = (0, react_1.useMemo)(() => id || randomUUID(), [id]);
     const noop = (0, react_1.useCallback)(() => { }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Label, { style: { width: 160, marginTop: 4 }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(Control, Object.assign({ id: _id, onChange: onChange || noop }, props)) })] }));

package/form/controls/DateControl.d.ts

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

package/form/controls/DateControl.js

@@ -9,7 +9,7 @@ const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
 const locale_1 = require("@headless-adminapp/app/locale");
 const dayjs_1 = __importDefault(require("dayjs"));
 const AppStringContext_1 = require("../../App/AppStringContext");
-function DateControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }) {
+function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
     const { dateFormats } = (0, locale_1.useLocale)();
     const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
     return ((0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", 

package/form/controls/DateTimeControl.d.ts

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

package/form/controls/DateTimeControl.js

@@ -7,7 +7,7 @@ exports.DateTimeControl = DateTimeControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
 const dayjs_1 = __importDefault(require("dayjs"));
-function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }) {
+function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
     // const { shortDate: dateFormat } = useLocale();
     // return (
     //   <TimePicker

package/form/controls/EmailControl.d.ts

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

package/form/controls/EmailControl.js

@@ -4,7 +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");
-function EmailControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoComplete, textTransform, borderOnFocusOnly, readOnly, }) {
+function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "email", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
         // size="sm"
         value: value || '', onChange: (e) => {

package/form/controls/MultiSelectControl.d.ts

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

package/form/controls/MultiSelectControl.js

@@ -4,7 +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");
-function MultiSelectControl({ value, onChange, options, id, name, disabled, error, onBlur, onFocus, placeholder, }) {
+function MultiSelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {
         const selectedOptions = options.filter((x) => value.includes(String(x.value)));

package/form/controls/NumberControl.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberControl = NumberControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable unused-imports/no-unused-vars */
 const react_components_1 = require("@fluentui/react-components");
 function NumberControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "number", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 

package/form/controls/PasswordControl.d.ts

@@ -3,4 +3,4 @@ import { ControlProps } from './types';
 export interface PasswordControlProps extends ControlProps<string> {
     appearance?: InputProps['appearance'];
 }
-export declare function PasswordControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoFocus, appearance, }: PasswordControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance, }: PasswordControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/PasswordControl.js

@@ -5,7 +5,7 @@ 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, error, placeholder, disabled, autoFocus, appearance = 'filled-darker', }) {
+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(), 
         // invalid={error}

package/form/controls/SelectControl.d.ts

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

package/form/controls/SelectControl.js

@@ -4,7 +4,7 @@ exports.default = SelectControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-function SelectControl({ value, onChange, options, id, name, disabled, error, onBlur, onFocus, placeholder, readOnly, }) {
+function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
     var _a;
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {

package/form/controls/SwitchControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface SwitchControlProps extends ControlProps<boolean> {
 }
-export declare function SwitchControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, readOnly, }: SwitchControlProps): null;
+export declare function SwitchControl({}: SwitchControlProps): null;

package/form/controls/SwitchControl.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchControl = SwitchControl;
-function SwitchControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, readOnly, }) {
+function SwitchControl({}) {
     return null;
 }

package/form/controls/TelephoneControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface TelephoneControlProps extends ControlProps<string> {
     autoComplete?: string;
 }
-export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TelephoneControl.js

@@ -4,7 +4,7 @@ exports.TelephoneControl = TelephoneControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
-function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoComplete, }) {
+function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 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, autoComplete: autoComplete, style: {

package/form/controls/TextAreaControl.d.ts

@@ -3,4 +3,4 @@ export interface TextAreaControlProps extends ControlProps<string> {
     rows?: number;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
 }
-export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, error, disabled, rows, textTransform, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, rows, textTransform, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextAreaControl.js

@@ -3,7 +3,7 @@ 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");
-function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, error, disabled, rows = 5, textTransform, }) {
+function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, rows = 5, textTransform, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
                 ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toUpperCase())

package/form/layout/FormSection/FormSection.js

@@ -11,7 +11,7 @@ const FormSectionLoading_1 = require("./FormSectionLoading");
 function determineItemCount(availableWidth, itemWidth, gap, padding) {
     return Math.floor((availableWidth + gap - 2 * padding) / (itemWidth + gap));
 }
-const FormSection = ({ title, children, columnCount, fullHeight, labelPosition, noPadding, hideLabel, }) => {
+const FormSection = ({ title, children, columnCount, labelPosition, noPadding, hideLabel }) => {
     // const columnCount = 2;
     const divRef = (0, react_1.useRef)(null);
     const divSize = (0, hooks_1.useElementSize)(divRef, 100);

package/form/layout/FormSection/FormSectionColumn.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormSectionColumn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FormSectionColumn = ({ children, span }) => {
+const FormSectionColumn = ({ children }) => {
     return ((0, jsx_runtime_1.jsx)("div", { 
         // md={span}
         // xs={12}

package/form/layout/FormSection/FormSectionLoading.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormSectionLoading = void 0;
-const FormSectionLoading = ({ controlCount, }) => {
+const FormSectionLoading = () => {
     return null;
 };
 exports.FormSectionLoading = FormSectionLoading;

package/form/layout/FormTab/FormTab.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable unused-imports/no-unused-vars */
 const dataform_1 = require("@headless-adminapp/app/dataform");
 const hooks_1 = require("@headless-adminapp/app/hooks");
 const mutable_1 = require("@headless-adminapp/app/mutable");
@@ -65,7 +66,7 @@ const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidth
             flexDirection: 'column',
             flex: 1,
             // marginTop: 12,
-            // padding: 12,
+            padding: 12,
         }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 // display: 'flex',
                 // flexWrap: 'wrap',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.3",
+  "version": "0.0.17-alpha.7",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -26,5 +26,22 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "f6ce162167fabc3cbac101038b157ddd22455a4f"
+  "dependencies": {
+    "@fluentui/react-components": "9.54.4",
+    "@fluentui/react-datepicker-compat": "^0.4.43",
+    "@fluentui/react-nav-preview": "^0.5.1",
+    "@hookform/resolvers": "^3.9.0",
+    "@tanstack/react-query": "5.51.1",
+    "@tanstack/react-table": "^8.20.1",
+    "@tanstack/react-virtual": "^3.8.6",
+    "dayjs": "^1.11.13",
+    "dnd-core": "^16.0.1",
+    "immutability-helper": "^3.1.1",
+    "lodash": "^4.17.21",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-hook-form": "7.52.2",
+    "yup": "^1.4.0"
+  },
+  "gitHead": "5b53560e1c0b20e0bb0e74e820a96c7c75e2c43b"
 }