@headless-adminapp/fluent 0.0.17-alpha.43 → 0.0.17-alpha.45

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 (11) hide show
  1. package/App/AppHeaderContianer.js +1 -1
  2. package/App/AppLogo.js +1 -1
  3. package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js +1 -0
  4. package/DataGrid/GridHeaderDesktop.js +5 -2
  5. package/DataGrid/GridTableContainer.js +12 -2
  6. package/DataGrid/useTableColumns.js +2 -2
  7. package/PageEntityForm/PageEntityFormDesktopContainer.js +3 -12
  8. package/PageEntityForm/ProcessFlow.d.ts +10 -0
  9. package/PageEntityForm/ProcessFlow.js +84 -0
  10. package/PageEntityForm/RecordCard.js +9 -2
  11. package/package.json +2 -2
package/App/AppHeaderContianer.js CHANGED
@@ -41,7 +41,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
41
41
  alignItems: 'center',
42
42
  cursor: 'pointer',
43
43
  color: 'white',
44
- }, children: [(0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: app.title })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
44
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', paddingLeft: 4, paddingRight: 6 }, children: (0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: app.title })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
45
45
  paddingLeft: 8,
46
46
  display: 'flex',
47
47
  gap: 16,
package/App/AppLogo.js CHANGED
@@ -22,7 +22,7 @@ const AppLogo = ({ logo, title }) => {
22
22
  justifyContent: 'center',
23
23
  width: 32,
24
24
  height: 32,
25
- }, children: (0, jsx_runtime_1.jsx)("img", { src: logo.image, alt: title, style: { width: 24, height: 24 } }) }));
25
+ }, children: (0, jsx_runtime_1.jsx)("img", { src: logo.image, alt: title, style: { width: 32, height: 32 } }) }));
26
26
  }
27
27
  return null;
28
28
  };
package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js CHANGED
@@ -107,6 +107,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
107
107
  maxWidth: minWidth,
108
108
  display: 'flex',
109
109
  alignItems: 'center',
110
+ fontWeight: react_components_1.tokens.fontWeightMedium,
110
111
  // pointerEvents: disableFilter && disableSort ? 'none' : 'auto',
111
112
  }, onClick: (event) => {
112
113
  event.preventDefault();
package/DataGrid/GridHeaderDesktop.js CHANGED
@@ -31,9 +31,12 @@ const GridHeaderDesktop = (props) => {
31
31
  gap: 16,
32
32
  justifyContent: 'space-between',
33
33
  display: 'flex',
34
- }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", children: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
34
+ }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", style: {
35
+ fontSize: react_components_1.tokens.fontSizeBase400,
36
+ fontWeight: react_components_1.tokens.fontWeightMedium,
37
+ }, children: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
35
38
  var _a, _b;
36
39
  return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
37
- }) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) })] })] }));
40
+ }) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), appearance: "filled-darker" })] })] }));
38
41
  };
39
42
  exports.GridHeaderDesktop = GridHeaderDesktop;
package/DataGrid/GridTableContainer.js CHANGED
@@ -20,6 +20,15 @@ const useTableColumns_1 = require("./useTableColumns");
20
20
  const utils_1 = require("./utils");
