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

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -1,39 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Body1, Caption1, Divider, MessageBar, MessageBarBody, Subtitle2, Tab, TabList, tokens, } from '@fluentui/react-components';
-import { DataFormContext } from '@headless-adminapp/app/dataform';
-import { useDataFormSchema, useFormInstance, useFormIsDirty, useFormNotifications, useProcessFlowSteps, useRecordId, useRecordTitle, useSelectedForm, } from '@headless-adminapp/app/dataform/hooks';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { localizedLabel } from '@headless-adminapp/app/locale/utils';
-import { useContextSelector, useContextValueSetter, } from '@headless-adminapp/app/mutable';
-import { getAttributeFormattedValue } from '@headless-adminapp/app/utils';
-import { Fragment, useEffect, useState } from 'react';
-import { Controller } from 'react-hook-form';
-import { PageBroken } from '../components/PageBroken';
-import { PageLoading } from '../components/PageLoading';
-import { FormBody } from '../form/layout/FormBody';
-import { FormTab } from '../form/layout/FormTab';
-import { CommandContainer } from './CommandContainer';
-import { FormTabRelated } from './FormTabRelated';
-import { usePageEntityFormStrings } from './PageEntityFormStringContext';
-import { ProcessFlow } from './ProcessFlow';
-import { RelatedViewSelector } from './RelatedViewSelector';
-import { SectionContainer } from './SectionContainer';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityFormDesktopContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const utils_2 = require("@headless-adminapp/app/utils");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const PageBroken_1 = require("../components/PageBroken");
+const PageLoading_1 = require("../components/PageLoading");
+const FormBody_1 = require("../form/layout/FormBody");
+const FormTab_1 = require("../form/layout/FormTab");
+const CommandContainer_1 = require("./CommandContainer");
+const FormTabRelated_1 = require("./FormTabRelated");
+const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
+const ProcessFlow_1 = require("./ProcessFlow");
+const RelatedViewSelector_1 = require("./RelatedViewSelector");
+const SectionContainer_1 = require("./SectionContainer");
 let previousCachedActiveTabInfo = null;
-export const PageEntityFormDesktopContainer = () => {
-    var _a, _b, _c;
-    const dataState = useContextSelector(DataFormContext, (state) => state.dataState);
-    const strings = usePageEntityFormStrings();
-    const recordId = useRecordId();
-    const record = useContextSelector(DataFormContext, (state) => state.record);
-    const activeTab = useContextSelector(DataFormContext, (state) => state.activeTab);
-    const { language } = useLocale();
-    const schema = useDataFormSchema();
-    const formConfig = useSelectedForm();
-    const processFlowSteps = useProcessFlowSteps();
-    const setActiveTab = useContextValueSetter(DataFormContext, (setValue) => (value) => {
-        setValue((state) => (Object.assign(Object.assign({}, state), { activeTab: value })));
+const PageEntityFormDesktopContainer = () => {
+    const dataState = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.dataState);
+    const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
+    const recordId = (0, hooks_1.useRecordId)();
+    const record = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.record);
+    const activeTab = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.activeTab);
+    const { language } = (0, locale_1.useLocale)();
+    const schema = (0, hooks_1.useDataFormSchema)();
+    const formConfig = (0, hooks_1.useSelectedForm)();
+    const processFlowSteps = (0, hooks_1.useProcessFlowSteps)();
+    const setActiveTab = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (value) => {
+        setValue((state) => ({
+            ...state,
+            activeTab: value,
+        }));
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (previousCachedActiveTabInfo &&
             previousCachedActiveTabInfo.logicalName === schema.logicalName) {
             setActiveTab(previousCachedActiveTabInfo.name);
@@ -48,78 +53,79 @@ export const PageEntityFormDesktopContainer = () => {
             };
         }
     }, [setActiveTab, formConfig, schema]);
-    const recordTitle = useRecordTitle();
+    const recordTitle = (0, hooks_1.useRecordTitle)();
     // const readonly = useIsFormReadonly();
