@manuscripts/style-guide 3.5.10 → 3.5.11

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/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/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.10",
+  "version": "3.5.11",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",