@manuscripts/style-guide 1.13.11 → 1.13.12-LEAN-3645

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.
@@ -41,7 +41,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
41
41
  return (mod && mod.__esModule) ? mod : { "default": mod };
42
42
  };
43
43
  Object.defineProperty(exports, "__esModule", { value: true });
44
- exports.TableFootnotesSelector = void 0;
44
+ exports.FootnotesSelector = void 0;
45
45
  const react_1 = __importStar(require("react"));
46
46
  const styled_components_1 = __importDefault(require("styled-components"));
47
47
  const Button_1 = require("./Button");
@@ -77,7 +77,7 @@ const AddNewFootnote = (0, styled_components_1.default)(Button_1.ButtonGroup) `
77
77
  }
78
78
  }
79
79
  `;
80
- const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel }) => {
80
+ const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
81
81
  let selectedNotesMap;
82
82
  if (inlineFootnote) {
83
83
  const rids = inlineFootnote.attrs.rids;
@@ -104,18 +104,18 @@ const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCanc
104
104
  };
105
105
  return (react_1.default.createElement(Container, null,
106
106
  react_1.default.createElement(NotesContainer, null,
107
- react_1.default.createElement(TableFootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
107
+ react_1.default.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
108
108
  react_1.default.createElement(Actions, null,
109
109
  react_1.default.createElement(AddNewFootnote, null,
110
110
  react_1.default.createElement(Button_1.IconTextButton, { onClick: onAdd },
111
111
  react_1.default.createElement(icons_1.AddNewIcon, null),
112
- "Add new")),
112
+ addNewLabel || 'Add new')),
113
113
  react_1.default.createElement(Button_1.ButtonGroup, null,
114
114
  react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
115
115
  react_1.default.createElement(Button_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
116
116
  };
117
- exports.TableFootnotesSelector = TableFootnotesSelector;
118
- const TableFootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
117
+ exports.FootnotesSelector = FootnotesSelector;
118
+ const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
119
119
  const selectedNotes = [];
120
120
  const remainingNotes = [];
121
121
  notes.forEach((note) => {
@@ -170,5 +170,5 @@ const NoteText = styled_components_1.default.div `
170
170
  color: ${(props) => props.theme.colors.text.primary};
171
171
  flex: 1;
172
172
  font-weight: ${(props) => props.theme.font.weight.normal};
173
- margin-top: ${(props) => props.theme.grid.unit}px;
173
+ margin-top: 2px;
174
174
  `;
@@ -0,0 +1,130 @@
1
+ "use strict";
2
+ /*!
3
+ * © 2024 Atypon Systems LLC
4
+ *
5
+ * Licensed under the Apache License, Version 2.0 (the "License");
6
+ * you may not use this file except in compliance with the License.
7
+ * You may obtain a copy of the License at
8
+ *
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing, software
12
+ * distributed under the License is distributed on an "AS IS" BASIS,
13
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
+ * See the License for the specific language governing permissions and
15
+ * limitations under the License.
16
+ */
17
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
+ if (k2 === undefined) k2 = k;
19
+ var desc = Object.getOwnPropertyDescriptor(m, k);
20
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
+ desc = { enumerable: true, get: function() { return m[k]; } };
22
+ }
23
+ Object.defineProperty(o, k2, desc);
24
+ }) : (function(o, m, k, k2) {
25
+ if (k2 === undefined) k2 = k;
26
+ o[k2] = m[k];
27
+ }));
28
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
30
+ }) : function(o, v) {
31
+ o["default"] = v;
32
+ });
33
+ var __importStar = (this && this.__importStar) || function (mod) {
34
+ if (mod && mod.__esModule) return mod;
35
+ var result = {};
36
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
+ __setModuleDefault(result, mod);
38
+ return result;
39
+ };
40
+ var __importDefault = (this && this.__importDefault) || function (mod) {
41
+ return (mod && mod.__esModule) ? mod : { "default": mod };
42
+ };
43
+ Object.defineProperty(exports, "__esModule", { value: true });
44
+ exports.InsertTableDialog = void 0;
45
+ const react_1 = __importStar(require("react"));
46
+ const react_select_1 = __importDefault(require("react-select"));
47
+ const styled_components_1 = __importDefault(require("styled-components"));
48
+ const Checkbox_1 = require("./Checkbox");
49
+ const Dialog_1 = require("./Dialog");
50
+ const Label = styled_components_1.default.div `
51
+ padding-right: 16px;
52
+ width: 150px;
53
+ `;
54
+ const SelectContainer = styled_components_1.default.div `
55
+ width: 182px;
56
+ height: 30px;
57
+ `;
58
+ const Container = styled_components_1.default.div `
59
+ display: flex;
60
+ align-items: center;
61
+ padding-bottom: 16px;
62
+ `;
63
+ const OptionWrapper = styled_components_1.default.div `
64
+ padding-left: ${(props) => props.theme.grid.unit * 4}px;
65
+ padding-top: ${(props) => props.theme.grid.unit * 2}px;
66
+ padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
67
+
68
+ background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
69
+
70
+ &:hover {
71
+ background-color: ${(props) => props.theme.colors.background.fifth};
72
+ }
73
+ `;
74
+ const InsertTableDialog = ({ run, open, onClose }) => {
75
+ const [numberOfColumns, setNumColumns] = (0, react_1.useState)({ value: 4, label: `4` });
76
+ const [numberOfRows, setNumRows] = (0, react_1.useState)({ value: 4, label: `4` });
77
+ const [includeHeader, setIncludeHeader] = (0, react_1.useState)(true);
78
+ const handleColumnChange = (newValue) => {
79
+ setNumColumns(newValue);
80
+ };
81
+ const handleRowChange = (newValue) => {
82
+ setNumRows(newValue);
83
+ };
84
+ const options = Array.from({ length: 20 }, (_, index) => ({
85
+ value: index + 1,
86
+ label: `${index + 1}`,
87
+ }));
88
+ const OptionComponent = ({ innerProps, data, }) => {
89
+ return (react_1.default.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
90
+ };
91
+ const insertTableDialogActions = {
92
+ primary: {
93
+ action: () => {
94
+ const tableConfig = {
95
+ numberOfColumns: numberOfColumns.value,
96
+ numberOfRows: numberOfRows.value,
97
+ includeHeader,
98
+ };
99
+ run(tableConfig);
100
+ onClose();
101
+ },
102
+ title: 'Create table',
103
+ },
104
+ secondary: {
105
+ action: onClose,
106
+ title: 'Cancel',
107
+ },
108
+ };
109
+ return (react_1.default.createElement(Dialog_1.Dialog, { isOpen: open, actions: insertTableDialogActions, category: Dialog_1.Category.confirmation, header: 'Insert table', message: '' },
110
+ react_1.default.createElement(react_1.default.Fragment, null,
111
+ react_1.default.createElement(react_1.default.Fragment, null,
112
+ react_1.default.createElement(Container, null,
113
+ react_1.default.createElement(Label, null, "Number of columns:"),
114
+ react_1.default.createElement(SelectContainer, null,
115
+ react_1.default.createElement(react_select_1.default, { onChange: (newValue) => handleColumnChange(newValue), value: numberOfColumns, options: options, components: {
116
+ Option: OptionComponent,
117
+ }, menuPosition: "fixed", maxMenuHeight: 150 }))),
118
+ react_1.default.createElement(Container, null,
119
+ react_1.default.createElement(Label, null, "Number of rows:"),
120
+ react_1.default.createElement(SelectContainer, null,
121
+ react_1.default.createElement(react_select_1.default, { onChange: (newValue) => handleRowChange(newValue), value: numberOfRows, options: options, components: {
122
+ Option: OptionComponent,
123
+ }, menuPosition: "fixed", maxMenuHeight: 150 })))),
124
+ react_1.default.createElement(Checkbox_1.CheckboxLabel, null,
125
+ react_1.default.createElement(Checkbox_1.CheckboxField, { name: 'include-header', checked: includeHeader, onChange: (e) => {
126
+ setIncludeHeader(e.target.checked);
127
+ } }),
128
+ react_1.default.createElement("div", null, "Include header row")))));
129
+ };
130
+ exports.InsertTableDialog = InsertTableDialog;
@@ -45,6 +45,7 @@ exports.ColumnChangeWarningDialog = exports.Label = exports.Block = exports.Bloc
45
45
  const react_1 = __importStar(require("react"));
46
46
  const styled_components_1 = __importDefault(require("styled-components"));
47
47
  const Dialog_1 = require("../Dialog");
48
+ const InsertTableDialog_1 = require("../InsertTableDialog");
48
49
  const Submenu_1 = require("./Submenu");
49
50
  const MenusContainer = styled_components_1.default.div `
50
51
  display: flex;
@@ -69,6 +70,11 @@ const MenuContainer = styled_components_1.default.div `
69
70
  `;
70
71
  const Menus = ({ menus, innerRef, handleClick, }) => {
71
72
  const [columnMenu, setColumnMenu] = (0, react_1.useState)(undefined);
73
+ const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
74
+ const [indices, setIndices] = (0, react_1.useState)([]);
75
+ const toggleDialog = () => {
76
+ setOpenDialog(!openDialog);
77
+ };
72
78
  return (react_1.default.createElement(MenusContainer, { ref: innerRef },
73
79
  menus.map((menu, index) => {
74
80
  return (react_1.default.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
@@ -78,7 +84,17 @@ const Menus = ({ menus, innerRef, handleClick, }) => {
78
84
  }, isOpen: menu.isOpen },
79
85
  react_1.default.createElement(Submenu_1.Text, null, menu.label)),
80
86
  menu.isEnabled && menu.isOpen && menu.submenu && (react_1.default.createElement(Submenu_1.SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
81
- return (react_1.default.createElement(Submenu_1.Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), setColumnMenu: setColumnMenu }));
87
+ return (react_1.default.createElement(Submenu_1.Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => {
88
+ const indices = [index, sindex, ...i];
89
+ if ('id' in submenu &&
90
+ submenu.id === 'insert-table-element') {
91
+ setIndices(indices);
92
+ toggleDialog();
93
+ }
94
+ else {
95
+ handleClick(indices);
96
+ }
97
+ }, setColumnMenu: setColumnMenu }));
82
98
  })))));
83
99
  }),
84
100
  react_1.default.createElement(exports.ColumnChangeWarningDialog, { isOpen: !!columnMenu, primaryAction: () => {
@@ -86,7 +102,8 @@ const Menus = ({ menus, innerRef, handleClick, }) => {
86
102
  columnMenu.run();
87
103
  setColumnMenu(undefined);
88
104
  }
89
- }, secondaryAction: () => setColumnMenu(undefined) })));
105
+ }, secondaryAction: () => setColumnMenu(undefined) }),
106
+ openDialog && (react_1.default.createElement(InsertTableDialog_1.InsertTableDialog, { run: (tableConfig) => handleClick(indices, tableConfig), open: openDialog, onClose: toggleDialog }))));
90
107
  };
91
108
  exports.Menus = Menus;
92
109
  exports.orderedListContextMenu = [
@@ -53,13 +53,13 @@ const getMenuAt = (state, position) => {
53
53
  const useMenus = (menus) => {
54
54
  const [pointer, setPointer] = (0, react_1.useState)(initialPointer);
55
55
  const state = getMenuState(menus, pointer);
56
- const handleClick = (0, react_1.useCallback)((indices) => {
56
+ const handleClick = (0, react_1.useCallback)((indices, tableConfig) => {
57
57
  const menu = getMenuAt(state, indices);
58
58
  if (!menu || !menu.isEnabled) {
59
59
  return;
60
60
  }
61
61
  if (menu.run) {
62
- menu.run();
62
+ menu.run(tableConfig);
63
63
  setPointer([-1, -1, -1]);
64
64
  }
65
65
  else if (menu.submenu) {
package/dist/cjs/index.js CHANGED
@@ -40,6 +40,7 @@ __exportStar(require("./components/RadioButton"), exports);
40
40
  __exportStar(require("./components/AutoSaveInput"), exports);
41
41
  __exportStar(require("./components/Avatar"), exports);
42
42
  __exportStar(require("./components/Dialog"), exports);
43
+ __exportStar(require("./components/InsertTableDialog"), exports);
43
44
  __exportStar(require("./components/Checkbox"), exports);
44
45
  __exportStar(require("./components/Form"), exports);
45
46
  __exportStar(require("./components/FileManager"), exports);
@@ -47,7 +48,7 @@ __exportStar(require("./components/FileManager/util"), exports);
47
48
  __exportStar(require("./components/Resizer"), exports);
48
49
  __exportStar(require("./components/SaveStatus"), exports);
49
50
  __exportStar(require("./components/StyledModal"), exports);
50
- __exportStar(require("./components/TableFootnotesSelector"), exports);
51
+ __exportStar(require("./components/FootnotesSelector"), exports);
51
52
  __exportStar(require("./components/Sidebar"), exports);
52
53
  __exportStar(require("./components/RichText"), exports);
53
54
  __exportStar(require("./components/TextField"), exports);
@@ -48,7 +48,7 @@ const AddNewFootnote = styled(ButtonGroup) `
48
48
  }
