@manuscripts/style-guide 3.5.9 → 3.5.11

package/dist/cjs/components/DatePicker.js

@@ -12,6 +12,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("./icons");
 const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, }) => {
     const [selectedDate, setSelectedDate] = (0, react_1.useState)(date || null);
+    (0, react_1.useEffect)(() => {
+        setSelectedDate(date ?? null);
+    }, [date]);
     const handleChange = (date) => {
         setSelectedDate(date);
         handleDateChange(date);

package/dist/cjs/components/FormCommon.js

@@ -45,6 +45,7 @@ exports.TextWithGenerationWrapper = styled_components_1.default.div `
 `;
 exports.TextFieldError = styled_components_1.default.div `
   margin-top: 4px;
+  width: 100%;
 `;
 exports.TextFieldErrorItem = styled_components_1.default.div `
   font-family: ${(props) => props.theme.font.family.sans};

package/dist/cjs/components/FormFieldContainer.js

@@ -17,6 +17,7 @@ const FormFieldContainer = ({ label, error, info, id, children, }) => {
 };
 exports.FormFieldContainer = FormFieldContainer;
 const FormFieldInfo = styled_components_1.default.div `
+  width: 100%;
   font-family: ${(props) => props.theme.font.family.sans};
   font-size: ${(props) => props.theme.font.size.small};
   color: ${(props) => props.theme.colors.text.secondary};

package/dist/cjs/components/List.js

@@ -140,6 +140,13 @@ function withListNavigation(Component) {
             if (!element) {
                 return;
             }
+            if (element.hasAttribute('disabled')) {
+                const tabbedElement = element.querySelector('[data-list-item][tabindex="0"]');
+                if (tabbedElement) {
+                    tabbedElement.tabIndex = -1;
+                }
+                return;
+            }
             const firstItem = element.querySelector('[data-list-item]');
             if (!firstItem) {
                 return;
@@ -156,6 +163,13 @@ function withListNavigation(Component) {
         return ((0, jsx_runtime_1.jsx)(Component, { ref: mergeRefs(containerRef, forwardedRef), ...props, onKeyDown: handleKeyDown, onBlur: handelOnBlur }));
     })) `
     outline: none;
+    &[disabled] {
+      pointer-events: none;
+      user-select: none;
+      border-color: #e4e4e4;
+      color: #b3b3b3;
+      opacity: 0.5;
+    }
   `;
 }
 function withNavigableListItem(Component) {

package/dist/cjs/components/MultiValueInput.js

@@ -126,6 +126,6 @@ const MultiValueInput = ({ id, inputType, placeholder = '', initialValues = [],
         : inputType === 'number'
             ? 'Enter number and press enter'
             : 'Enter text and press enter';
-    return ((0, jsx_runtime_1.jsxs)(Container, { children: [values.map((value, index) => ((0, jsx_runtime_1.jsxs)(Chip, { children: [value, (0, jsx_runtime_1.jsx)(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), (0, jsx_runtime_1.jsx)(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { className: 'multi-value-input', children: [values.map((value, index) => ((0, jsx_runtime_1.jsxs)(Chip, { className: 'chip', children: [value, (0, jsx_runtime_1.jsx)(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), (0, jsx_runtime_1.jsx)(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
 };
 exports.MultiValueInput = MultiValueInput;

package/dist/cjs/components/SelectedItemsBox.js

@@ -12,6 +12,12 @@ const BoxContainer = styled_components_1.default.div `
   padding: 8px;
   min-height: 120px;
   background: ${(props) => props.theme.colors.background.primary};
+
+  &[disabled] {
+    color: #707070 !important;
+    background: #f5f5f5;
+    cursor: not-allowed;
+  }
 `;
 const ItemsList = styled_components_1.default.div `
   display: flex;
@@ -36,10 +42,10 @@ const Item = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: 4px;
-  background: #f2f2f2;
+  background: ${(props) => (props.disabled ? '#dddcdc' : '#f2f2f2')};
   border-radius: 6px;
   padding: 4px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${(props) => props.disabled ? '#707070' : props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.small}
     ${(props) => props.theme.font.family.sans};
@@ -65,7 +71,7 @@ const RemoveButton = styled_components_1.default.button `
   }
 `;
 const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(BoxContainer, { ...props, children: items.length > 0 ? ((0, jsx_runtime_1.jsx)(ItemsList, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)(Item, { "data-cy": "item", children: [item.label, (0, jsx_runtime_1.jsx)(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" })] }, item.id))) })) : ((0, jsx_runtime_1.jsx)(EmptyContainer, { children: (0, jsx_runtime_1.jsx)(Placeholder, { children: placeholder }) })) }));
+    return ((0, jsx_runtime_1.jsx)(BoxContainer, { ...props, children: items.length > 0 ? ((0, jsx_runtime_1.jsx)(ItemsList, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)(Item, { "data-cy": "item", disabled: !!props.disabled, children: [item.label, !props.disabled && ((0, jsx_runtime_1.jsx)(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : ((0, jsx_runtime_1.jsx)(EmptyContainer, { children: (0, jsx_runtime_1.jsx)(Placeholder, { children: placeholder }) })) }));
 };
 exports.SelectedItemsBox = SelectedItemsBox;
 exports.default = exports.SelectedItemsBox;

package/dist/cjs/components/TextField.js

@@ -155,6 +155,7 @@ exports.TextFieldGroup = styled_components_1.default.div `
 `;
 exports.TextFieldLabel = styled_components_1.default.label `
   display: block;
+  width: 100%;
   font-family: ${(props) => props.theme.font.family.sans};
   color: ${(props) => props.theme.colors.text.primary};
   font-size: ${(props) => props.theme.font.size.normal};

package/dist/es/components/DatePicker.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import 'react-datepicker/dist/react-datepicker.css';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ReactDatePicker from 'react-datepicker';
 import styled from 'styled-components';
 import { CalendarIcon } from './icons';
 export const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, }) => {
     const [selectedDate, setSelectedDate] = useState(date || null);
+    useEffect(() => {
+        setSelectedDate(date ?? null);
+    }, [date]);
     const handleChange = (date) => {
         setSelectedDate(date);
         handleDateChange(date);

package/dist/es/components/FormCommon.js

@@ -37,6 +37,7 @@ export const TextWithGenerationWrapper = styled.div `
 `;
 export const TextFieldError = styled.div `
   margin-top: 4px;
+  width: 100%;
 `;
 export const TextFieldErrorItem = styled.div `
   font-family: ${(props) => props.theme.font.family.sans};

package/dist/es/components/FormFieldContainer.js

@@ -10,6 +10,7 @@ export const FormFieldContainer = ({ label, error, info, id, children, }) => {
     return (_jsxs(Fragment, { children: [label ? (_jsxs(TextFieldLabel, { htmlFor: id, children: [label, " ", childrenWithErrorProp] })) : (childrenWithErrorProp), info && !error && _jsx(FormFieldInfo, { children: info }), error && (_jsx(TextFieldError, { children: _jsx(TextFieldErrorItem, { children: error }) }))] }));
 };
 const FormFieldInfo = styled.div `
+  width: 100%;
   font-family: ${(props) => props.theme.font.family.sans};
   font-size: ${(props) => props.theme.font.size.small};
   color: ${(props) => props.theme.colors.text.secondary};

package/dist/es/components/List.js

@@ -132,6 +132,13 @@ export function withListNavigation(Component) {
             if (!element) {
                 return;
             }
+            if (element.hasAttribute('disabled')) {
+                const tabbedElement = element.querySelector('[data-list-item][tabindex="0"]');
+                if (tabbedElement) {
+                    tabbedElement.tabIndex = -1;
+                }
+                return;
+            }
             const firstItem = element.querySelector('[data-list-item]');
             if (!firstItem) {
                 return;
@@ -148,6 +155,13 @@ export function withListNavigation(Component) {
         return (_jsx(Component, { ref: mergeRefs(containerRef, forwardedRef), ...props, onKeyDown: handleKeyDown, onBlur: handelOnBlur }));
     })) `
     outline: none;
+    &[disabled] {
+      pointer-events: none;
+      user-select: none;
+      border-color: #e4e4e4;
+      color: #b3b3b3;
+      opacity: 0.5;
+    }
   `;
 }
 export function withNavigableListItem(Component) {

package/dist/es/components/MultiValueInput.js

@@ -120,5 +120,5 @@ export const MultiValueInput = ({ id, inputType, placeholder = '', initialValues
         : inputType === 'number'
             ? 'Enter number and press enter'
             : 'Enter text and press enter';
-    return (_jsxs(Container, { children: [values.map((value, index) => (_jsxs(Chip, { children: [value, _jsx(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), _jsx(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
+    return (_jsxs(Container, { className: 'multi-value-input', children: [values.map((value, index) => (_jsxs(Chip, { className: 'chip', children: [value, _jsx(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), _jsx(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
 };

package/dist/es/components/SelectedItemsBox.js

@@ -6,6 +6,12 @@ const BoxContainer = styled.div `
   padding: 8px;
   min-height: 120px;
   background: ${(props) => props.theme.colors.background.primary};
+
+  &[disabled] {
+    color: #707070 !important;
+    background: #f5f5f5;
+    cursor: not-allowed;
+  }
 `;
 const ItemsList = styled.div `
   display: flex;
@@ -30,10 +36,10 @@ const Item = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
-  background: #f2f2f2;
+  background: ${(props) => (props.disabled ? '#dddcdc' : '#f2f2f2')};
   border-radius: 6px;
   padding: 4px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${(props) => props.disabled ? '#707070' : props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.small}
     ${(props) => props.theme.font.family.sans};
@@ -59,6 +65,6 @@ const RemoveButton = styled.button `
   }
 `;
 export const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
-    return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", children: [item.label, _jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" })] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));
+    return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", disabled: !!props.disabled, children: [item.label, !props.disabled && (_jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));
 };
 export default SelectedItemsBox;

package/dist/es/components/TextField.js

@@ -119,6 +119,7 @@ export const TextFieldGroup = styled.div `
 `;
 export const TextFieldLabel = styled.label `
   display: block;
+  width: 100%;
   font-family: ${(props) => props.theme.font.family.sans};
   color: ${(props) => props.theme.colors.text.primary};
   font-size: ${(props) => props.theme.font.size.normal};

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

@@ -7,6 +7,7 @@ interface SelectedItemsBoxProps extends React.HTMLAttributes<HTMLElement> {
     items: SelectedItem[];
     onRemove: (id: string) => void;
     placeholder?: string;
+    disabled?: boolean;
 }
 export declare const SelectedItemsBox: React.FC<SelectedItemsBoxProps>;
 export default SelectedItemsBox;

package/package.json

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