@headless-adminapp/fluent 1.4.13 → 1.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/App/AppHeaderContianer.js +1 -0
  2. package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js +3 -0
  3. package/DataGrid/GridListContainer.js +61 -33
  4. package/Header/MobileHeaderCommandContainer.d.ts +6 -0
  5. package/Header/MobileHeaderCommandContainer.js +4 -3
  6. package/PageEntityForm/PageEntityFormDesktopContainer.js +4 -4
  7. package/PageEntityForm/RecordCard.js +45 -37
  8. package/form/controls/LookupControl.js +2 -0
  9. package/form/layout/FormBody/FormBody.js +1 -5
  10. package/package.json +8 -8
package/App/AppHeaderContianer.js CHANGED
@@ -62,6 +62,7 @@ const NavActions = () => {
62
62
  const { language } = (0, locale_1.useLocale)();
63
63
  const initials = (0, react_1.useMemo)(() => {
64
64
  return authSession?.fullName
65
+ .toUpperCase()
65
66
  .split(' ')
66
67
  .map((item) => item[0])
67
68
  .slice(0, 2)
package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js CHANGED
@@ -68,6 +68,9 @@ const TableHeaderFilterCell = ({ children, sortDirection, onChangeSortDirection,
68
68
  return lookupSchema.attributes[column.expandedKey];
69
69
  }, [column.expandedKey, column.name, schemaStore, schema.attributes]);
70
70
  const align = (0, react_1.useMemo)(() => {
71
+ if (column.name === schema.primaryAttribute) {
72
+ return 'left';
73
+ }
71
74
  switch (attribute.type) {
72
75
  case 'money':
73
76
  case 'number':
package/DataGrid/GridListContainer.js CHANGED
@@ -6,12 +6,14 @@ const react_components_1 = require("@fluentui/react-components");
6
6
  const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
7
7
  const datagrid_1 = require("@headless-adminapp/app/datagrid");
8
8
  const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
9
+ const hooks_2 = require("@headless-adminapp/app/hooks");
9
10
  const locale_1 = require("@headless-adminapp/app/locale");
10
11
  const mutable_1 = require("@headless-adminapp/app/mutable");
11
12
  const navigation_1 = require("@headless-adminapp/app/navigation");
12
13
  const react_virtual_1 = require("@tanstack/react-virtual");
13
14
  const react_1 = require("react");
14
15
  const uuid_1 = require("uuid");
16
+ const MobileHeaderCommandContainer_1 = require("../Header/MobileHeaderCommandContainer");
15
17
  const RecordCard_1 = require("../PageEntityForm/RecordCard");
16
18
  const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
17
19
  const useStyles = (0, react_components_1.makeStyles)({
@@ -23,12 +25,13 @@ const useStyles = (0, react_components_1.makeStyles)({
23
25
  });
24
26
  const fallbackData = [];
25
27
  const GridListContainer = () => {
26
- const styles = useStyles();
27
28
  const data = (0, hooks_1.useGridData)();
28
29
  const dataState = (0, hooks_1.useGridDataState)();
29
30
  const fetchNextPage = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.fetchNextPage);
30
31
  const schema = (0, hooks_1.useDataGridSchema)();
31
32
  const view = (0, hooks_1.useSelectedView)();
33
+ const [showContextMenu, setShowContextMenu] = (0, react_1.useState)(false);
34
+ const [selectedIds, setSelectedIds] = (0, hooks_1.useGridSelection)();
32
35
  const tableWrapperRef = (0, react_1.useRef)(null);
33
36
  const { direction } = (0, locale_1.useLocale)();
34
37
  const dataRef = (0, react_1.useRef)(data);
@@ -57,38 +60,63 @@ const GridListContainer = () => {
57
60
  recordSetIds: dataRef.current?.records.map((x) => x[schema.idAttribute]) ?? [],
58
61
  });
59
62
  }, [openFormInternal, schema.idAttribute, schema.logicalName]);
60
- return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data?.records, hasMore: dataState?.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
63
+ const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
64
+ const contextCommands = isSubgrid
65
+ ? // eslint-disable-next-line react-hooks/rules-of-hooks
66
+ (0, hooks_1.useSubGridContextCommands)()
67
+ : // eslint-disable-next-line react-hooks/rules-of-hooks
68
+ (0, hooks_1.useMainGridContextCommands)();
69
+ return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data?.records, hasMore: dataState?.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
61
70
  fetchNextPage();
62
- }, children: (0, jsx_runtime_1.jsx)("div", { style: {
63
- position: 'relative',
64
- }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { style: {
65
- display: 'flex',
66
- flexDirection: 'column',
67
- width: '100%',
68
- height: virtualizer.getTotalSize(),
69
- }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
70
- display: 'flex',
71
- flexDirection: 'column',
72
- }, children: virtualItems.map((virtualRow) => {
73
- const row = rows[virtualRow.index];
74
- return ((0, jsx_runtime_1.jsxs)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, style: {
75
- width: '100%',
76
- position: 'absolute',
77
- transform: `translateY(${virtualRow.start}px)`,
78
- }, children: [virtualRow.index > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 0 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.root), style: {
79
- width: '100%',
80
- cursor: 'pointer',
81
- borderRadius: react_components_1.tokens.borderRadiusMedium,
82
- }, onClick: () => {
83
- const id = row[schema.idAttribute];
84
- openRecord(id);
85
- }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: row, schema: schema, selected: false }) })] }, virtualRow.key));
86
- }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)("div", { style: {
87
- display: 'flex',
88
- flexDirection: 'column',
89
- width: '100%',
90
- position: 'absolute',
91
- transform: `translateY(${virtualSize}px)`,
92
- }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card }, index))) }))] }) }) }) }));
71
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
72
+ position: 'relative',
73
+ }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { style: {
74
+ display: 'flex',
75
+ flexDirection: 'column',
76
+ width: '100%',
77
+ height: virtualizer.getTotalSize(),
78
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
79
+ display: 'flex',
80
+ flexDirection: 'column',
81
+ }, children: virtualItems.map((virtualRow) => {
82
+ const row = rows[virtualRow.index];
83
+ return ((0, jsx_runtime_1.jsxs)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, style: {
84
+ width: '100%',
85
+ position: 'absolute',
86
+ transform: `translateY(${virtualRow.start}px)`,
87
+ }, children: [virtualRow.index > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 0 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })), (0, jsx_runtime_1.jsx)(Item, { card: view.experience.card, record: row, schema: schema, onClick: () => {
88
+ const id = row[schema.idAttribute];
89
+ openRecord(id);
90
+ }, onLongPress: () => {
91
+ const id = row[schema.idAttribute];
92
+ setSelectedIds([id]);
93
+ setShowContextMenu(true);
94
+ }, selected: selectedIds.includes(row[schema.idAttribute]) })] }, virtualRow.key));
95
+ }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)("div", { style: {
96
+ display: 'flex',
97
+ flexDirection: 'column',
98
+ width: '100%',
99
+ position: 'absolute',
100
+ transform: `translateY(${virtualSize}px)`,
101
+ }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card }, index))) }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'env(safe-area-inset-bottom)' } }), (0, jsx_runtime_1.jsx)(MobileHeaderCommandContainer_1.BottomDrawerMenu, { open: showContextMenu, onClose: () => setShowContextMenu(false), actions: contextCommands })] }) }));
93
102
  };