49
49
  }
50
50
  `;
51
- export const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel }) => {
51
+ export const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
52
52
  let selectedNotesMap;
53
53
  if (inlineFootnote) {
54
54
  const rids = inlineFootnote.attrs.rids;
@@ -75,17 +75,17 @@ export const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert,
75
75
  };
76
76
  return (React.createElement(Container, null,
77
77
  React.createElement(NotesContainer, null,
78
- React.createElement(TableFootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
78
+ React.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
79
79
  React.createElement(Actions, null,
80
80
  React.createElement(AddNewFootnote, null,
81
81
  React.createElement(IconTextButton, { onClick: onAdd },
82
82
  React.createElement(AddNewIcon, null),
83
- "Add new")),
83
+ addNewLabel || 'Add new')),
84
84
  React.createElement(ButtonGroup, null,
85
85
  React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
86
86
  React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
87
87
  };
88
- const TableFootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
88
+ const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
89
89
  const selectedNotes = [];
90
90
  const remainingNotes = [];
91
91
  notes.forEach((note) => {
@@ -140,5 +140,5 @@ const NoteText = styled.div `
140
140
  color: ${(props) => props.theme.colors.text.primary};
141
141
  flex: 1;
142
142
  font-weight: ${(props) => props.theme.font.weight.normal};
