@longline/aqua-ui 1.0.167 → 1.0.169
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/containers/Form/elements/BoxWrapper.js +2 -2
- package/inputs/Editor/Editor.d.ts +4 -0
- package/inputs/Editor/Editor.js +8 -6
- package/inputs/Editor/menu/MenuBar.d.ts +1 -3
- package/inputs/Editor/menu/MenuBar.js +15 -25
- package/inputs/Input/InputWrapper.d.ts +1 -0
- package/inputs/Input/InputWrapper.js +4 -3
- package/inputs/Textarea/Textarea.d.ts +4 -4
- package/inputs/Textarea/Textarea.js +5 -5
- package/package.json +1 -1
|
@@ -31,7 +31,7 @@ var BoxWrapperBase = function (props) {
|
|
|
31
31
|
React.createElement(HintBackground, null, props.hint)));
|
|
32
32
|
};
|
|
33
33
|
var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
|
|
34
|
-
var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-top: 23px;\n padding-bottom: 23px;\n"], ["\n display: flex;\n align-items: center;\n padding-top: 23px;\n padding-bottom: 23px;\n"])));
|
|
35
|
-
var BoxWrapper = styled(BoxWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
34
|
+
var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 23px;\n padding-bottom: 23px;\n flex: 1;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 23px;\n padding-bottom: 23px;\n flex: 1;\n"])));
|
|
35
|
+
var BoxWrapper = styled(BoxWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n display: flex;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n display: flex;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
36
36
|
export { BoxWrapper };
|
|
37
37
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -25,6 +25,10 @@ interface IProps {
|
|
|
25
25
|
* @default false
|
|
26
26
|
*/
|
|
27
27
|
disabled?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* If set, fill vertical height available.
|
|
30
|
+
*/
|
|
31
|
+
flex?: boolean;
|
|
28
32
|
/**
|
|
29
33
|
* Removes Editor border and makes background transparent. This is useful
|
|
30
34
|
* for placing an editor in a `Field`.
|
package/inputs/Editor/Editor.js
CHANGED
|
@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import { useEditor, EditorContent } from '@tiptap/react';
|
|
29
29
|
import StarterKit from '@tiptap/starter-kit';
|
|
30
|
-
import styled from 'styled-components';
|
|
30
|
+
import styled, { css } from 'styled-components';
|
|
31
31
|
import { MenuBar } from './menu/MenuBar';
|
|
32
32
|
import { InputWrapper } from '../Input/InputWrapper';
|
|
33
33
|
// define your extension array
|
|
@@ -46,15 +46,17 @@ var EditorBase = function (props) {
|
|
|
46
46
|
React.useEffect(function () {
|
|
47
47
|
editor.commands.setContent(props.value, true, { preserveWhitespace: "full" });
|
|
48
48
|
}, [props.value]);
|
|
49
|
-
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent },
|
|
49
|
+
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
|
|
50
|
+
!props.disabled && !props.ghost && React.createElement(MenuBar, { editor: editor }),
|
|
50
51
|
React.createElement("div", { className: props.className },
|
|
51
|
-
React.createElement(
|
|
52
|
-
|
|
52
|
+
React.createElement(Wrapper, null,
|
|
53
|
+
React.createElement(EditorContent, { editor: editor })))));
|
|
53
54
|
};
|
|
54
|
-
var
|
|
55
|
+
var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n\n .tiptap {\n border: none;\n outline: none;\n // Define colors for placeholder text.\n ::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n // Define colors for selected text.\n ::selection {\n background-color: ", ";\n color: ", ";\n } \n }\n\n // Content styles:\n .tiptap {\n code {\n background-color: ", ";\n color: ", ";\n outline: solid 1px ", ";\n border-radius: 4px;\n padding: 0 4px 0px 4px;\n }\n\n pre {\n background-color: ", ";\n border-radius: 4px;\n color: ", ";\n outline: solid 1px ", ";\n padding: 8px 12px 8px 12px;\n code {\n background-color: transparent;\n outline: none;\n border-radius: none;\n padding: 0 0 0 0;\n }\n }\n }\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n\n .tiptap {\n border: none;\n outline: none;\n // Define colors for placeholder text.\n ::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n // Define colors for selected text.\n ::selection {\n background-color: ", ";\n color: ", ";\n } \n }\n\n // Content styles:\n .tiptap {\n code {\n background-color: ", ";\n color: ", ";\n outline: solid 1px ", ";\n border-radius: 4px;\n padding: 0 4px 0px 4px;\n }\n\n pre {\n background-color: ", ";\n border-radius: 4px;\n color: ", ";\n outline: solid 1px ", ";\n padding: 8px 12px 8px 12px;\n code {\n background-color: transparent;\n outline: none;\n border-radius: none;\n padding: 0 0 0 0;\n }\n }\n }\n"])), function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; });
|
|
56
|
+
var EditorStyled = styled(EditorBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n width: 100%;\n \n // Editor has a fixed height, unless it flexes; then it will fill its \n // container vertically.\n height: 120px;\n ", "\n overflow-y: scroll;\n\n // When a menu bar is displayed, allow space for it.\n ", "\n"], ["\n position: relative;\n box-sizing: border-box;\n width: 100%;\n \n // Editor has a fixed height, unless it flexes; then it will fill its \n // container vertically.\n height: 120px;\n ", "\n overflow-y: scroll;\n\n // When a menu bar is displayed, allow space for it.\n ", "\n"])), function (p) { return p.flex && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%; \n "], ["\n height: 100%; \n "]))); }, function (p) { return !p.disabled && !p.ghost && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", " {\n top: 36px;\n }\n "], ["\n ", " {\n top: 36px;\n }\n "])), Wrapper); });
|
|
55
57
|
var Editor = function (_a) {
|
|
56
58
|
var _b = _a.fluid, fluid = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.ghost, ghost = _f === void 0 ? false : _f, props = __rest(_a, ["fluid", "error", "disabled", "transparent", "ghost"]);
|
|
57
59
|
return React.createElement(EditorStyled, __assign({ fluid: fluid, error: error, disabled: disabled, transparent: transparent, ghost: ghost }, props));
|
|
58
60
|
};
|
|
59
61
|
export { Editor };
|
|
60
|
-
var templateObject_1;
|
|
62
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -2,17 +2,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
var __assign = (this && this.__assign) || function () {
|
|
6
|
-
__assign = Object.assign || function(t) {
|
|
7
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
-
s = arguments[i];
|
|
9
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
-
t[p] = s[p];
|
|
11
|
-
}
|
|
12
|
-
return t;
|
|
13
|
-
};
|
|
14
|
-
return __assign.apply(this, arguments);
|
|
15
|
-
};
|
|
16
5
|
import * as React from 'react';
|
|
17
6
|
import styled from 'styled-components';
|
|
18
7
|
import { BoldButton } from '../buttons/BoldButton';
|
|
@@ -23,22 +12,23 @@ import { CodeButton } from '../buttons/CodeButton';
|
|
|
23
12
|
import { OrderedListButton } from '../buttons/OrderedListButton';
|
|
24
13
|
import { BulletListButton } from '../buttons/BulletListButton';
|
|
25
14
|
import { CodeBlockButton } from '../buttons/CodeBlockButton';
|
|
26
|
-
var
|
|
15
|
+
var MenuBar = function (props) {
|
|
27
16
|
if (!props.editor) {
|
|
28
17
|
return null;
|
|
29
18
|
}
|
|
30
|
-
return (React.createElement(
|
|
31
|
-
React.createElement(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
19
|
+
return (React.createElement(Bar, null,
|
|
20
|
+
React.createElement(Buttons, null,
|
|
21
|
+
React.createElement(BoldButton, { editor: props.editor }),
|
|
22
|
+
React.createElement(ItalicButton, { editor: props.editor }),
|
|
23
|
+
React.createElement(StrikethroughButton, { editor: props.editor }),
|
|
24
|
+
React.createElement(MenuSeparator, null),
|
|
25
|
+
React.createElement(OrderedListButton, { editor: props.editor }),
|
|
26
|
+
React.createElement(BulletListButton, { editor: props.editor }),
|
|
27
|
+
React.createElement(MenuSeparator, null),
|
|
28
|
+
React.createElement(CodeButton, { editor: props.editor }),
|
|
29
|
+
React.createElement(CodeBlockButton, { editor: props.editor }))));
|
|
40
30
|
};
|
|
41
|
-
var
|
|
42
|
-
var
|
|
31
|
+
var Bar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Keep MenuBar at top of editor; it must not scroll when the editor\n // content scrolls.\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: #fff;\n"], ["\n // Keep MenuBar at top of editor; it must not scroll when the editor\n // content scrolls.\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: #fff;\n"])));
|
|
32
|
+
var Buttons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: #f0f0f0;\n border-radius: 4px;\n padding: 8px;\n\n // Flex-align buttons and separators:\n display: flex;\n flex-direction: row;\n gap: 4px;\n"], ["\n background-color: #f0f0f0;\n border-radius: 4px;\n padding: 8px;\n\n // Flex-align buttons and separators:\n display: flex;\n flex-direction: row;\n gap: 4px;\n"])));
|
|
43
33
|
export { MenuBar };
|
|
44
|
-
var templateObject_1;
|
|
34
|
+
var templateObject_1, templateObject_2;
|
|
@@ -43,17 +43,18 @@ var InputWrapperBase = function (props) {
|
|
|
43
43
|
}
|
|
44
44
|
return (React.createElement("div", { className: props.className, onClick: props.onClick },
|
|
45
45
|
icon && !props.ghost && props.iconPosition == 'left' && icon,
|
|
46
|
-
React.createElement(
|
|
46
|
+
React.createElement(Content, null, props.children),
|
|
47
47
|
icon && !props.ghost && props.iconPosition == 'right' && icon,
|
|
48
48
|
props.onToggleReveal && React.createElement(Reveal, { revealed: props.revealed, onClick: props.onToggleReveal }),
|
|
49
49
|
props.onClear && React.createElement(Clear, { onClick: props.onClear }),
|
|
50
50
|
React.createElement(Unit, null, props.unit)));
|
|
51
51
|
};
|
|
52
52
|
var Unit = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n sup {\n vertical-align: baseline;\n font-size: xx-small;\n line-height: normal;\n } \n"], ["\n font: ", ";\n color: ", ";\n sup {\n vertical-align: baseline;\n font-size: xx-small;\n line-height: normal;\n } \n"])), function (p) { return p.theme.font.dataLarge; }, function (p) { return p.theme.colors.primary[2]; });
|
|
53
|
-
var
|
|
53
|
+
var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n flex: 1;\n overflow-x: hidden;\n"], ["\n position: relative;\n flex: 1;\n overflow-x: hidden;\n"])));
|
|
54
|
+
var InputWrapperStyled = styled(InputWrapperBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n width: 250px;\n ", "\n box-sizing: border-box;\n z-index: 0;\n ", ";\n\n // Content: \n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", " {\n ", "\n }\n\n // Appearance:\n transition: border-color ", "ms ease;\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n padding: 7px 11px 7px 11px;\n outline: none;\n cursor: ", ";\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n // Focus:\n &:focus-within {\n outline: solid 2px ", ";\n }\n\n // Error\n ", "\n\n // Disabled\n ", "\n\n // Ghost\n ", "\n\n // Transparent (borderless)\n ", "\n"], ["\n // Position and size:\n position: relative;\n width: 250px;\n ", "\n box-sizing: border-box;\n z-index: 0;\n ", ";\n\n // Content: \n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", " {\n ", "\n }\n\n // Appearance:\n transition: border-color ", "ms ease;\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n padding: 7px 11px 7px 11px;\n outline: none;\n cursor: ", ";\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n // Focus:\n &:focus-within {\n outline: solid 2px ", ";\n }\n\n // Error\n ", "\n\n // Disabled\n ", "\n\n // Ghost\n ", "\n\n // Transparent (borderless)\n ", "\n"])), function (p) { return p.fluid && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["flex: 1"], ["flex: 1"]))); }, Content, function (p) { return p.flex && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n "], ["\n height: 100%;\n "]))); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.error && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:focus-within {\n outline: solid 2px ", ";\n }\n &:hover {\n outline: solid 2px ", ";\n } \n box-shadow: none;\n "], ["\n outline: solid 2px ", ";\n &:focus-within {\n outline: solid 2px ", ";\n }\n &:hover {\n outline: solid 2px ", ";\n } \n box-shadow: none;\n "])), p.theme.colors.negative, p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n outline: solid 2px ", ";\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n user-select: none;\n "], ["\n outline: solid 2px ", ";\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n user-select: none;\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n pointer-events: none;\n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n pointer-events: none;\n "])), p.theme.colors.primary[2]); }, function (p) { return p.transparent && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border-width: 0px;\n outline: none !important;\n background-color: transparent;\n "], ["\n border-width: 0px;\n outline: none !important;\n background-color: transparent;\n "]))); });
|
|
54
55
|
var InputWrapper = function (_a) {
|
|
55
56
|
var _b = _a.iconPosition, iconPosition = _b === void 0 ? 'left' : _b, props = __rest(_a, ["iconPosition"]);
|
|
56
57
|
return React.createElement(InputWrapperStyled, __assign({ iconPosition: iconPosition }, props));
|
|
57
58
|
};
|
|
58
59
|
export { InputWrapper };
|
|
59
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
60
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -40,13 +40,13 @@ interface IProps {
|
|
|
40
40
|
*/
|
|
41
41
|
fluid?: boolean;
|
|
42
42
|
/**
|
|
43
|
-
*
|
|
43
|
+
* Minimum height in CSS units.
|
|
44
44
|
*/
|
|
45
|
-
|
|
45
|
+
minHeight?: string;
|
|
46
46
|
/**
|
|
47
|
-
*
|
|
47
|
+
* If set, fill vertical height available.
|
|
48
48
|
*/
|
|
49
|
-
|
|
49
|
+
flex?: boolean;
|
|
50
50
|
/**
|
|
51
51
|
* Is the Textarea in an error state?
|
|
52
52
|
* @default false
|
|
@@ -41,20 +41,20 @@ var TextareaBase = function (props) {
|
|
|
41
41
|
textareaRef.current.requestFullscreen();
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
|
-
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent },
|
|
45
|
-
React.createElement("textarea", { className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled,
|
|
44
|
+
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
|
|
45
|
+
React.createElement("textarea", { className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, tabIndex: 0, onChange: handleChange }),
|
|
46
46
|
props.fullscreen &&
|
|
47
47
|
React.createElement(FullscreenToggle, { onClick: toggleFullscreen },
|
|
48
48
|
React.createElement("use", { xlinkHref: SVG.Icons.Fullscreen }))));
|
|
49
49
|
};
|
|
50
50
|
var FullscreenToggle = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 12px;\n top: 12px;\n width: 16px;\n height: 16px;\n cursor: pointer;\n fill: ", ";\n"], ["\n position: absolute;\n right: 12px;\n top: 12px;\n width: 16px;\n height: 16px;\n cursor: pointer;\n fill: ", ";\n"])), function (p) { return p.theme.colors.primary[3]; });
|
|
51
|
-
var TextareaStyled = styled(TextareaBase)(
|
|
51
|
+
var TextareaStyled = styled(TextareaBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n // No resize grip\n resize: ", "; \n\n // Height\n ", "\n ", "\n ", "\n \n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n color: ", ";\n border: none;\n outline: none;\n background: ", ";\n\n // Font:\n font: ", ";\n ", "\n text-align: left;\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Define colors for selected text.\n &::selection {\n background-color: ", ";\n color: ", ";\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n } \n\n // Make sure HTML5 validation does not show up. \n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n"], ["\n position: relative;\n // No resize grip\n resize: ", "; \n\n // Height\n ", "\n ", "\n ", "\n \n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n color: ", ";\n border: none;\n outline: none;\n background: ", ";\n\n // Font:\n font: ", ";\n ", "\n text-align: left;\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Define colors for selected text.\n &::selection {\n background-color: ", ";\n color: ", ";\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n } \n\n // Make sure HTML5 validation does not show up. \n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n"
|
|
52
52
|
/**
|
|
53
53
|
* `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,
|
|
54
54
|
* it can be contained in a `Form.Field`. A (vertical) resizer can be added
|
|
55
55
|
* using `resizable`, and a fullscreen toggle is added using `fullscreen`.
|
|
56
56
|
*/
|
|
57
|
-
])), function (p) { return p.resizable ? 'vertical' : 'none'; }, function (p) { return !p.minHeight && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["min-height: 80px;"], ["min-height: 80px;"]))); }, function (p) { return p.minHeight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["min-height: ", "
|
|
57
|
+
])), function (p) { return p.resizable ? 'vertical' : 'none'; }, function (p) { return !p.minHeight && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["min-height: 80px;"], ["min-height: 80px;"]))); }, function (p) { return p.minHeight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), p.minHeight); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["min-height: 100%;"], ["min-height: 100%;"]))); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return (p.disabled || p.transparent || p.ghost) ? 'transparent' : p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.monospaced && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["font: ", ";"], ["font: ", ";"])), p.theme.font.dataLarge); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; });
|
|
58
58
|
/**
|
|
59
59
|
* `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,
|
|
60
60
|
* it can be contained in a `Form.Field`. A (vertical) resizer can be added
|
|
@@ -62,4 +62,4 @@ var TextareaStyled = styled(TextareaBase)(templateObject_5 || (templateObject_5
|
|
|
62
62
|
*/
|
|
63
63
|
var Textarea = function (props) { return React.createElement(TextareaStyled, __assign({}, props)); };
|
|
64
64
|
export { Textarea };
|
|
65
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
65
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|