@manuscripts/style-guide 3.6.0 → 3.6.2

package/dist/cjs/components/MultiValueInput.js

@@ -84,9 +84,13 @@ const Input = styled_components_1.default.input `
 
   &::-moz-appearance: textfield;
 `;
-const MultiValueInput = ({ id, inputType, placeholder = '', initialValues = [], onChange, }) => {
-    const [values, setValues] = (0, react_1.useState)(initialValues);
+const MultiValueInput = ({ id, inputType, placeholder = '', initialValues, onChange, }) => {
+    const [values, setValues] = (0, react_1.useState)(initialValues ?? []);
     const [currentValue, setCurrentValue] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        setValues(initialValues ?? []);
+        setCurrentValue('');
+    }, [initialValues]);
     const handleAddValue = (value) => {
         if (value.trim() && !values.includes(value.trim())) {
             const updatedValues = [...values, value.trim()];

package/dist/cjs/components/SelectField.js

@@ -34,7 +34,7 @@ const selectStyles = (theme, error, variant, listMaxHeight) => ({
                     : theme.colors.text.greyMuted || theme.colors.text.secondary,
             backgroundColor: !state.isDisabled ? '#F2FBFC' : 'transparent',
         },
-        padding: state.isFocused ? '0 7px' : '0 8px',
+        padding: state.isFocused ? '0 1px 0 7px' : '0 2px 0 8px',
         backgroundColor: state.isDisabled
             ? '#F5F5F5'
             : state.isFocused
@@ -46,7 +46,7 @@ const selectStyles = (theme, error, variant, listMaxHeight) => ({
     }),
     valueContainer: (base) => ({
         ...base,
-        padding: '0 8px',
+        padding: '0 2px 0 8px',
     }),
     singleValue: (base, state) => ({
         ...base,

package/dist/es/components/MultiValueInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { commonStyles } from './TextField';
 const Container = styled.div `
@@ -78,9 +78,13 @@ const Input = styled.input `
 
   &::-moz-appearance: textfield;
 `;
-export const MultiValueInput = ({ id, inputType, placeholder = '', initialValues = [], onChange, }) => {
-    const [values, setValues] = useState(initialValues);
+export const MultiValueInput = ({ id, inputType, placeholder = '', initialValues, onChange, }) => {
+    const [values, setValues] = useState(initialValues ?? []);
     const [currentValue, setCurrentValue] = useState('');
+    useEffect(() => {
+        setValues(initialValues ?? []);
+        setCurrentValue('');
+    }, [initialValues]);
     const handleAddValue = (value) => {
         if (value.trim() && !values.includes(value.trim())) {
             const updatedValues = [...values, value.trim()];

package/dist/es/components/SelectField.js

@@ -28,7 +28,7 @@ const selectStyles = (theme, error, variant, listMaxHeight) => ({
                     : theme.colors.text.greyMuted || theme.colors.text.secondary,
             backgroundColor: !state.isDisabled ? '#F2FBFC' : 'transparent',
         },
-        padding: state.isFocused ? '0 7px' : '0 8px',
+        padding: state.isFocused ? '0 1px 0 7px' : '0 2px 0 8px',
         backgroundColor: state.isDisabled
             ? '#F5F5F5'
             : state.isFocused
@@ -40,7 +40,7 @@ const selectStyles = (theme, error, variant, listMaxHeight) => ({
     }),
     valueContainer: (base) => ({
         ...base,
-        padding: '0 8px',
+        padding: '0 2px 0 8px',
     }),
     singleValue: (base, state) => ({
         ...base,

package/package.json

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