143
- margin-top: ${(props) => props.theme.grid.unit}px;
143
+ margin-top: 2px;
144
144
  `;
@@ -0,0 +1,100 @@
1
+ /*!
2
+ * © 2024 Atypon Systems LLC
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+ import React, { useState } from 'react';
17
+ import Select from 'react-select';
18
+ import styled from 'styled-components';
19
+ import { CheckboxField, CheckboxLabel } from './Checkbox';
20
+ import { Category, Dialog } from './Dialog';
21
+ const Label = styled.div `
22
+ padding-right: 16px;
23
+ width: 150px;
24
+ `;
25
+ const SelectContainer = styled.div `
26
+ width: 182px;
27
+ height: 30px;
28
+ `;
29
+ const Container = styled.div `
30
+ display: flex;
31
+ align-items: center;
32
+ padding-bottom: 16px;
33
+ `;
34
+ const OptionWrapper = styled.div `
35
+ padding-left: ${(props) => props.theme.grid.unit * 4}px;
36
+ padding-top: ${(props) => props.theme.grid.unit * 2}px;
37
+ padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
38
+
39
+ background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
40
+
41
+ &:hover {
42
+ background-color: ${(props) => props.theme.colors.background.fifth};
43
+ }
44
+ `;
45
+ export const InsertTableDialog = ({ run, open, onClose }) => {
46
+ const [numberOfColumns, setNumColumns] = useState({ value: 4, label: `4` });
47
+ const [numberOfRows, setNumRows] = useState({ value: 4, label: `4` });
48
+ const [includeHeader, setIncludeHeader] = useState(true);
49
+ const handleColumnChange = (newValue) => {
50
+ setNumColumns(newValue);
51
+ };
52
+ const handleRowChange = (newValue) => {
53
+ setNumRows(newValue);
54
+ };
55
+ const options = Array.from({ length: 20 }, (_, index) => ({
56
+ value: index + 1,
57
+ label: `${index + 1}`,
58
+ }));
59
+ const OptionComponent = ({ innerProps, data, }) => {
60
+ return (React.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
61
+ };
62
+ const insertTableDialogActions = {
63
+ primary: {
64
+ action: () => {
65
+ const tableConfig = {
66
+ numberOfColumns: numberOfColumns.value,
67
+ numberOfRows: numberOfRows.value,
68
+ includeHeader,
69
+ };
70
+ run(tableConfig);
71
+ onClose();
72
+ },
73
+ title: 'Create table',
74
+ },
75
+ secondary: {
76
+ action: onClose,
77
+ title: 'Cancel',
78
+ },
79
+ };
80
+ return (React.createElement(Dialog, { isOpen: open, actions: insertTableDialogActions, category: Category.confirmation, header: 'Insert table', message: '' },
81
+ React.createElement(React.Fragment, null,
82
+ React.createElement(React.Fragment, null,
83
+ React.createElement(Container, null,
84
+ React.createElement(Label, null, "Number of columns:"),
85
+ React.createElement(SelectContainer, null,
86
+ React.createElement(Select, { onChange: (newValue) => handleColumnChange(newValue), value: numberOfColumns, options: options, components: {
87
+ Option: OptionComponent,
88
+ }, menuPosition: "fixed", maxMenuHeight: 150 }))),
89
+ React.createElement(Container, null,
90
+ React.createElement(Label, null, "Number of rows:"),
91
+ React.createElement(SelectContainer, null,
92
+ React.createElement(Select, { onChange: (newValue) => handleRowChange(newValue), value: numberOfRows, options: options, components: {
93
+ Option: OptionComponent,
94
+ }, menuPosition: "fixed", maxMenuHeight: 150 })))),
95
+ React.createElement(CheckboxLabel, null,
96
+ React.createElement(CheckboxField, { name: 'include-header', checked: includeHeader, onChange: (e) => {
97
+ setIncludeHeader(e.target.checked);
98
+ } }),
99
+ React.createElement("div", null, "Include header row")))));
100
+ };
@@ -16,6 +16,7 @@
16
16
  import React, { useState } from 'react';
17
17
  import styled from 'styled-components';
18
18
  import { Category, Dialog } from '../Dialog';
19
+ import { InsertTableDialog } from '../InsertTableDialog';
19
20
  import { Submenu, SubmenusContainer, Text } from './Submenu';
20
21
  const MenusContainer = styled.div `