-    const formInstance = useFormInstance();
-    const isDirty = useFormIsDirty();
-    const notifications = useFormNotifications();
-    const [selectedRelatedItem, setSelectedRelatedItem] = useState(null);
+    const formInstance = (0, hooks_1.useFormInstance)();
+    const isDirty = (0, hooks_1.useFormIsDirty)();
+    const notifications = (0, hooks_1.useFormNotifications)();
+    const [selectedRelatedItem, setSelectedRelatedItem] = (0, react_1.useState)(null);
     if (dataState.isFetching) {
-        return _jsx(PageLoading, {});
+        return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
     }
     if (dataState.isError) {
-        return _jsx(PageBroken, { title: "Error", message: "Unable to load page" });
+        return (0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "Error", message: "Unable to load page" });
     }
     if (recordId && !record) {
-        return (_jsx(PageBroken, { title: "Record not found", message: "Requested record not found in system or you may not have enought permission." }));
+        return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "Record not found", message: "Requested record not found in system or you may not have enought permission." }));
     }
-    return (_jsxs("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             // backgroundColor: tokens.colorNeutralBackground2,
             overflow: 'hidden',
-        }, children: [_jsxs("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
-                    gap: tokens.spacingVerticalM,
-                    paddingTop: tokens.spacingVerticalM,
-                    paddingInline: tokens.spacingHorizontalM,
-                }, children: [_jsx("div", { style: {
+                    gap: react_components_1.tokens.spacingVerticalM,
+                    paddingTop: react_components_1.tokens.spacingVerticalM,
+                    paddingInline: react_components_1.tokens.spacingHorizontalM,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                             // padding: 4,
-                            boxShadow: tokens.shadow2,
-                            borderRadius: tokens.borderRadiusMedium,
-                            background: tokens.colorNeutralBackground1,
+                            boxShadow: react_components_1.tokens.shadow2,
+                            borderRadius: react_components_1.tokens.borderRadiusMedium,
+                            background: react_components_1.tokens.colorNeutralBackground1,
                             display: 'flex',
                             // overflow: 'hidden',
-                        }, children: _jsx(CommandContainer, {}) }), notifications.length > 0 && (_jsx("div", { children: notifications.map((notification, index) => (_jsx(MessageBar, { intent: notification.level, icon: null, children: _jsx(MessageBarBody, { children: notification.message }) }, index))) })), _jsxs("div", { style: {
+                        }, children: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}) }), notifications.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
-                            boxShadow: tokens.shadow4,
-                            borderRadius: tokens.borderRadiusMedium,
-                            background: tokens.colorNeutralBackground1,
+                            boxShadow: react_components_1.tokens.shadow4,
+                            borderRadius: react_components_1.tokens.borderRadiusMedium,
+                            background: react_components_1.tokens.colorNeutralBackground1,
                             overflow: 'hidden',
                             zIndex: 2,
-                        }, children: [_jsxs("div", { style: {
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
-                                    paddingInline: tokens.spacingHorizontalM,
-                                    paddingTop: tokens.spacingVerticalS,
-                                    marginBottom: tokens.spacingVerticalS,
-                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [_jsxs("div", { style: {
+                                    paddingInline: react_components_1.tokens.spacingHorizontalM,
+                                    paddingTop: react_components_1.tokens.spacingVerticalS,
+                                    marginBottom: react_components_1.tokens.spacingVerticalS,
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
-                                                    gap: tokens.spacingHorizontalXS,
+                                                    gap: react_components_1.tokens.spacingHorizontalXS,
                                                     alignItems: 'center',
-                                                }, children: [_jsx(Subtitle2, { children: recordTitle }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: isDirty
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { children: recordTitle }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: isDirty
                                                             ? `- ${strings.unsaved}`
                                                             : !!record
                                                                 ? `- ${strings.saved}`
-                                                                : '' })] }), _jsx(Body1, { style: { color: tokens.colorNeutralForeground3 }, children: localizedLabel(language, schema) })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'row' }, children: (_a = formConfig.experience.headerControls) === null || _a === void 0 ? void 0 : _a.map((controlName, index) => {
+                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, utils_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls?.map((controlName, index) => {
                                             const attribute = schema.attributes[controlName];
-                                            return (_jsxs(Fragment, { children: [index > 0 && (_jsx(Divider, { vertical: true, style: {
-                                                            width: tokens.spacingHorizontalXXL,
+                                            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: {
+                                                            width: react_components_1.tokens.spacingHorizontalXXL,
                                                             opacity: 0.5,
-                                                        } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Body1, { style: { color: tokens.colorNeutralForeground4 }, children: attribute.label }), _jsx(Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
-                                                                    return (_jsx(Body1, { children: getAttributeFormattedValue(attribute, field.value) }));
+                                                        } })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: attribute.label }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
+                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value) }));
                                                                 } })] })] }, controlName));