94
103
  exports.GridListContainer = GridListContainer;
104
+ const Item = ({ onClick, onLongPress, card, record, schema, selected, }) => {
105
+ const styles = useStyles();
106
+ const isLongPress = (0, react_1.useRef)(false);
107
+ const onLongPressInternal = () => {
108
+ onLongPress?.();
109
+ isLongPress.current = true;
110
+ };
111
+ const longPressEvent = (0, hooks_2.useLongPress)(onLongPressInternal, {
112
+ isPreventDefault: false,
113
+ delay: 500,
114
+ });
115
+ return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.root), style: {
116
+ width: '100%',
117
+ cursor: 'pointer',
118
+ borderRadius: react_components_1.tokens.borderRadiusMedium,
119
+ userSelect: 'none',
120
+ WebkitUserSelect: 'none',
121
+ }, ...longPressEvent, onClick: onClick, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: card, record: record, schema: schema, selected: selected }) }));
122
+ };
package/Header/MobileHeaderCommandContainer.d.ts CHANGED
@@ -4,4 +4,10 @@ interface MobileHeaderCommandContainerProps {
4
4
  commands: CommandItemState[][];
5
5
  }
6
6
  export declare const MobileHeaderCommandContainer: FC<MobileHeaderCommandContainerProps>;
7
+ interface BottomDrawerMenuProps {
8
+ open: boolean;
9
+ onClose: () => void;
10
+ actions: CommandItemState[][];
11
+ }
12
+ export declare const BottomDrawerMenu: FC<BottomDrawerMenuProps>;
7
13
  export {};