21
22
  display: flex;
@@ -40,6 +41,11 @@ const MenuContainer = styled.div `
40
41
  `;
41
42
  export const Menus = ({ menus, innerRef, handleClick, }) => {
42
43
  const [columnMenu, setColumnMenu] = useState(undefined);
44
+ const [openDialog, setOpenDialog] = useState(false);
45
+ const [indices, setIndices] = useState([]);
46
+ const toggleDialog = () => {
47
+ setOpenDialog(!openDialog);
48
+ };
43
49
  return (React.createElement(MenusContainer, { ref: innerRef },
44
50
  menus.map((menu, index) => {
45
51
  return (React.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
@@ -49,7 +55,17 @@ export const Menus = ({ menus, innerRef, handleClick, }) => {
49
55
  }, isOpen: menu.isOpen },
50
56
  React.createElement(Text, null, menu.label)),
51
57
  menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
52
- return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), setColumnMenu: setColumnMenu }));
58
+ return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => {
59
+ const indices = [index, sindex, ...i];
60
+ if ('id' in submenu &&
61
+ submenu.id === 'insert-table-element') {
62
+ setIndices(indices);
63
+ toggleDialog();
64
+ }
65
+ else {
66
+ handleClick(indices);
67
+ }
68
+ }, setColumnMenu: setColumnMenu }));
53
69
  })))));