-                                        }) })] }), !!(processFlowSteps === null || processFlowSteps === void 0 ? void 0 : processFlowSteps.length) && (_jsx(ProcessFlow, { height: 28, rounded: false, items: processFlowSteps })), _jsxs("div", { style: { display: 'flex', paddingBottom: tokens.spacingVerticalS }, children: [_jsxs(TabList, { selectedValue: activeTab, onTabSelect: (e, value) => {
+                                        }) })] }), !!processFlowSteps?.length && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => {
                                             setActiveTab(value.value);
                                             previousCachedActiveTabInfo = {
                                                 logicalName: schema.logicalName,
                                                 name: value.value,
                                                 relatedItem: null,
                                             };
-                                        }, children: [formConfig.experience.tabs.map((tab) => (_jsx(Tab, { value: tab.name, children: localizedLabel(language, tab) }, tab.name))), !!selectedRelatedItem && (_jsx(Tab, { value: "related", children: (_c = (_b = selectedRelatedItem.localizedPluralLabels) === null || _b === void 0 ? void 0 : _b[language]) !== null && _c !== void 0 ? _c : selectedRelatedItem.pluralLabel }))] }), _jsx(RelatedViewSelector, { onSelect: (item) => {
+                                        }, children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, utils_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: selectedRelatedItem.localizedPluralLabels?.[language] ??
+                                                    selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
                                             setSelectedRelatedItem(item);
                                             setActiveTab('related');
                                             previousCachedActiveTabInfo = {
@@ -127,5 +133,6 @@ export const PageEntityFormDesktopContainer = () => {
                                                 name: 'related',
                                                 relatedItem: item,
                                             };
-                                        } })] })] })] }), _jsxs(FormBody, { children: [formConfig.experience.tabs.map((tab) => (_jsx(FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => (_jsx(FormTab.Column, { children: tabColumn.sections.map((section) => (_jsx(SectionContainer, { section: section, readOnly: false }, section.name))) }, index))) }, tab.name))), _jsx(FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));
+                                        } })] })] })] }), (0, jsx_runtime_1.jsxs)(FormBody_1.FormBody, { children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));
 };
+exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;

package/PageEntityForm/PageEntityFormStringContext.js

@@ -1,11 +1,15 @@
-import { createContext, useContext } from 'react';
-export const defaultPageEntityFormStrings = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityFormStringContext = exports.defaultPageEntityFormStrings = void 0;
+exports.usePageEntityFormStrings = usePageEntityFormStrings;
+const react_1 = require("react");
+exports.defaultPageEntityFormStrings = {
     saved: 'Saved',
     unsaved: 'Unsaved',
     related: 'Related',
 };
-export const PageEntityFormStringContext = createContext(defaultPageEntityFormStrings);
-export function usePageEntityFormStrings() {
-    const context = useContext(PageEntityFormStringContext);
+exports.PageEntityFormStringContext = (0, react_1.createContext)(exports.defaultPageEntityFormStrings);
+function usePageEntityFormStrings() {
+    const context = (0, react_1.useContext)(exports.PageEntityFormStringContext);
     return context;
 }

package/PageEntityForm/ProcessFlow.js

@@ -1,31 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Caption1, tokens } from '@fluentui/react-components';
-export function ProcessFlow({ height = 32, rounded = true, items, }) {
-    return (_jsx("div", { style: { position: 'relative', height }, children: _jsx("div", { style: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProcessFlow = ProcessFlow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function ProcessFlow({ height = 32, rounded = true, items, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', height }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 overflow: 'hidden',
-                borderRadius: rounded ? tokens.borderRadiusMedium : 0,
-            }, children: items.map((item, index) => (_jsx(ProcessFlowItem, { height: height, label: item.label, isActivated: item.isActivated, isFirst: index === 0, isLast: index === items.length - 1 }, index))) }) }));
+                borderRadius: rounded ? react_components_1.tokens.borderRadiusMedium : 0,
+            }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ProcessFlowItem, { height: height, label: item.label, isActivated: item.isActivated, isFirst: index === 0, isLast: index === items.length - 1 }, index))) }) }));
 }
 const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
     const backgroundColor = isActivated