package/Header/MobileHeaderCommandContainer.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MobileHeaderCommandContainer = void 0;
3
+ exports.BottomDrawerMenu = exports.MobileHeaderCommandContainer = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_components_1 = require("@fluentui/react-components");
6
6
  const MobileHeaderRightContent_1 = require("@headless-adminapp/app/header/components/MobileHeaderRightContent");
@@ -54,7 +54,7 @@ const MobileHeaderCommandContainer = ({ commands }) => {
54
54
  return null;
55
55
  }
56
56
  return ((0, jsx_runtime_1.jsx)(MobileHeaderQuickActionButton_1.MobileHeaderQuickActionButton, { title: command.text, Icon: command.Icon, onClick: command.onClick }, index));
57
- }), moreActions.length > 0 && ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: icons_1.Icons.MoreVertical, label: "More Actions", onClick: () => setShowMoreActions(true) }))] }) }), (0, jsx_runtime_1.jsx)(BottomDrawerMenu, { open: showMoreActions, onClose: () => setShowMoreActions(false), actions: moreActions })] }));
57
+ }), moreActions.length > 0 && ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: icons_1.Icons.MoreVertical, label: "More Actions", onClick: () => setShowMoreActions(true) }))] }) }), (0, jsx_runtime_1.jsx)(exports.BottomDrawerMenu, { open: showMoreActions, onClose: () => setShowMoreActions(false), actions: moreActions })] }));
58
58
  };
59
59
  exports.MobileHeaderCommandContainer = MobileHeaderCommandContainer;
60
60
  const BottomDrawerMenu = ({ open, onClose, actions, }) => {
@@ -135,8 +135,9 @@ const BottomDrawerMenu = ({ open, onClose, actions, }) => {
135
135
  pushStack(item.items);
136
136
  }
137
137
  } }, `${groupIndex}-${index}`));
138
- })] }, groupIndex))) }))] })] }) }));
138
+ })] }, groupIndex))) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'env(safe-area-inset-bottom)' } })] }) }));
139
139
  };
140
+ exports.BottomDrawerMenu = BottomDrawerMenu;
140
141
  const NavigationMenu = ({ Icon, danger, text, onClick, onNavigate, showDivider, showNavigateButton, }) => {
141
142
  const styles = useStyles();
142
143
  return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : (0, jsx_runtime_1.jsx)(icons_1.IconPlaceholder, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.dangerMenuItem), style: {
package/PageEntityForm/PageEntityFormDesktopContainer.js CHANGED
@@ -80,7 +80,7 @@ const PageEntityFormDesktopContainer = () => {
80
80
  background: react_components_1.tokens.colorNeutralBackground1,
81
81
  overflow: 'hidden',
82
82
  zIndex: 2,
83
- }, ref: formHeaderDivRef, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
83
+ }, ref: formHeaderDivRef, children: [(!!formConfig.experience.headerControls?.length || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { style: {
84
84
  display: 'flex',
85
85
  flexDirection: 'row',
86
86
  paddingInline: react_components_1.tokens.spacingHorizontalM,
@@ -102,7 +102,7 @@ const PageEntityFormDesktopContainer = () => {
102
102
  ? `- ${strings.unsaved}`
103
103
  : record
104
104
  ? `- ${strings.saved}`
105
- : '' })] }), (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)(MobileHeaderTitleContainer_1.MobileHeaderTitleContainer, {}), (0, jsx_runtime_1.jsx)(MobileHeaderRightContainer_1.MobileHeaderRightContainer, {}), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls?.map((controlName, index) => {
105
+ : '' })] }), (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) => {
106
106
  const attribute = schema.attributes[controlName];
107
107
  if (!attribute) {
108
108
  console.warn(`Attribute ${controlName} not found`);
@@ -117,7 +117,7 @@ const PageEntityFormDesktopContainer = () => {
117
117
  }
118
118
  return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value, locale) }));
119
119
  } })] })] }, controlName));
120
- }) })] }), !!processFlowSteps?.length && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps, skeleton: dataState.isFetching })), (0, jsx_runtime_1.jsx)(TabContainer_1.TabContainer, {})] })] }), (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, skeleton: dataState.isFetching }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }) }));
120
+ }) })] })), (0, jsx_runtime_1.jsx)(MobileHeaderTitleContainer_1.MobileHeaderTitleContainer, {}), (0, jsx_runtime_1.jsx)(MobileHeaderRightContainer_1.MobileHeaderRightContainer, {}), !!processFlowSteps?.length && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps, skeleton: dataState.isFetching })), (0, jsx_runtime_1.jsx)(TabContainer_1.TabContainer, {})] })] }), (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, skeleton: dataState.isFetching }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }) }));
121
121
  };
