diff --git a/src/components/forms/InputWithSeparator.jsx b/src/components/forms/InputWithSeparator.jsx
index d986ea2..68bd0f5 100644
--- a/src/components/forms/InputWithSeparator.jsx
+++ b/src/components/forms/InputWithSeparator.jsx
@@ -90,6 +90,13 @@ function InputWithSeparator ({
onChange({ value: event.target.value, chunks })
}
+ function handleKeyDown (event) {
+ if ((event.keyCode === 46 || event.keyCode === 8) && value === '' && chunks.length > 0) {
+ setChunks(prevChunks => prevChunks.splice(0, prevChunks.length - 1))
+ onChange({ value: '', chunks })
+ }
+ }
+
function normalClassName () {
return `${baseClassName} `
}
@@ -150,6 +157,7 @@ function InputWithSeparator ({
placeholder={chunks.length > 0 ? '' : placeholder}
className={inputClassName}
onChange={handleChange}
+ onKeyDown={handleKeyDown}
disabled={disabled}
onFocus={() => handleFocus()}
onBlur={() => handleBlur()}
diff --git a/src/components/forms/InputWithSeparator.module.css b/src/components/forms/InputWithSeparator.module.css
index a9335e9..4a1ea5e 100644
--- a/src/components/forms/InputWithSeparator.module.css
+++ b/src/components/forms/InputWithSeparator.module.css
@@ -8,7 +8,7 @@
@apply flex min-h-[40px] border border-solid box-border rounded items-center gap-2 flex-wrap relative grow px-2;
}
.input {
- @apply h-full m-0 border-0;
+ @apply h-full m-0 border-0 min-w-[250px];
padding-block: 0;
padding-inline: 0;
background: inherit;
diff --git a/src/components/icons/AddUserIcon.jsx b/src/components/icons/AddUserIcon.jsx
new file mode 100644
index 0000000..7b19075
--- /dev/null
+++ b/src/components/icons/AddUserIcon.jsx
@@ -0,0 +1,102 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const AddUserIcon = ({
+ color = MAIN_DARK_BLUE,
+ size = MEDIUM,
+ disabled = false,
+ inactive = false
+}) => {
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
+ if (disabled) {
+ className += ` ${styles.iconDisabled}`
+ }
+ if (inactive) {
+ className += ` ${styles.iconInactive}`
+ }
+ let icon = <>>
+
+ switch (size) {
+ case SMALL:
+ icon = (
+
+ )
+ break
+ case MEDIUM:
+ icon = (
+
+ )
+ break
+ case LARGE:
+ icon = (
+
+ )
+ break
+
+ default:
+ break
+ }
+ return icon
+}
+
+AddUserIcon.propTypes = {
+ /**
+ * color of text, icon and borders
+ */
+ color: PropTypes.oneOf(COLORS_ICON),
+ /**
+ * Size
+ */
+ size: PropTypes.oneOf(SIZES),
+ /**
+ * disabled
+ */
+ disabled: PropTypes.bool,
+ /**
+ * inactive
+ */
+ inactive: PropTypes.bool
+}
+
+export default AddUserIcon
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index b542a3d..2246928 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -1,6 +1,7 @@
import AddIcon from './AddIcon'
import AddEnvVariableIcon from './AddEnvVariableIcon'
import AddRouteIcon from './AddRouteIcon'
+import AddUserIcon from './AddUserIcon'
import AlertIcon from './AlertIcon'
import AllAppsIcon from './AllAppsIcon'
import AllInOneIcon from './AllInOneIcon'
@@ -189,6 +190,7 @@ export default {
AddIcon,
AddEnvVariableIcon,
AddRouteIcon,
+ AddUserIcon,
AlertIcon,
AllAppsIcon,
AllInOneIcon,