54
70
  }),
55
71
  React.createElement(ColumnChangeWarningDialog, { isOpen: !!columnMenu, primaryAction: () => {
@@ -57,7 +73,8 @@ export const Menus = ({ menus, innerRef, handleClick, }) => {
57
73
  columnMenu.run();
58
74
  setColumnMenu(undefined);
59
75
  }
60
- }, secondaryAction: () => setColumnMenu(undefined) })));
76
+ }, secondaryAction: () => setColumnMenu(undefined) }),
77
+ openDialog && (React.createElement(InsertTableDialog, { run: (tableConfig) => handleClick(indices, tableConfig), open: openDialog, onClose: toggleDialog }))));
61
78
  };
62
79
  export const orderedListContextMenu = [
63
80
  { items: ['1.', '2.', '3.'], type: 'order' },
@@ -50,13 +50,13 @@ const getMenuAt = (state, position) => {
50
50
  export const useMenus = (menus) => {
51
51
  const [pointer, setPointer] = useState(initialPointer);
52
52
  const state = getMenuState(menus, pointer);
53
- const handleClick = useCallback((indices) => {
53
+ const handleClick = useCallback((indices, tableConfig) => {
54
54
  const menu = getMenuAt(state, indices);
55
55
  if (!menu || !menu.isEnabled) {
56
56
  return;
57
57
  }
58
58
  if (menu.run) {
59
- menu.run();
59
+ menu.run(tableConfig);
60
60
  setPointer([-1, -1, -1]);
61
61
  }
62
62
  else if (menu.submenu) {
package/dist/es/index.js CHANGED
@@ -20,6 +20,7 @@ export * from './components/RadioButton';
20
20
  export * from './components/AutoSaveInput';
21
21
  export * from './components/Avatar';
22
22
  export * from './components/Dialog';
23
+ export * from './components/InsertTableDialog';
23
24
  export * from './components/Checkbox';
24
25
  export * from './components/Form';
25
26
  export * from './components/FileManager';
@@ -27,7 +28,7 @@ export * from './components/FileManager/util';
27
28
  export * from './components/Resizer';
28
29
  export * from './components/SaveStatus';
29
30
  export * from './components/StyledModal';
30
- export * from './components/TableFootnotesSelector';
31
+ export * from './components/FootnotesSelector';
31
32
  export * from './components/Sidebar';
32
33
  export * from './components/RichText';
33
34
  export * from './components/TextField';
@@ -19,10 +19,11 @@ export type FootnoteWithIndex = {
19
19
  node: FootnoteNode;
20
20
  index?: string;
21
21
  };
22
- export declare const TableFootnotesSelector: React.FC<{
22
+ export declare const FootnotesSelector: React.FC<{
23
23
  notes: FootnoteWithIndex[];
24
24
  inlineFootnote?: InlineFootnoteNode;
25
25
  onAdd: () => void;
26
26
  onInsert: (notes: FootnoteWithIndex[]) => void;
27
27
  onCancel: () => void;
28
+ addNewLabel?: string;
28
29
  }>;
@@ -0,0 +1,22 @@
1
+ /*!
2
+ * © 2024 Atypon Systems LLC
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+ import React from 'react';
17
+ import { TableConfig } from '../lib/menus';
18
+ export declare const InsertTableDialog: React.FC<{
19
+ run: (tableConfig: TableConfig) => void;
20
+ open: boolean;
21
+ onClose: () => void;
22
+ }>;
@@ -14,11 +14,11 @@
14
14
  * limitations under the License.
15
15
  */
16
16
  import React, { Ref } from 'react';
17
- import { Menu } from '../../lib/menus';
17
+ import { Menu, TableConfig } from '../../lib/menus';
18
18
  interface MenusProps {
19
19
  menus: Menu[];
20
20
  innerRef: Ref<HTMLDivElement>;
21
- handleClick: (position: number[]) => void;
21
+ handleClick: (position: number[], tableConfig?: TableConfig) => void;
22
22
  }
23
23
  export declare const Menus: React.FC<MenusProps>;
24
24
  export declare const orderedListContextMenu: {
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { Menu, MenuSpec } from '../lib/menus';
2
+ import { Menu, MenuSpec, TableConfig } from '../lib/menus';
3
3
  export declare const useMenus: (menus: MenuSpec[]) => {
4
4
  menus: Menu[];
5
- handleClick: (indices: number[]) => void;
5
+ handleClick: (indices: number[], tableConfig?: TableConfig) => void;
6
6
  ref: import("react").RefObject<HTMLDivElement>;
7
7
  };
@@ -21,6 +21,7 @@ export * from './components/RadioButton';
21
21
  export * from './components/AutoSaveInput';
22
22
  export * from './components/Avatar';
23
23
  export * from './components/Dialog';
24
+ export * from './components/InsertTableDialog';
24
25
  export * from './components/Checkbox';
25
26
  export * from './components/Form';
26
27
  export * from './components/FileManager';
@@ -28,7 +29,7 @@ export * from './components/FileManager/util';
28
29
  export * from './components/Resizer';
29
30
  export * from './components/SaveStatus';
30
31
  export * from './components/StyledModal';
31
- export * from './components/TableFootnotesSelector';
32
+ export * from './components/FootnotesSelector';
32
33
  export * from './components/Sidebar';
33
34
  export * from './components/RichText';
34
35
  export * from './components/TextField';
@@ -19,6 +19,11 @@ export interface MenuShortcut {
19
19
  mac: string;
20
20
  pc: string;
21
21
  }
22
+ export type TableConfig = {
23
+ numberOfColumns: number;
24
+ numberOfRows: number;
25
+ includeHeader: boolean;
26
+ };
22
27
  export interface MenuSpec {
23
28
  id: string;
24
29
  label: string;
@@ -26,7 +31,7 @@ export interface MenuSpec {
26
31
  shortcut?: MenuShortcut;
27
32
  isActive?: boolean;
28
33
  isEnabled: boolean;
29
- run?: () => void;
34
+ run?: (tableConfig?: TableConfig) => void;
30
35
  submenu?: (MenuSpec | MenuSeparator)[];
31
36
  options?: {
32
37
  [key: string]: () => void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.13.11",
4
+ "version": "1.13.12-LEAN-3645",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -109,4 +109,4 @@
109
109
  "@types/react": "^17.0.2",
110
110
  "jackspeak": "2.1.1"
111
111
  }
112
- }
112
+ }