@manuscripts/style-guide 2.0.29-LEAN-4077.3 → 2.0.29-LEAN-4077.6

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 (4) hide show
  1. package/dist/cjs/components/MultiValueInput.js +24 -11
  2. package/dist/es/components/MultiValueInput.js +24 -11
  3. package/dist/types/components/MultiValueInput.d.ts +1 -0
  4. package/package.json +1 -1
package/dist/cjs/components/MultiValueInput.js CHANGED
@@ -102,19 +102,16 @@ const Input = styled_components_1.default.input `
102
102
 
103
103
  &::-moz-appearance: textfield;
104
104
  `;
105
- const MultiValueInput = ({ inputType, initialValues = [], onChange, }) => {
105
+ const MultiValueInput = ({ inputType, placeholder = '', initialValues = [], onChange, }) => {
106
106
  const [values, setValues] = (0, react_1.useState)(initialValues);
107
107
  const [currentValue, setCurrentValue] = (0, react_1.useState)('');
108
- const handleAddValue = (e) => {
109
- if (e.key === 'Enter' && currentValue.trim()) {
110
- e.preventDefault();
111
- if (!values.includes(currentValue.trim())) {
112
- const updatedValues = [...values, currentValue.trim()];
113
- setValues(updatedValues);
114
- onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
115
- }
116
- setCurrentValue('');
108
+ const handleAddValue = (value) => {
109
+ if (value.trim() && !values.includes(value.trim())) {
110
+ const updatedValues = [...values, value.trim()];
111
+ setValues(updatedValues);
112
+ onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
117
113
  }
114
+ setCurrentValue('');
118
115
  };
119
116
  const handleInputChange = (e) => {
120
117
  const value = e.target.value;
@@ -125,15 +122,31 @@ const MultiValueInput = ({ inputType, initialValues = [], onChange, }) => {
125
122
  setCurrentValue(value);
126
123
  }
127
124
  };
125
+ const handleBlur = () => {
126
+ if (currentValue) {
127
+ handleAddValue(currentValue);
128
+ }
129
+ };
130
+ const handleKeyDown = (e) => {
131
+ if (e.key === 'Enter') {
132
+ e.preventDefault();
133
+ handleAddValue(currentValue);
134
+ }
135
+ };
128
136
  const handleRemoveValue = (index) => {
129
137
  const updatedValues = values.filter((_, i) => i !== index);
130
138
  setValues(updatedValues);
131
139
  onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
132
140
  };
141
+ const xplaceholder = placeholder
142
+ ? placeholder
143
+ : inputType === 'number'
144
+ ? 'Enter number and press enter'
145
+ : 'Enter text and press enter';
133
146
  return (react_1.default.createElement(Container, null,
134
147
  values.map((value, index) => (react_1.default.createElement(Chip, { key: index },
135
148
  value,
136
149
  react_1.default.createElement(RemoveButton, { onMouseUp: () => handleRemoveValue(index) }, "\u00D7")))),
137
- react_1.default.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleAddValue, placeholder: inputType === 'number' ? 'Enter number' : 'Enter text' })));
150
+ react_1.default.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })));
138
151
  };
139
152
  exports.MultiValueInput = MultiValueInput;
package/dist/es/components/MultiValueInput.js CHANGED
@@ -73,19 +73,16 @@ const Input = styled.input `
73
73
 
74
74
  &::-moz-appearance: textfield;
75
75
  `;
76
- export const MultiValueInput = ({ inputType, initialValues = [], onChange, }) => {
76
+ export const MultiValueInput = ({ inputType, placeholder = '', initialValues = [], onChange, }) => {
77
77
  const [values, setValues] = useState(initialValues);
78
78
  const [currentValue, setCurrentValue] = useState('');
79
- const handleAddValue = (e) => {
80
- if (e.key === 'Enter' && currentValue.trim()) {
81
- e.preventDefault();
82
- if (!values.includes(currentValue.trim())) {
83
- const updatedValues = [...values, currentValue.trim()];
84
- setValues(updatedValues);
85
- onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
86
- }
87
- setCurrentValue('');
79
+ const handleAddValue = (value) => {
80
+ if (value.trim() && !values.includes(value.trim())) {
81
+ const updatedValues = [...values, value.trim()];
82
+ setValues(updatedValues);
83
+ onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
88
84
  }
85
+ setCurrentValue('');
89
86
  };
90
87
  const handleInputChange = (e) => {
91
88
  const value = e.target.value;
@@ -96,14 +93,30 @@ export const MultiValueInput = ({ inputType, initialValues = [], onChange, }) =>
96
93
  setCurrentValue(value);
97
94
  }
98
95
  };
96
+ const handleBlur = () => {
97
+ if (currentValue) {
98
+ handleAddValue(currentValue);
99
+ }
100
+ };
101
+ const handleKeyDown = (e) => {
102
+ if (e.key === 'Enter') {
103
+ e.preventDefault();
104
+ handleAddValue(currentValue);
105
+ }
106
+ };
99
107
  const handleRemoveValue = (index) => {
100
108
  const updatedValues = values.filter((_, i) => i !== index);
101
109
  setValues(updatedValues);
102
110
  onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
103
111
  };
112
+ const xplaceholder = placeholder
113
+ ? placeholder
114
+ : inputType === 'number'
115
+ ? 'Enter number and press enter'
116
+ : 'Enter text and press enter';
104
117
  return (React.createElement(Container, null,
105
118
  values.map((value, index) => (React.createElement(Chip, { key: index },
106
119
  value,
107
120
  React.createElement(RemoveButton, { onMouseUp: () => handleRemoveValue(index) }, "\u00D7")))),
108
- React.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleAddValue, placeholder: inputType === 'number' ? 'Enter number' : 'Enter text' })));
121
+ React.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })));
109
122
  };
package/dist/types/components/MultiValueInput.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  export interface MultiValueInputProps {
3
3
  inputType: 'text' | 'number';
4
+ placeholder: string;
4
5
  initialValues?: string[];
5
6
  onChange?: (values: string[]) => void;
6
7
  }
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": "2.0.29-LEAN-4077.3",
4
+ "version": "2.0.29-LEAN-4077.6",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",