-        ? tokens.colorBrandBackground
-        : tokens.colorNeutralStrokeDisabled;
-    return (_jsxs("div", { style: {
+        ? react_components_1.tokens.colorBrandBackground
+        : react_components_1.tokens.colorNeutralStrokeDisabled;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             flex: 1,
             position: 'relative',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             height,
-        }, children: [_jsxs("div", { style: { zIndex: 1 }, children: [_jsx("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { zIndex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                             position: 'absolute',
                             left: 20,
                             right: 20,
                             top: 0,
                             height: '100%',
                             backgroundColor: backgroundColor,
-                        } }), _jsx("div", { style: {
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
                             position: 'absolute',
                             left: 0,
                             top: 0,
@@ -35,8 +38,8 @@ const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
                             transform: isFirst ? 'skewX(0deg)' : 'skewX(30deg)',
                             borderLeft: isFirst
                                 ? 'none'
-                                : `1px solid ${tokens.colorNeutralBackground1}`,
-                        } }), _jsx("div", { style: {
+                                : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
                             position: 'absolute',
                             right: 0,
                             top: 0,
@@ -46,8 +49,8 @@ const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
                             transform: isLast ? 'skewX(0deg)' : 'skewX(30deg)',
                             borderRight: isLast
                                 ? 'none'
-                                : `1px solid ${tokens.colorNeutralBackground1}`,
-                        } }), _jsx("div", { style: {
+                                : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
                             position: 'absolute',
                             left: 0,
                             top: '50%',
@@ -57,8 +60,8 @@ const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
                             transform: isFirst ? 'skewX(0deg)' : 'skewX(-30deg)',
                             borderLeft: isFirst
                                 ? 'none'
-                                : `1px solid ${tokens.colorNeutralBackground1}`,
-                        } }), _jsx("div", { style: {
+                                : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
                             position: 'absolute',
                             right: 0,
                             top: '50%',
@@ -68,14 +71,14 @@ const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
                             transform: isLast ? 'skewX(0deg)' : 'skewX(-30deg)',
                             borderRight: isLast
                                 ? 'none'
-                                : `1px solid ${tokens.colorNeutralBackground1}`,
-                        } })] }), _jsx("div", { style: {
+                                : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
+                        } })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
                     alignItems: 'center',
-                    gap: tokens.spacingVerticalS,
+                    gap: react_components_1.tokens.spacingVerticalS,
                     color: isActivated ? 'white' : undefined,
                     zIndex: 2,
-                }, children: _jsx(Caption1, { children: label }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { children: label }) })] }));
 };

package/PageEntityForm/RecordCard.js