122
122
  exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;
123
123
  const Wrapper = ({ children, formHeaderDivRef, }) => {
@@ -136,7 +136,7 @@ const Wrapper = ({ children, formHeaderDivRef, }) => {
136
136
  right: 0,
137
137
  zIndex: visible ? 3 : 0,
138
138
  boxShadow: react_components_1.tokens.shadow4,
139
- }, children: (0, jsx_runtime_1.jsx)(TabContainer_1.TabContainer, {}) }), children] }));
139
+ }, children: (0, jsx_runtime_1.jsx)(TabContainer_1.TabContainer, {}) }), children, (0, jsx_runtime_1.jsx)("div", { style: { height: 'env(safe-area-inset-bottom)' } })] }));
140
140
  }
141
141
  return children;
142
142
  };
package/PageEntityForm/RecordCard.js CHANGED
@@ -5,27 +5,26 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_components_1 = require("@fluentui/react-components");
6
6
  const locale_1 = require("@headless-adminapp/app/locale");
7
7
  const utils_1 = require("@headless-adminapp/app/utils");
8
+ const react_1 = require("react");
8
9
  const ChoiceBadge_1 = require("../components/ChoiceBadge");
9
10
  const useStyles = (0, react_components_1.makeStyles)({
10
11
  root: {
12
+ minHeight: '44px',
13
+ display: 'flex',
14
+ flexDirection: 'row',
15
+ alignItems: 'center',
16
+ },
17
+ inner: {
11
18
  width: '100%',
12
19
  display: 'flex',
13
20
  flexDirection: 'row',
14
21
  paddingInline: react_components_1.tokens.spacingHorizontalL,
15
22
  paddingBlock: react_components_1.tokens.spacingVerticalS,
16
23
  gap: react_components_1.tokens.spacingHorizontalS,
17
- // cursor: 'pointer',
18
- // '&:hover': {
19
- // background: tokens.colorNeutralBackground1Hover,
20
- // },
21
- // '&:active': {
22
- // background: tokens.colorNeutralBackground1Pressed,
23
- // },
24
24
  },
25
- // selected: {
26
- // background: tokens.colorNeutralBackground1Selected,
27
- // },
28
- selected: {},
25
+ selected: {
26
+ background: react_components_1.tokens.colorNeutralBackground1Hover,
27
+ },
29
28
  });
30
29
  function createIntial(name) {
31
30
  return name
@@ -39,7 +38,16 @@ function RecordCard({ schema, cardView, record, selected, }) {
39
38
  const styles = useStyles();
40
39
  const locale = (0, locale_1.useLocale)();
41
40
  const _record = record;
42
- const recordTitle = _record[schema.primaryAttribute];
41
+ const recordTitle = (0, react_1.useMemo)(() => {
42
+ const _title = _record[schema.primaryAttribute];
43
+ if (_title === undefined || _title === null) {
44
+ return null;
45
+ }
46
+ if (typeof _title !== 'string') {
47
+ return String(_title);
48
+ }
49
+ return _title;
50
+ }, [_record, schema.primaryAttribute]);
43
51
  const initials = createIntial(recordTitle);
44
52
  let avatarSrc = '';
45
53
  if (cardView.showAvatar) {
@@ -56,32 +64,32 @@ function RecordCard({ schema, cardView, record, selected, }) {
56
64
  }
57
65
  }
58
66
  }
59
- 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", size: !cardView.secondaryColumns?.length ? 20 : 32, style: { cursor: 'pointer' }, image: {
60
- src: avatarSrc,
61
- } })), (0, jsx_runtime_1.jsxs)("div", { style: {
62
- display: 'flex',
63
- flexDirection: 'column',
64
- flex: 1,
65
- }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: (0, utils_1.getAttributeFormattedValue)(schema.attributes[cardView.primaryColumn], _record[cardView.primaryColumn], locale) }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema, locale: locale }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
66
- display: 'flex',
67
- flexDirection: 'column',
68
- alignItems: 'flex-end',
69
- }, children: cardView.rightColumn.map((column) => {
70
- const value = _record[column.name];
71
- if (!value) {
72
- return null;
73
- }
74
- const attribute = schema.attributes[column.name];
75
- if (column.variant === 'choice') {
76
- if (attribute.type === 'choice') {
77
- return ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value }, column.name));
67
+ return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.root, selected && styles.selected), children: (0, jsx_runtime_1.jsxs)("div", { className: styles.inner, children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", size: !cardView.secondaryColumns?.length ? 20 : 32, style: { cursor: 'pointer' }, image: {
68
+ src: avatarSrc,
69
+ } })), (0, jsx_runtime_1.jsxs)("div", { style: {
70
+ display: 'flex',
71
+ flexDirection: 'column',
72
+ flex: 1,
73
+ }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: (0, utils_1.getAttributeFormattedValue)(schema.attributes[cardView.primaryColumn], _record[cardView.primaryColumn], locale) }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema, locale: locale }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
74
+ display: 'flex',
75
+ flexDirection: 'column',
76
+ alignItems: 'flex-end',
77
+ }, children: cardView.rightColumn.map((column) => {
78
+ const value = _record[column.name];
79
+ if (!value) {
80
+ return null;
81
+ }
82
+ const attribute = schema.attributes[column.name];
83
+ if (column.variant === 'choice') {
84
+ if (attribute.type === 'choice') {
85
+ return ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value }, column.name));
86
+ }
87
+ }
88
+ if (column.variant === 'strong') {
89
+ return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
78
90
  }
