@headless-adminapp/fluent 1.4.42 → 1.4.44

package/App/NavigationContainer.d.ts

@@ -0,0 +1 @@
+export declare const NavigationContainer: () => import("react/jsx-runtime").JSX.Element;

package/App/NavigationContainer.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_nav_preview_1 = require("@fluentui/react-nav-preview");
+const app_1 = require("@headless-adminapp/app/app");
+const locale_1 = require("@headless-adminapp/app/locale");
+const hooks_1 = require("@headless-adminapp/app/route/hooks");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        overflow: 'hidden',
+        display: 'flex',
+        flexShrink: 0,
+    },
+    content: {
+        flex: '1',
+        padding: '16px',
+        display: 'grid',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+    },
+    field: {
+        display: 'flex',
+        marginTop: '4px',
+        marginLeft: '8px',
+        flexDirection: 'column',
+        gridRowGap: react_components_1.tokens.spacingVerticalS,
+    },
+});
+const NavigationContainer = () => {
+    const styles = useStyles();
+    const { app, schemaMetadataDic } = (0, app_1.useAppContext)();
+    const [isOpen] = (0, react_1.useState)(true);
+    const [type] = (0, react_1.useState)('inline');
+    const router = (0, hooks_1.useRouter)();
+    const pathname = (0, hooks_1.usePathname)();
+    const selectedPath = pathname;
+    const { language } = (0, locale_1.useLocale)();
+    const isRouteActive = (0, hooks_1.useIsRouteActive)();
+    const routeResolver = (0, hooks_1.useRouteResolver)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: isOpen, type: type, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
+                                var _a;
+                                const navItem = (0, utils_1.transformNavPageItem)({
+                                    item,
+                                    schemaMetadataDic: schemaMetadataDic,
+                                    language,
+                                    routeResolver,
+                                });
+                                const Icon = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
+                                const isActive = isRouteActive(selectedPath, item);
+                                return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
+                                        event.preventDefault();
+                                        router.push(navItem.link);
+                                    }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20, filled: isActive, color: isActive
+                                            ? 'var(--colorNeutralForeground2BrandSelected)'
+                                            : undefined }), value: isActive ? 'active' : '', children: navItem.label }, index));
+                            })] }, group.label))) }, area.label))) }) }) }));
+};
+exports.NavigationContainer = NavigationContainer;

package/App/utils.d.ts

@@ -0,0 +1,14 @@
+import { InternalRouteResolver } from '@headless-adminapp/app/route/context';
+import { NavPageItem } from '@headless-adminapp/core/experience/app';
+import { SchemaExperienceMetadata } from '@headless-adminapp/core/experience/schema';
+export declare function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }: {
+    item: NavPageItem;
+    schemaMetadataDic: Record<string, SchemaExperienceMetadata>;
+    language: string;
+    routeResolver: InternalRouteResolver;
+}): {
+    label: string | undefined;
+    icon: import("@headless-adminapp/icons").Icon | undefined;
+    link: string;
+    isExternal: boolean;
+};

package/App/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformNavPageItem = transformNavPageItem;
+function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }) {
+    var _a, _b, _c, _d;
+    let icon = item.icon;
+    let label = (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label;
+    let link = routeResolver(item);
+    if (item.type === 'entityview') {
+        const metadata = schemaMetadataObject === null || schemaMetadataObject === void 0 ? void 0 : schemaMetadataObject[item.logicalName];
+        if (metadata) {
+            if (!label) {
+                label =
+                    (_d = (_c = metadata.localizedPluralLabels) === null || _c === void 0 ? void 0 : _c[language]) !== null && _d !== void 0 ? _d : metadata.pluralLabel;
+            }
+            if (!icon) {
+                icon = metadata.icon;
+            }
+        }
+    }
+    return {
+        label,
+        icon,
+        link,
+        isExternal: item.type === 'external',
+    };
+}

package/DataGrid/ScrollbarWithMoreDataRequest.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+interface ScrollbarWithMoreDataRequest {
+    data: any;
+    hasMore: boolean;
+    onRequestMore: () => void;
+    rtl?: boolean;
+}
+export declare const ScrollbarWithMoreDataRequest: FC<PropsWithChildren<ScrollbarWithMoreDataRequest>>;
+export {};

package/DataGrid/ScrollbarWithMoreDataRequest.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollbarWithMoreDataRequest = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
+const react_1 = require("react");
+function getReaminingSpace(div) {
+    return div.scrollHeight - div.scrollTop - div.clientHeight;
+}
+const ScrollbarWithMoreDataRequest = ({ data, onRequestMore, hasMore, children, rtl }) => {
+    const divRef = (0, react_1.useRef)(null);
+    const onRequestMoreRef = (0, react_1.useRef)(onRequestMore);
+    onRequestMoreRef.current = onRequestMore;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const div = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!div) {
+            return;
+        }
+        const remainingSpace = getReaminingSpace(div);
+        if (remainingSpace <= 0 && hasMore) {
+            onRequestMoreRef.current();
+        }
+    }, [data, hasMore]);
+    return ((0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: rtl, onScroll: (e) => {
+            const div = e.target;
+            const remainingSpace = getReaminingSpace(div);
+            if (remainingSpace <= 0 && hasMore) {
+                onRequestMoreRef.current();
+            }
+        }, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, children: children }) }));
+};
+exports.ScrollbarWithMoreDataRequest = ScrollbarWithMoreDataRequest;

package/README.md

@@ -25,7 +25,7 @@ Peer dependencies:
 Use this package when you want a Fluent UI experience. See the docs and examples for recommended setup:
 
 - https://headless-adminapp.github.io/
-- https://github.com/kishanmundha/headless-adminapp-examples
+- https://headless-adminapp-examples.vercel.app/
 
 ## Development
 

package/form/controls/DateRangeControl.d.ts

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

package/form/controls/DateRangeControl.js

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

package/form/controls/NumberControl.d.ts

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

package/form/controls/NumberControl.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberControl = NumberControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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, 
+        // value={value ?? ''}
+        onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+        // invalid={error}
+        // size="sm"
+        disabled: disabled, readOnly: readOnly, style: {
+            width: '100%',
+        } }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.42",
+  "version": "1.4.44",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/lodash": "4.17.20"
   },
-  "gitHead": "ab95b45e2c1098d0524b19ba32cce202be8e7439"
+  "gitHead": "b61cc3933fdf461afd3e59859ea1a89469d4523a"
 }