@manuscripts/style-guide 1.13.11 → 1.13.12

package/dist/cjs/components/InsertTableDialog.js

@@ -0,0 +1,130 @@
+"use strict";
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsertTableDialog = void 0;
+const react_1 = __importStar(require("react"));
+const react_select_1 = __importDefault(require("react-select"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Checkbox_1 = require("./Checkbox");
+const Dialog_1 = require("./Dialog");
+const Label = styled_components_1.default.div `
+  padding-right: 16px;
+  width: 150px;
+`;
+const SelectContainer = styled_components_1.default.div `
+  width: 182px;
+  height: 30px;
+`;
+const Container = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+`;
+const OptionWrapper = styled_components_1.default.div `
+  padding-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 2}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
+
+  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+const InsertTableDialog = ({ run, open, onClose }) => {
+    const [numberOfColumns, setNumColumns] = (0, react_1.useState)({ value: 4, label: `4` });
+    const [numberOfRows, setNumRows] = (0, react_1.useState)({ value: 4, label: `4` });
+    const [includeHeader, setIncludeHeader] = (0, react_1.useState)(true);
+    const handleColumnChange = (newValue) => {
+        setNumColumns(newValue);
+    };
+    const handleRowChange = (newValue) => {
+        setNumRows(newValue);
+    };
+    const options = Array.from({ length: 20 }, (_, index) => ({
+        value: index + 1,
+        label: `${index + 1}`,
+    }));
+    const OptionComponent = ({ innerProps, data, }) => {
+        return (react_1.default.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
+    };
+    const insertTableDialogActions = {
+        primary: {
+            action: () => {
+                const tableConfig = {
+                    numberOfColumns: numberOfColumns.value,
+                    numberOfRows: numberOfRows.value,
+                    includeHeader,
+                };
+                run(tableConfig);
+                onClose();
+            },
+            title: 'Create table',
+        },
+        secondary: {
+            action: onClose,
+            title: 'Cancel',
+        },
+    };
+    return (react_1.default.createElement(Dialog_1.Dialog, { isOpen: open, actions: insertTableDialogActions, category: Dialog_1.Category.confirmation, header: 'Insert table', message: '' },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Container, null,
+                    react_1.default.createElement(Label, null, "Number of columns:"),
+                    react_1.default.createElement(SelectContainer, null,
+                        react_1.default.createElement(react_select_1.default, { onChange: (newValue) => handleColumnChange(newValue), value: numberOfColumns, options: options, components: {
+                                Option: OptionComponent,
+                            }, menuPosition: "fixed", maxMenuHeight: 150 }))),
+                react_1.default.createElement(Container, null,
+                    react_1.default.createElement(Label, null, "Number of rows:"),
+                    react_1.default.createElement(SelectContainer, null,
+                        react_1.default.createElement(react_select_1.default, { onChange: (newValue) => handleRowChange(newValue), value: numberOfRows, options: options, components: {
+                                Option: OptionComponent,
+                            }, menuPosition: "fixed", maxMenuHeight: 150 })))),
+            react_1.default.createElement(Checkbox_1.CheckboxLabel, null,
+                react_1.default.createElement(Checkbox_1.CheckboxField, { name: 'include-header', checked: includeHeader, onChange: (e) => {
+                        setIncludeHeader(e.target.checked);
+                    } }),
+                react_1.default.createElement("div", null, "Include header row")))));
+};
+exports.InsertTableDialog = InsertTableDialog;

package/dist/cjs/components/Menus/Menus.js

