@headless-adminapp/fluent 0.0.17-alpha.42 → 0.0.17-alpha.44

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 (8) 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/PageBoard/BoardColumnUI.js +5 -2
  8. 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/PageBoard/BoardColumnUI.js CHANGED
@@ -26,7 +26,7 @@ const BoardColumnUI = () => {
26
26
  const dataState = (0, hooks_1.useBoardColumnDataState)();
27
27
  const fetchNextPage = (0, context_2.useContextSelector)(context_1.BoardColumnContext, (state) => state.fetchNextPage);
28
28
  const { columnId, acceptSourceIds, title, updateFn } = (0, hooks_1.useBoardColumnConfig)();
29
- const { PreviewComponent, schema } = (0, hooks_1.useBoardConfig)();
29
+ const { PreviewComponent, schema, columnConfigs } = (0, hooks_1.useBoardConfig)();
30
30
  const baseContext = (0, hooks_2.useBaseCommandHandlerContext)();
31
31
  const ref = (0, react_1.useRef)(null);
32
32
  const [{ handlerId, over, canDrop }, drop] = (0, react_dnd_1.useDrop)({
@@ -48,6 +48,9 @@ const BoardColumnUI = () => {
48
48
  }))().catch(console.error);
49
49
  },
50
50
  });
51
+ const canDrag = (0, react_1.useMemo)(() => {
52
+ return columnConfigs.some((config) => config.acceptSourceIds.length > 0);
53
+ }, [columnConfigs]);
51
54
  drop(ref);
52
55
  return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
53
56
  display: 'flex',
@@ -72,7 +75,7 @@ const BoardColumnUI = () => {
72
75
  flexDirection: 'column',
73
76
  gap: react_components_1.tokens.spacingHorizontalM,
74
77
  padding: react_components_1.tokens.spacingHorizontalS,
75
- }, children: [data === null || data === void 0 ? void 0 : data.records.map((record, index) => ((0, jsx_runtime_1.jsx)(BoardColumnCard_1.BoardColumnCard, { record: record, index: index, columnId: columnId, canDrag: acceptSourceIds.length > 0, PreviewComponent: PreviewComponent, schema: schema }, index))), dataState.isFetching &&
78
+ }, children: [data === null || data === void 0 ? void 0 : data.records.map((record, index) => ((0, jsx_runtime_1.jsx)(BoardColumnCard_1.BoardColumnCard, { record: record, index: index, columnId: columnId, canDrag: canDrag, PreviewComponent: PreviewComponent, schema: schema }, index))), dataState.isFetching &&
76
79
  Array.from({ length: 5 }).map((_, index) => ((0, jsx_runtime_1.jsx)(BoardingColumnCardLoading_1.BoardingColumnCardLoading, {}, index)))] }) })] }));
77
80
  };
78
81
  exports.BoardColumnUI = BoardColumnUI;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@headless-adminapp/fluent",
3
- "version": "0.0.17-alpha.42",
3
+ "version": "0.0.17-alpha.44",
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": "c5b091139a9d3cf973f69f848b5df0a8ee8c63e7"
51
+ "gitHead": "6508942b9d96bbf5711f2f8f68a9c22a8fbccdd5"
52
52
  }