21
21
  const useStyles = (0, react_components_1.makeStyles)({
22
22
  root: {
23
+ '[aria-selected="true"]': {
24
+ background: react_components_1.tokens.colorBrandBackground2,
25
+ '& .fui-TableSelectionCell': {
26
+ background: 'inherit',
27
+ },
28
+ '& .tableCellAction': {
29
+ background: 'inherit',
30
+ },
31
+ },
23
32
  '&:hover': {
24
33
  // background: tokens.colorNeutralForeground1Hover,
25
34
  '& .fui-TableSelectionCell': {
@@ -198,13 +207,14 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
198
207
  display: 'flex',
199
208
  position: 'sticky',
200
209
  top: 0,
201
- background: react_components_1.tokens.colorNeutralBackground3,
210
+ background: react_components_1.tokens.colorNeutralBackground1,
202
211
  zIndex: 2,
203
212
  }, children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
204
213
  position: 'sticky',
205
214
  top: 0,
206
215
  display: 'flex',
207
216
  minWidth: 'calc(100% - 16px)',
217
+ borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
208
218
  }, children: headerGroup.headers.map((header) => header.isPlaceholder
209
219
  ? null
210
220
  : (0, react_table_1.flexRender)(header.column.columnDef.header, Object.assign(Object.assign({}, header.getContext()), { key: header.id }))) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
@@ -213,7 +223,7 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
213
223
  transform: 'translateY(-33px)',
214
224
  }, children: virtualItems.map((virtualRow) => {
215
225
  const row = rows[virtualRow.index];
216
- return ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { className: (0, react_components_1.mergeClasses)(styles.root), style: {
226
+ return ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { "aria-selected": row.getIsSelected(), className: (0, react_components_1.mergeClasses)(styles.root), style: {
217
227
  display: 'flex',
218
228
  height: `${virtualRow.size}px`,
219
229
  minWidth: 'calc(100% - 16px)',
package/DataGrid/useTableColumns.js CHANGED
@@ -107,7 +107,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
107
107
  right: 0,
108
108
  top: 0,
109
109
  // zIndex: 1,
110
- background: react_components_1.tokens.colorNeutralBackground3,
110
+ background: react_components_1.tokens.colorNeutralBackground1,
111
111
  borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
112
112
  }, children: "\u00A0" })),
113
113
  cell: (info) => ((0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { onOpen: () => {
@@ -132,7 +132,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
132
132
  display: 'flex',
133
133
  left: 0,
134
134
  top: 0,
135
- background: react_components_1.tokens.colorNeutralBackground3,
135
+ background: react_components_1.tokens.colorNeutralBackground1,
136
136
  zIndex: 1,
137
137
  width: 32,
138
138
  maxWidth: 32,
package/PageEntityForm/PageEntityFormDesktopContainer.js CHANGED
@@ -18,6 +18,7 @@ const FormTab_1 = require("../form/layout/FormTab");
18
18
  const CommandContainer_1 = require("./CommandContainer");
19
19
  const FormTabRelated_1 = require("./FormTabRelated");
20
20
  const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
21
+ const ProcessFlow_1 = require("./ProcessFlow");
21
22
  const RelatedViewSelector_1 = require("./RelatedViewSelector");
22
23
  const SectionContainer_1 = require("./SectionContainer");
23
24
  const PageEntityFormDesktopContainer = () => {
@@ -30,6 +31,7 @@ const PageEntityFormDesktopContainer = () => {
30
31
  const { language } = (0, locale_1.useLocale)();
31
32
  const schema = (0, hooks_1.useDataFormSchema)();
32
33
  const formConfig = (0, hooks_1.useSelectedForm)();
34
+ const processFlowSteps = (0, hooks_1.useProcessFlowSteps)();
33
35
  const setActiveTab = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (value) => {
34
36
  setValue((state) => (Object.assign(Object.assign({}, state), { activeTab: value })));
35
37
  });
@@ -100,20 +102,9 @@ const PageEntityFormDesktopContainer = () => {
100
102
  } })), (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 }) => {
101
103
  return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value) }));
102
104
  } })] })] }, controlName));
103
- }) })] }), (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), 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: (_c = (_b = selectedRelatedItem.localizedPluralLabels) === null || _b === void 0 ? void 0 : _b[language]) !== null && _c !== void 0 ? _c : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
105
+ }) })] }), !!(processFlowSteps === null || processFlowSteps === void 0 ? void 0 : 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), 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: (_c = (_b = selectedRelatedItem.localizedPluralLabels) === null || _b === void 0 ? void 0 : _b[language]) !== null && _c !== void 0 ? _c : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
104
106
  setSelectedRelatedItem(item);
105
107
  setActiveTab('related');
106
108
  } })] })] })] }), (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 })] })] }));
107
- // return (
108
- // <Fragment>
109
- // <PageEntityViewDesktopFrame
110
- // commandBar={<CommandContainer />}
111
- // header={<GridHeaderContainer />}
112
- // content={<GridTableContainer />}
113
- // footer={<GridPaginationContainer />}
114
- // />
115
- // {/* <CustomizeColumnsContainer /> */}
116
- // </Fragment>
117
- // );
118
109
  };
119
110
  exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;
