@manuscripts/style-guide 2.0.29-LEAN-4077.7 → 2.0.29-LEAN-4213.0

package/dist/cjs/components/MultiValueInput.js

@@ -1,152 +0,0 @@
-"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, placeholder = '', initialValues = [], onChange, }) => {
-    const [values, setValues] = (0, react_1.useState)(initialValues);
-    const [currentValue, setCurrentValue] = (0, react_1.useState)('');
-    const handleAddValue = (value) => {
-        if (value.trim() && !values.includes(value.trim())) {
-            const updatedValues = [...values, value.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 handleBlur = () => {
-        if (currentValue) {
-            handleAddValue(currentValue);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            handleAddValue(currentValue);
-        }
-    };
-    const handleRemoveValue = (index) => {
-        const updatedValues = values.filter((_, i) => i !== index);
-        setValues(updatedValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
-    };
-    const xplaceholder = placeholder
-        ? placeholder
-        : inputType === 'number'
-            ? 'Enter number and press enter'
-            : 'Enter text and press enter';
-    return (react_1.default.createElement(Container, null,
-        values.map((value, index) => (react_1.default.createElement(Chip, { key: index },
-            value,
-            react_1.default.createElement(RemoveButton, { onMouseUp: () => handleRemoveValue(index) }, "\u00D7")))),
-        react_1.default.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })));
-};
-exports.MultiValueInput = MultiValueInput;

package/dist/es/components/MultiValueInput.js

@@ -1,122 +0,0 @@
-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, placeholder = '', initialValues = [], onChange, }) => {
-    const [values, setValues] = useState(initialValues);
-    const [currentValue, setCurrentValue] = useState('');
-    const handleAddValue = (value) => {
-        if (value.trim() && !values.includes(value.trim())) {
-            const updatedValues = [...values, value.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 handleBlur = () => {
-        if (currentValue) {
-            handleAddValue(currentValue);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            handleAddValue(currentValue);
-        }
-    };
-    const handleRemoveValue = (index) => {
-        const updatedValues = values.filter((_, i) => i !== index);
-        setValues(updatedValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
-    };
-    const xplaceholder = placeholder
-        ? placeholder
-        : inputType === 'number'
-            ? 'Enter number and press enter'
-            : 'Enter text and press enter';
-    return (React.createElement(Container, null,
-        values.map((value, index) => (React.createElement(Chip, { key: index },
-            value,
-            React.createElement(RemoveButton, { onMouseUp: () => handleRemoveValue(index) }, "\u00D7")))),
-        React.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })));
-};

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

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