@@ -45,6 +45,7 @@ exports.ColumnChangeWarningDialog = exports.Label = exports.Block = exports.Bloc
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Dialog_1 = require("../Dialog");
+const InsertTableDialog_1 = require("../InsertTableDialog");
 const Submenu_1 = require("./Submenu");
 const MenusContainer = styled_components_1.default.div `
   display: flex;
@@ -69,6 +70,11 @@ const MenuContainer = styled_components_1.default.div `
 `;
 const Menus = ({ menus, innerRef, handleClick, }) => {
     const [columnMenu, setColumnMenu] = (0, react_1.useState)(undefined);
+    const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
+    const [indices, setIndices] = (0, react_1.useState)([]);
+    const toggleDialog = () => {
+        setOpenDialog(!openDialog);
+    };
     return (react_1.default.createElement(MenusContainer, { ref: innerRef },
         menus.map((menu, index) => {
             return (react_1.default.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
@@ -78,7 +84,17 @@ const Menus = ({ menus, innerRef, handleClick, }) => {
                     }, isOpen: menu.isOpen },
                     react_1.default.createElement(Submenu_1.Text, null, menu.label)),
                 menu.isEnabled && menu.isOpen && menu.submenu && (react_1.default.createElement(Submenu_1.SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
-                    return (react_1.default.createElement(Submenu_1.Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), setColumnMenu: setColumnMenu }));
+                    return (react_1.default.createElement(Submenu_1.Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => {
+                            const indices = [index, sindex, ...i];
+                            if ('id' in submenu &&
+                                submenu.id === 'insert-table-element') {
+                                setIndices(indices);
+                                toggleDialog();
+                            }
+                            else {
+                                handleClick(indices);
+                            }
+                        }, setColumnMenu: setColumnMenu }));
                 })))));
         }),
         react_1.default.createElement(exports.ColumnChangeWarningDialog, { isOpen: !!columnMenu, primaryAction: () => {
@@ -86,7 +102,8 @@ const Menus = ({ menus, innerRef, handleClick, }) => {
                     columnMenu.run();
                     setColumnMenu(undefined);
                 }
-            }, secondaryAction: () => setColumnMenu(undefined) })));
+            }, secondaryAction: () => setColumnMenu(undefined) }),
+        openDialog && (react_1.default.createElement(InsertTableDialog_1.InsertTableDialog, { run: (tableConfig) => handleClick(indices, tableConfig), open: openDialog, onClose: toggleDialog }))));
 };
 exports.Menus = Menus;
 exports.orderedListContextMenu = [

package/dist/cjs/hooks/use-menus.js

@@ -53,13 +53,13 @@ const getMenuAt = (state, position) => {
 const useMenus = (menus) => {
     const [pointer, setPointer] = (0, react_1.useState)(initialPointer);
     const state = getMenuState(menus, pointer);
-    const handleClick = (0, react_1.useCallback)((indices) => {
+    const handleClick = (0, react_1.useCallback)((indices, tableConfig) => {
         const menu = getMenuAt(state, indices);
         if (!menu || !menu.isEnabled) {
             return;
         }
         if (menu.run) {
-            menu.run();
+            menu.run(tableConfig);
             setPointer([-1, -1, -1]);
         }
         else if (menu.submenu) {

package/dist/cjs/index.js

@@ -40,6 +40,7 @@ __exportStar(require("./components/RadioButton"), exports);
 __exportStar(require("./components/AutoSaveInput"), exports);
 __exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Dialog"), exports);
+__exportStar(require("./components/InsertTableDialog"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/FileManager"), exports);

package/dist/es/components/InsertTableDialog.js

@@ -0,0 +1,100 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useState } from 'react';
+import Select from 'react-select';
+import styled from 'styled-components';
+import { CheckboxField, CheckboxLabel } from './Checkbox';
+import { Category, Dialog } from './Dialog';
+const Label = styled.div `
+  padding-right: 16px;
+  width: 150px;
+`;
+const SelectContainer = styled.div `
+  width: 182px;
+  height: 30px;
+`;
+const Container = styled.div `
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+`;
+const OptionWrapper = styled.div `
+  padding-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 2}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
+
+  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+export const InsertTableDialog = ({ run, open, onClose }) => {
+    const [numberOfColumns, setNumColumns] = useState({ value: 4, label: `4` });
+    const [numberOfRows, setNumRows] = useState({ value: 4, label: `4` });
+    const [includeHeader, setIncludeHeader] = useState(true);
+    const handleColumnChange = (newValue) => {
+        setNumColumns(newValue);
+    };
+    const handleRowChange = (newValue) => {
+        setNumRows(newValue);
+    };
+    const options = Array.from({ length: 20 }, (_, index) => ({
+        value: index + 1,
+        label: `${index + 1}`,
+    }));
+    const OptionComponent = ({ innerProps, data, }) => {
+        return (React.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
+    };
+    const insertTableDialogActions = {
+        primary: {
+            action: () => {
+                const tableConfig = {
+                    numberOfColumns: numberOfColumns.value,
+                    numberOfRows: numberOfRows.value,
+                    includeHeader,
+                };
+                run(tableConfig);
+                onClose();
+            },
+            title: 'Create table',
+        },
+        secondary: {
+            action: onClose,
+            title: 'Cancel',
+        },
+    };
+    return (React.createElement(Dialog, { isOpen: open, actions: insertTableDialogActions, category: Category.confirmation, header: 'Insert table', message: '' },
+        React.createElement(React.Fragment, null,
+            React.createElement(React.Fragment, null,
+                React.createElement(Container, null,
+                    React.createElement(Label, null, "Number of columns:"),
+                    React.createElement(SelectContainer, null,
+                        React.createElement(Select, { onChange: (newValue) => handleColumnChange(newValue), value: numberOfColumns, options: options, components: {
+                                Option: OptionComponent,
+                            }, menuPosition: "fixed", maxMenuHeight: 150 }))),
+                React.createElement(Container, null,
+                    React.createElement(Label, null, "Number of rows:"),
+                    React.createElement(SelectContainer, null,
+                        React.createElement(Select, { onChange: (newValue) => handleRowChange(newValue), value: numberOfRows, options: options, components: {
+                                Option: OptionComponent,
+                            }, menuPosition: "fixed", maxMenuHeight: 150 })))),
+            React.createElement(CheckboxLabel, null,
+                React.createElement(CheckboxField, { name: 'include-header', checked: includeHeader, onChange: (e) => {
+                        setIncludeHeader(e.target.checked);
+                    } }),
+                React.createElement("div", null, "Include header row")))));
+};

package/dist/es/components/Menus/Menus.js

@@ -16,6 +16,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Category, Dialog } from '../Dialog';
+import { InsertTableDialog } from '../InsertTableDialog';
 import { Submenu, SubmenusContainer, Text } from './Submenu';
 const MenusContainer = styled.div `
   display: flex;
@@ -40,6 +41,11 @@ const MenuContainer = styled.div `
 `;
 export const Menus = ({ menus, innerRef, handleClick, }) => {
     const [columnMenu, setColumnMenu] = useState(undefined);
+    const [openDialog, setOpenDialog] = useState(false);
+    const [indices, setIndices] = useState([]);
+    const toggleDialog = () => {
+        setOpenDialog(!openDialog);
+    };
     return (React.createElement(MenusContainer, { ref: innerRef },
         menus.map((menu, index) => {
             return (React.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
@@ -49,7 +55,17 @@ export const Menus = ({ menus, innerRef, handleClick, }) => {
                     }, isOpen: menu.isOpen },
                     React.createElement(Text, null, menu.label)),
                 menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
-                    return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), setColumnMenu: setColumnMenu }));
+                    return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => {
+                            const indices = [index, sindex, ...i];
+                            if ('id' in submenu &&
+                                submenu.id === 'insert-table-element') {
+                                setIndices(indices);
+                                toggleDialog();
+                            }
+                            else {
+                                handleClick(indices);
+                            }
+                        }, setColumnMenu: setColumnMenu }));
                 })))));
         }),
         React.createElement(ColumnChangeWarningDialog, { isOpen: !!columnMenu, primaryAction: () => {
@@ -57,7 +73,8 @@ export const Menus = ({ menus, innerRef, handleClick, }) => {
                     columnMenu.run();
                     setColumnMenu(undefined);
                 }
-            }, secondaryAction: () => setColumnMenu(undefined) })));
+            }, secondaryAction: () => setColumnMenu(undefined) }),
+        openDialog && (React.createElement(InsertTableDialog, { run: (tableConfig) => handleClick(indices, tableConfig), open: openDialog, onClose: toggleDialog }))));
 };
 export const orderedListContextMenu = [
     { items: ['1.', '2.', '3.'], type: 'order' },

package/dist/es/hooks/use-menus.js

@@ -50,13 +50,13 @@ const getMenuAt = (state, position) => {
 export const useMenus = (menus) => {
     const [pointer, setPointer] = useState(initialPointer);
     const state = getMenuState(menus, pointer);
-    const handleClick = useCallback((indices) => {
+    const handleClick = useCallback((indices, tableConfig) => {
         const menu = getMenuAt(state, indices);
         if (!menu || !menu.isEnabled) {
             return;
         }
         if (menu.run) {
-            menu.run();
+            menu.run(tableConfig);
             setPointer([-1, -1, -1]);
         }
         else if (menu.submenu) {

package/dist/es/index.js

@@ -20,6 +20,7 @@ export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
 export * from './components/Dialog';
+export * from './components/InsertTableDialog';
 export * from './components/Checkbox';
 export * from './components/Form';
 export * from './components/FileManager';

package/dist/types/components/InsertTableDialog.d.ts

@@ -0,0 +1,22 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { TableConfig } from '../lib/menus';
+export declare const InsertTableDialog: React.FC<{
+    run: (tableConfig: TableConfig) => void;
+    open: boolean;
+    onClose: () => void;
+}>;

package/dist/types/components/Menus/Menus.d.ts

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 import React, { Ref } from 'react';
-import { Menu } from '../../lib/menus';
+import { Menu, TableConfig } from '../../lib/menus';
 interface MenusProps {
     menus: Menu[];
     innerRef: Ref<HTMLDivElement>;
-    handleClick: (position: number[]) => void;
+    handleClick: (position: number[], tableConfig?: TableConfig) => void;
 }
 export declare const Menus: React.FC<MenusProps>;
 export declare const orderedListContextMenu: {

package/dist/types/hooks/use-menus.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Menu, MenuSpec } from '../lib/menus';
+import { Menu, MenuSpec, TableConfig } from '../lib/menus';
 export declare const useMenus: (menus: MenuSpec[]) => {
     menus: Menu[];
-    handleClick: (indices: number[]) => void;
+    handleClick: (indices: number[], tableConfig?: TableConfig) => void;
     ref: import("react").RefObject<HTMLDivElement>;
 };

package/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
 export * from './components/Dialog';
+export * from './components/InsertTableDialog';
 export * from './components/Checkbox';
 export * from './components/Form';
 export * from './components/FileManager';

package/dist/types/lib/menus.d.ts

@@ -19,6 +19,11 @@ export interface MenuShortcut {
     mac: string;
     pc: string;
 }
+export type TableConfig = {
+    numberOfColumns: number;
+    numberOfRows: number;
+    includeHeader: boolean;
+};
 export interface MenuSpec {
     id: string;
     label: string;
@@ -26,7 +31,7 @@ export interface MenuSpec {
     shortcut?: MenuShortcut;
     isActive?: boolean;
     isEnabled: boolean;
-    run?: () => void;
+    run?: (tableConfig?: TableConfig) => void;
     submenu?: (MenuSpec | MenuSeparator)[];
     options?: {
         [key: string]: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.13.11",
+  "version": "1.13.12",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",