package/PageEntityForm/ProcessFlow.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ interface ProcessFlowProps {
2
+ height?: number;
3
+ rounded?: boolean;
4
+ items: Array<{
5
+ label: string;
6
+ isActivated?: boolean;
7
+ }>;
8
+ }
9
+ export declare function ProcessFlow({ height, rounded, items, }: ProcessFlowProps): import("react/jsx-runtime").JSX.Element;
10
+ export {};
package/PageEntityForm/ProcessFlow.js ADDED
@@ -0,0 +1,84 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ProcessFlow = ProcessFlow;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_components_1 = require("@fluentui/react-components");
6
+ function ProcessFlow({ height = 32, rounded = true, items, }) {
7
+ return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', height }, children: (0, jsx_runtime_1.jsx)("div", { style: {
8
+ display: 'flex',
9
+ overflow: 'hidden',
10
+ borderRadius: rounded ? react_components_1.tokens.borderRadiusMedium : 0,
11
+ }, 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))) }) }));
12
+ }
13
+ const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
14
+ const backgroundColor = isActivated
15
+ ? react_components_1.tokens.colorBrandBackground
16
+ : react_components_1.tokens.colorNeutralStrokeDisabled;
17
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
18
+ flex: 1,
19
+ position: 'relative',
20
+ display: 'flex',
21
+ alignItems: 'center',
22
+ justifyContent: 'center',
23
+ height,
24
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { zIndex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
25
+ position: 'absolute',
26
+ left: 20,
27
+ right: 20,
28
+ top: 0,
29
+ height: '100%',
30
+ backgroundColor: backgroundColor,
31
+ } }), (0, jsx_runtime_1.jsx)("div", { style: {
32
+ position: 'absolute',
33
+ left: 0,
34
+ top: 0,
35
+ width: 40,
36
+ height: '50%',
37
+ backgroundColor: backgroundColor,
38
+ transform: isFirst ? 'skewX(0deg)' : 'skewX(30deg)',
39
+ borderLeft: isFirst
40
+ ? 'none'
41
+ : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
42
+ } }), (0, jsx_runtime_1.jsx)("div", { style: {
43
+ position: 'absolute',
44
+ right: 0,
45
+ top: 0,
46
+ width: 40,
47
+ height: '50%',
48
+ backgroundColor: backgroundColor,
49
+ transform: isLast ? 'skewX(0deg)' : 'skewX(30deg)',
50
+ borderRight: isLast
51
+ ? 'none'
52
+ : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
53
+ } }), (0, jsx_runtime_1.jsx)("div", { style: {
54
+ position: 'absolute',
55
+ left: 0,
56
+ top: '50%',
57
+ width: 40,
58
+ height: '50%',
59
+ backgroundColor: backgroundColor,
60
+ transform: isFirst ? 'skewX(0deg)' : 'skewX(-30deg)',
61
+ borderLeft: isFirst
62
+ ? 'none'
63
+ : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
64
+ } }), (0, jsx_runtime_1.jsx)("div", { style: {
65
+ position: 'absolute',
66
+ right: 0,
67
+ top: '50%',
68
+ width: 40,
69
+ height: '50%',
70
+ backgroundColor: backgroundColor,
71
+ transform: isLast ? 'skewX(0deg)' : 'skewX(-30deg)',
72
+ borderRight: isLast
73
+ ? 'none'
74
+ : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
75
+ } })] }), (0, jsx_runtime_1.jsx)("div", { style: {
76
+ display: 'flex',
77
+ flexDirection: 'column',
78
+ flex: 1,
79
+ alignItems: 'center',
80
+ gap: react_components_1.tokens.spacingVerticalS,
81
+ color: isActivated ? 'white' : undefined,
82
+ zIndex: 2,
83
+ }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { children: label }) })] }));
84
+ };
package/PageEntityForm/RecordCard.js CHANGED
@@ -4,6 +4,7 @@ exports.RecordCard = RecordCard;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_components_1 = require("@fluentui/react-components");
6
6
  const utils_1 = require("@headless-adminapp/app/utils");
7
+ const color_1 = require("@headless-adminapp/app/utils/color");
7
8
  const useStyles = (0, react_components_1.makeStyles)({
8
9
  root: {
9
10
  width: '100%',
@@ -71,9 +72,15 @@ function RecordCard({ schema, cardView, record, selected, }) {
71
72
  if (!choice) {
72
73
  return null;
73
74
  }
75
+ const bgColor = choice.color;
76
+ const color = bgColor
77
+ ? (0, color_1.isColorDark)(bgColor)
78
+ ? '#FFFFFF'
79
+ : '#000000'
80
+ : undefined;
74
81
  return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
75
- background: choice.color,
76
- color: 'white',
82
+ background: bgColor,
83
+ color: color,
77
84
  height: 16,
78
85
  display: 'flex',
79
86
  alignItems: 'center',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@headless-adminapp/fluent",
3
- "version": "0.0.17-alpha.43",
3
+ "version": "0.0.17-alpha.45",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -48,5 +48,5 @@
48
48
  "uuid": "11.0.3",
49
49
  "yup": "^1.4.0"
50
50
  },
51
- "gitHead": "ee8c97501940617fa6dcfc935252a3b8d363804f"
51
+ "gitHead": "7538074665d8fa6f67ca2a91e62ea32d09570a31"
52
52
  }