@manuscripts/style-guide 2.0.27 → 2.0.28-LEAN-4077.0

package/dist/cjs/components/ContextMenu.js

@@ -37,6 +37,7 @@ const icons = {
     AddComment: icons_1.AddCommentIcon,
     Edit: icons_1.EditIcon,
     Scroll: icons_1.ScrollIcon,
+    Delete: icons_1.DeleteIcon,
 };
 const ContextMenu = ({ actions }) => (react_1.default.createElement(Button_1.IconButtonGroup, { size: 32 }, actions.map((action) => {
     const Icon = icons[action.icon];

package/dist/cjs/components/Dialog.js

@@ -83,6 +83,7 @@ var Category;
 (function (Category) {
     Category["error"] = "error";
     Category["confirmation"] = "confirmation";
+    Category["warning"] = "warning";
 })(Category = exports.Category || (exports.Category = {}));
 const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (react_1.default.createElement(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (react_1.default.createElement(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title))) : props.hasForm ? (react_1.default.createElement(Button_1.PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (react_1.default.createElement(Button_1.PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title));
 const SecondaryAction = (props) => (react_1.default.createElement(Button_1.SecondaryButton, { disabled: props.disabled, onClick: props.action }, props.title));
@@ -125,6 +126,8 @@ class Dialog extends react_1.default.Component {
                 react_1.default.createElement(HeaderContainer, null,
                     category === Category.error && (react_1.default.createElement(Icon, null,
                         react_1.default.createElement(icons_1.AttentionRedIcon, null))),
+                    category === Category.warning && (react_1.default.createElement(Icon, null,
+                        react_1.default.createElement(icons_1.AttentionOrangeIcon, null))),
                     header),
                 react_1.default.createElement(exports.MessageContainer, null,
                     message,

package/dist/cjs/components/MultiValueInput.js

@@ -0,0 +1,139 @@
+"use strict";
+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.MultiValueInput = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const TextField_1 = require("./TextField");
+const Container = styled_components_1.default.div `
+  ${TextField_1.commonStyles}
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  padding: 0;
+  background: hotpink
+
+
+  &:hover Input {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+  &:has(Input:focus) {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+    border-color: ${(props) => props.theme.colors.border.field.hover};
+  }
+`;
+const Chip = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  background-color: #f2f2f2;
+  color: ${(props) => props.theme.colors.text.primary};
+  border-radius: 12px;
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  padding: ${(props) => props.theme.grid.unit}px;
+  font-size: ${(props) => props.theme.font.size.small};
+  line-height: ${(props) => props.theme.font.lineHeight.normal};
+
+  & + Input {
+    padding-left: 0;
+  }
+`;
+const RemoveButton = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  color: white;
+  background: #6e6e6e;
+  margin-left: 4px;
+  border: none;
+  border-radius: 100%;
+  cursor: pointer;
+  font-size: 10px;
+
+  &:hover {
+    background: black;
+  }
+`;
+const Input = styled_components_1.default.input `
+  ${TextField_1.commonStyles}
+
+  border: none;
+  flex: 1;
+  min-width: 6em;
+  padding: 10px 16px;
+
+  appearance: none;
+  -moz-appearance: textfield;
+  -webkit-appearance: none;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::-moz-appearance: textfield;
+`;
+const MultiValueInput = ({ inputType, initialValues = [], onChange, }) => {
+    const [values, setValues] = (0, react_1.useState)(initialValues);
+    const [currentValue, setCurrentValue] = (0, react_1.useState)('');
+    const handleAddValue = (e) => {
+        if (e.key === 'Enter' && currentValue.trim()) {
+            e.preventDefault();
+            if (!values.includes(currentValue.trim())) {
+                const updatedValues = [...values, currentValue.trim()];
+                setValues(updatedValues);
+                onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
+            }
+            setCurrentValue('');
+        }
+    };
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        if (inputType === 'number' && /^\d*$/.test(value)) {
+            setCurrentValue(value);
+        }
+        else if (inputType === 'text') {
+            setCurrentValue(value);
+        }
+    };
+    const handleRemoveValue = (index) => {
+        const updatedValues = values.filter((_, i) => i !== index);
+        setValues(updatedValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
+    };
+    return (react_1.default.createElement(Container, null,
+        values.map((value, index) => (react_1.default.createElement(Chip, { key: index },
+            value,
+            react_1.default.createElement(RemoveButton, { onClick: () => handleRemoveValue(index) }, "\u00D7")))),
+        react_1.default.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleAddValue, placeholder: inputType === 'number' ? 'Enter number' : 'Enter text' })));
+};
+exports.MultiValueInput = MultiValueInput;

package/dist/cjs/components/TextField.js

@@ -41,10 +41,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextFieldWrapper = exports.TextFieldLabel = exports.TextFieldGroup = exports.TextArea = exports.TextField = void 0;
+exports.TextFieldWrapper = exports.TextFieldLabel = exports.TextFieldGroup = exports.TextArea = exports.TextField = exports.commonStyles = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const commonStyles = (0, styled_components_1.css) `
+exports.commonStyles = (0, styled_components_1.css) `
   border: 1px solid
     ${(props) => props.error
     ? props.theme.colors.border.error
@@ -75,10 +75,10 @@ const commonStyles = (0, styled_components_1.css) `
 `;
 exports.TextField = styled_components_1.default.input `
   display: block;
-  ${commonStyles}
+  ${exports.commonStyles}
 `;
 exports.TextArea = styled_components_1.default.textarea `
-  ${commonStyles}
+  ${exports.commonStyles}
   max-width: 100%;
 `;
 exports.TextFieldGroup = styled_components_1.default.div `

package/dist/cjs/index.js

@@ -42,6 +42,7 @@ __exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Dialog"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/Form"), exports);
+__exportStar(require("./components/MultiValueInput"), exports);
 __exportStar(require("./components/Resizer"), exports);
 __exportStar(require("./components/SaveStatus"), exports);
 __exportStar(require("./components/StyledModal"), exports);

package/dist/es/components/ContextMenu.js

@@ -16,7 +16,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { IconButton, IconButtonGroup } from './Button';
-import { AddCommentIcon, EditIcon, ScrollIcon } from './icons';
+import { AddCommentIcon, DeleteIcon, EditIcon, ScrollIcon } from './icons';
 import { Tooltip } from './Tooltip';
 const ContextMenuIconButton = styled(IconButton) `
   color: #6e6e6e;
@@ -31,6 +31,7 @@ const icons = {
     AddComment: AddCommentIcon,
     Edit: EditIcon,
     Scroll: ScrollIcon,
+    Delete: DeleteIcon,
 };
 export const ContextMenu = ({ actions }) => (React.createElement(IconButtonGroup, { size: 32 }, actions.map((action) => {
     const Icon = icons[action.icon];

package/dist/es/components/Dialog.js

@@ -25,7 +25,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, PrimaryButton, SecondaryButton } from './Button';
-import { AttentionRedIcon } from './icons';
+import { AttentionOrangeIcon, AttentionRedIcon } from './icons';
 import { StyledModal } from './StyledModal';
 import { TextField } from './TextField';
 const Icon = styled.div `
@@ -77,6 +77,7 @@ export var Category;
 (function (Category) {
     Category["error"] = "error";
     Category["confirmation"] = "confirmation";
+    Category["warning"] = "warning";
 })(Category || (Category = {}));
 const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (React.createElement(PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (React.createElement(PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title))) : props.hasForm ? (React.createElement(PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (React.createElement(PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title));
 const SecondaryAction = (props) => (React.createElement(SecondaryButton, { disabled: props.disabled, onClick: props.action }, props.title));
@@ -119,6 +120,8 @@ export class Dialog extends React.Component {
                 React.createElement(HeaderContainer, null,
                     category === Category.error && (React.createElement(Icon, null,
                         React.createElement(AttentionRedIcon, null))),
+                    category === Category.warning && (React.createElement(Icon, null,
+                        React.createElement(AttentionOrangeIcon, null))),
                     header),
                 React.createElement(MessageContainer, null,
                     message,

package/dist/es/components/MultiValueInput.js

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { commonStyles } from './TextField';
+const Container = styled.div `
+  ${commonStyles}
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  padding: 0;
+  background: hotpink
+
+
+  &:hover Input {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+  &:has(Input:focus) {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+    border-color: ${(props) => props.theme.colors.border.field.hover};
+  }
+`;
+const Chip = styled.span `
+  display: flex;
+  align-items: center;
+  background-color: #f2f2f2;
+  color: ${(props) => props.theme.colors.text.primary};
+  border-radius: 12px;
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  padding: ${(props) => props.theme.grid.unit}px;
+  font-size: ${(props) => props.theme.font.size.small};
+  line-height: ${(props) => props.theme.font.lineHeight.normal};
+
+  & + Input {
+    padding-left: 0;
+  }
+`;
+const RemoveButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  color: white;
+  background: #6e6e6e;
+  margin-left: 4px;
+  border: none;
+  border-radius: 100%;
+  cursor: pointer;
+  font-size: 10px;
+
+  &:hover {
+    background: black;
+  }
+`;
+const Input = styled.input `
+  ${commonStyles}
+
+  border: none;
+  flex: 1;
+  min-width: 6em;
+  padding: 10px 16px;
+
+  appearance: none;
+  -moz-appearance: textfield;
+  -webkit-appearance: none;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::-moz-appearance: textfield;
+`;
+export const MultiValueInput = ({ inputType, initialValues = [], onChange, }) => {
+    const [values, setValues] = useState(initialValues);
+    const [currentValue, setCurrentValue] = useState('');
+    const handleAddValue = (e) => {
+        if (e.key === 'Enter' && currentValue.trim()) {
+            e.preventDefault();
+            if (!values.includes(currentValue.trim())) {
+                const updatedValues = [...values, currentValue.trim()];
+                setValues(updatedValues);
+                onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
+            }
+            setCurrentValue('');
+        }
+    };
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        if (inputType === 'number' && /^\d*$/.test(value)) {
+            setCurrentValue(value);
+        }
+        else if (inputType === 'text') {
+            setCurrentValue(value);
+        }
+    };
+    const handleRemoveValue = (index) => {
+        const updatedValues = values.filter((_, i) => i !== index);
+        setValues(updatedValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
+    };
+    return (React.createElement(Container, null,
+        values.map((value, index) => (React.createElement(Chip, { key: index },
+            value,
+            React.createElement(RemoveButton, { onClick: () => handleRemoveValue(index) }, "\u00D7")))),
+        React.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleAddValue, placeholder: inputType === 'number' ? 'Enter number' : 'Enter text' })));
+};

package/dist/es/components/TextField.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import styled, { css } from 'styled-components';
-const commonStyles = css `
+export const commonStyles = css `
   border: 1px solid
     ${(props) => props.error
     ? props.theme.colors.border.error

package/dist/es/index.js

@@ -22,6 +22,7 @@ export * from './components/Avatar';
 export * from './components/Dialog';
 export * from './components/Checkbox';
 export * from './components/Form';
+export * from './components/MultiValueInput';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/StyledModal';

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

@@ -42,7 +42,8 @@ interface DialogProps {
 }
 export declare enum Category {
     error = "error",
-    confirmation = "confirmation"
+    confirmation = "confirmation",
+    warning = "warning"
 }
 export declare class Dialog extends React.Component<DialogProps, DialogState> {
     state: DialogState;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MultiValueInputProps {
+    inputType: 'text' | 'number';
+    initialValues?: string[];
+    onChange?: (values: string[]) => void;
+}
+export declare const MultiValueInput: React.FC<MultiValueInputProps>;

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

@@ -15,6 +15,7 @@
  */
 import React from 'react';
 import { ErrorProps } from './Form';
+export declare const commonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ErrorProps, import("styled-components").DefaultTheme>>;
 export declare const TextField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, ErrorProps, never>;
 export declare const TextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, ErrorProps, never>;
 export declare const TextFieldGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/index.d.ts

@@ -23,6 +23,7 @@ export * from './components/Avatar';
 export * from './components/Dialog';
 export * from './components/Checkbox';
 export * from './components/Form';
+export * from './components/MultiValueInput';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/StyledModal';

package/package.json

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