79
- }
80
- if (column.variant === 'strong') {
81
- return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
82
- }
83
- return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
84
- }) }))] }));
91
+ return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
92
+ }) }))] }) }));
85
93
  }
86
94
  function SecondaryColumnContent({ record: _record, column, schema, locale, }) {
87
95
  const value = _record[column.name];
package/form/controls/LookupControl.js CHANGED
@@ -133,6 +133,8 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
133
133
  }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), primaryText: {
134
134
  style: {
135
135
  paddingBottom: 0,
136
+ textOverflow: 'ellipsis',
137
+ overflow: 'hidden',
136
138
  },
137
139
  }, children: allowNavigation && path ? ((0, jsx_runtime_1.jsxs)(react_components_1.Link, { href: path, onClick: handleOpenRecord, style: {
138
140
  display: 'flex',
package/form/layout/FormBody/FormBody.js CHANGED
@@ -17,10 +17,6 @@ const FormBody = ({ children }) => {
17
17
  padding: react_components_1.tokens.spacingVerticalM,
18
18
  }, children: children }));
19
19
  }
20
- return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, className: "FormBody_scrollview", rtl: direction === 'rtl', children: (0, jsx_runtime_1.jsx)("div", { style: {
21
- display: 'flex',
22
- flexDirection: 'column',
23
- padding: react_components_1.tokens.spacingVerticalM,
24
- }, children: children }) }) }));
20
+ return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, className: "FormBody_scrollview", rtl: direction === 'rtl', children: children }) }));
25
21
  };
26
22
  exports.FormBody = FormBody;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@headless-adminapp/fluent",
3
- "version": "1.4.13",
3
+ "version": "1.4.15",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -21,12 +21,12 @@
21
21
  "author": "",
22
22
  "license": "ISC",
23
23
  "peerDependencies": {
24
- "@fluentui/react-calendar-compat": "^0.1.20",
25
- "@fluentui/react-components": "^9.54.4",
26
- "@fluentui/react-datepicker-compat": "^0.4.43",
27
- "@fluentui/react-nav-preview": "^0.13.0",
28
- "@fluentui/react-timepicker-compat": "^0.2.46",
29
- "@tanstack/react-query": "^5.51.1"
24
+ "@fluentui/react-calendar-compat": "^0.3.7",
25
+ "@fluentui/react-components": "^9.68.3",
26
+ "@fluentui/react-datepicker-compat": "^0.6.12",
27
+ "@fluentui/react-nav-preview": "^0.13.9",
28
+ "@fluentui/react-timepicker-compat": "^0.4.13",
29
+ "@tanstack/react-query": "^5.84.2"
30
30
  },
31
31
  "dependencies": {
32
32
  "@fullcalendar/core": "6.1.15",
@@ -52,5 +52,5 @@
52
52
  "uuid": "11.0.3",
53
53
  "yup": "^1.4.0"
54
54
  },
55
- "gitHead": "70b319f4b807a300e6b01c8d7e8c1768839f9541"
55
+ "gitHead": "a95b4f3c11bcb78f672fb7299bb461368d70bd48"
56
56
  }