@@ -1,15 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Body1, Body1Strong, Caption1, makeStyles, mergeClasses, Tag, tokens, } from '@fluentui/react-components';
-import { getAttributeFormattedValue } from '@headless-adminapp/app/utils';
-import { isColorDark } from '@headless-adminapp/app/utils/color';
-const useStyles = makeStyles({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordCard = RecordCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const utils_1 = require("@headless-adminapp/app/utils");
+const color_1 = require("@headless-adminapp/app/utils/color");
+const useStyles = (0, react_components_1.makeStyles)({
     root: {
         width: '100%',
         display: 'flex',
         flexDirection: 'row',
-        paddingInline: tokens.spacingHorizontalL,
-        paddingBlock: tokens.spacingVerticalS,
-        gap: tokens.spacingHorizontalS,
+        paddingInline: react_components_1.tokens.spacingHorizontalL,
+        paddingBlock: react_components_1.tokens.spacingVerticalS,
+        gap: react_components_1.tokens.spacingHorizontalS,
         // cursor: 'pointer',
         // '&:hover': {
         //   background: tokens.colorNeutralBackground1Hover,
@@ -24,10 +27,14 @@ const useStyles = makeStyles({
     selected: {},
 });
 function createIntial(name) {
-    return name === null || name === void 0 ? void 0 : name.split(' ').map((x) => x[0]).slice(0, 2).join('').toUpperCase();
+    return name
+        ?.split(' ')
+        .map((x) => x[0])
+        .slice(0, 2)
+        .join('')
+        .toUpperCase();
 }
-export function RecordCard({ schema, cardView, record, selected, }) {
-    var _a, _b, _c;
+function RecordCard({ schema, cardView, record, selected, }) {
     const styles = useStyles();
     const _record = record;
     const recordTitle = _record[schema.primaryAttribute];
@@ -37,20 +44,20 @@ export function RecordCard({ schema, cardView, record, selected, }) {
         const avatarAttribute = schema.attributes[cardView.avatarColumn];
         if (avatarAttribute.type === 'attachment' &&
             avatarAttribute.format === 'image') {
-            avatarSrc = (_a = _record[cardView.avatarColumn]) === null || _a === void 0 ? void 0 : _a.url;
+            avatarSrc = _record[cardView.avatarColumn]?.url;
         }
         else if (avatarAttribute.type === 'string' &&
             avatarAttribute.format === 'url') {
             avatarSrc = _record[cardView.avatarColumn];
         }
     }
-    return (_jsxs("div", { className: mergeClasses(styles.root, selected && styles.selected), children: [cardView.showAvatar && (_jsx(Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root, selected && styles.selected), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
                     src: avatarSrc,
-                } })), _jsxs("div", { style: {
+                } })), (0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                }, children: [_jsx(Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), (_b = cardView.secondaryColumns) === null || _b === void 0 ? void 0 : _b.map((column) => (_jsx(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!((_c = cardView.rightColumn) === null || _c === void 0 ? void 0 : _c.length) && (_jsx("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
@@ -66,7 +73,7 @@ export function RecordCard({ schema, cardView, record, selected, }) {
                             if (!choice) {
                                 return null;
                             }
-                            return (_jsx(Tag, { size: "extra-small", appearance: "filled", style: {
+                            return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
                                     background: choice.color,
                                     color: 'white',
                                     height: 16,
@@ -77,9 +84,9 @@ export function RecordCard({ schema, cardView, record, selected, }) {
                         }
                     }
                     if (column.variant === 'strong') {
-                        return (_jsx(Body1Strong, { children: getAttributeFormattedValue(value, attribute) }, column.name));
+                        return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
                     }
-                    return (_jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: getAttributeFormattedValue(value, attribute) }, 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) }, column.name));
                 }) }))] }));
 }
 function SecondaryColumnContent({ record: _record, column, schema, }) {
@@ -97,21 +104,21 @@ function SecondaryColumnContent({ record: _record, column, schema, }) {
     }
     if (column.variant === 'choice') {
         if (attribute.type === 'choice') {
-            return _jsx(ChoiceTag, { attribute: attribute, value: value });
+            return (0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value });
         }
         if (attribute.type === 'choices') {
             const choices = attribute.options.filter((option) => value.includes(option.value));
             if (!choices.length) {
                 return null;
             }
-            return (_jsx("div", { style: {
+            return ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     gap: 4,
-                }, children: choices.map((choice) => (_jsx(ChoiceTag, { attribute: attribute, value: choice.value }, choice.value))) }, column.name));
+                }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: choice.value }, choice.value))) }, column.name));
         }
     }
-    return (_jsxs(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, getAttributeFormattedValue(attribute, value)] }, column.name));
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
 }
 const ChoiceTag = ({ attribute, value, }) => {
     const choice = attribute.options.find((option) => option.value === value);
@@ -121,9 +128,9 @@ const ChoiceTag = ({ attribute, value, }) => {
     const bgColor = choice.color;
     let color;
     if (bgColor) {
-        color = isColorDark(bgColor) ? '#FFFFFF' : '#000000';
+        color = (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
     }
-    return (_jsx(Tag, { size: "extra-small", appearance: "filled", style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
             background: bgColor,
             color: color,
             height: 16,

package/PageEntityForm/RecordCardLoading.js

@@ -1,22 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, makeStyles, mergeClasses, SkeletonItem, tokens, } from '@fluentui/react-components';
-const useStyles = makeStyles({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordCardLoading = RecordCardLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useStyles = (0, react_components_1.makeStyles)({
     root: {
         width: '100%',
         display: 'flex',
         flexDirection: 'row',
-        paddingInline: tokens.spacingHorizontalL,
-        paddingBlock: tokens.spacingVerticalS,
-        gap: tokens.spacingHorizontalS,
+        paddingInline: react_components_1.tokens.spacingHorizontalL,
+        paddingBlock: react_components_1.tokens.spacingVerticalS,
+        gap: react_components_1.tokens.spacingHorizontalS,
     },
 });
-export function RecordCardLoading({ cardView }) {
-    var _a;
+function RecordCardLoading({ cardView }) {
     const styles = useStyles();
-    return (_jsxs("div", { className: mergeClasses(styles.root), children: [cardView.showAvatar && (_jsx(Avatar, { color: "neutral", style: { cursor: 'pointer' } })), _jsxs("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { color: "neutral", style: { cursor: 'pointer' } })), (0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                    gap: tokens.spacingVerticalXXS,
-                }, children: [_jsx("div", { style: { paddingBlock: 2 }, children: _jsx(SkeletonItem, { size: 16, style: { height: 16 } }) }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((_, index) => (_jsx("div", { style: { paddingBlock: 2 }, children: _jsx(SkeletonItem, { size: 16, style: { width: 160, height: 12 } }) }, index)))] })] }));
+                    gap: react_components_1.tokens.spacingVerticalXXS,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { height: 16 } }) }), cardView.secondaryColumns?.map((_, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { width: 160, height: 12 } }) }, index)))] })] }));
 }

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -1,58 +1,60 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Body1Strong, Divider, makeStyles, mergeClasses, tokens, } from '@fluentui/react-components';
-import { ScrollView } from '@headless-adminapp/app/components/ScrollView';
-import { useRecordId } from '@headless-adminapp/app/dataform/hooks';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { useOpenForm } from '@headless-adminapp/app/navigation';
-import { useRecordSetResult, useRecordSetVisibility, } from '@headless-adminapp/app/recordset/hooks';
-import { Fragment } from 'react';
-import { RecordCard } from './RecordCard';
-const useStyles = makeStyles({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordSetNavigatorContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 react_1 = require("react");
+const RecordCard_1 = require("./RecordCard");
+const useStyles = (0, react_components_1.makeStyles)({
     item: {
         cursor: 'pointer',
         '&:hover': {
-            background: tokens.colorNeutralBackground1Hover,
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
         },
         '&:active': {
-            background: tokens.colorNeutralBackground1Pressed,
+            background: react_components_1.tokens.colorNeutralBackground1Pressed,
         },
     },
     selected: {
-        background: tokens.colorNeutralBackground1Selected,
+        background: react_components_1.tokens.colorNeutralBackground1Selected,
     },
 });
-export const RecordSetNavigatorContainer = () => {
-    var _a, _b;
-    const { data, cardView, schema } = useRecordSetResult();
-    const [visible] = useRecordSetVisibility();
-    const recordId = useRecordId();
+const RecordSetNavigatorContainer = () => {
+    const { data, cardView, schema } = (0, hooks_2.useRecordSetResult)();
+    const [visible] = (0, hooks_2.useRecordSetVisibility)();
+    const recordId = (0, hooks_1.useRecordId)();
     const styles = useStyles();
-    const openForm = useOpenForm();
-    const { language, direction } = useLocale();
+    const openForm = (0, navigation_1.useOpenForm)();
+    const { language, direction } = (0, locale_1.useLocale)();
     if (!schema) {
         return null;
     }
     if (!visible) {
         return null;
     }
-    return (_jsx("div", { style: {
-            [direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: tokens.spacingVerticalM,
-            paddingBlock: tokens.spacingVerticalM,
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            [direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: react_components_1.tokens.spacingVerticalM,
+            paddingBlock: react_components_1.tokens.spacingVerticalM,
             display: 'flex',
             // display: 'none',
-        }, children: _jsxs("div", { style: {
-                boxShadow: tokens.shadow2,
-                borderRadius: tokens.borderRadiusMedium,
-                background: tokens.colorNeutralBackground1,
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                boxShadow: react_components_1.tokens.shadow2,
+                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                background: react_components_1.tokens.colorNeutralBackground1,
                 display: 'flex',
                 minWidth: 320,
                 flexDirection: 'column',
-            }, children: [_jsx("div", { style: {
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         paddingInline: 16,
                         paddingBlock: 8,
-                    }, children: _jsx(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 }) }), _jsx("div", { children: _jsx(Divider, { vertical: false, style: { opacity: 0.2 } }) }), _jsx("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: _jsx(ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data === null || data === void 0 ? void 0 : data.map((record) => (_jsxs(Fragment, { children: [_jsx("div", { role: "button", className: mergeClasses(styles.item, recordId ===
+                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: schema.localizedPluralLabels?.[language] ?? 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?.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: () => {
                                         openForm({
@@ -60,6 +62,7 @@ export const RecordSetNavigatorContainer = () => {
                                             id: record[schema.idAttribute],
                                             replace: true,
                                         });
-                                    }, children: _jsx(RecordCard, { cardView: cardView, record: record, schema: schema, selected: recordId ===
-                                            record[schema.idAttribute] }) }), _jsx("div", { style: { paddingInline: tokens.spacingHorizontalL }, children: _jsx(Divider, { vertical: false, style: { opacity: 0.2 } }) })] }, record[schema.idAttribute]))) }) })] }) }));
+                                    }, 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]))) }) })] }) }));
 };
+exports.RecordSetNavigatorContainer = RecordSetNavigatorContainer;