@terraware/web-components 4.2.24 → 4.2.25
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/components/Markdown/index.d.ts +3 -2
- package/components/Markdown/index.d.ts.map +1 -1
- package/components/Markdown/index.js +4 -2
- package/components/Markdown/styles.scss +7 -3
- package/components/Textfield/Textfield.d.ts +1 -0
- package/components/Textfield/Textfield.d.ts.map +1 -1
- package/components/Textfield/Textfield.js +3 -2
- package/components/Textfield/TruncatedTextArea.d.ts.map +1 -1
- package/components/Textfield/TruncatedTextArea.js +31 -14
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { type JSX } from 'react';
|
|
1
|
+
import { type CSSProperties, type JSX } from 'react';
|
|
2
2
|
import './styles.scss';
|
|
3
3
|
export type MarkdownProps = {
|
|
4
4
|
value: string;
|
|
5
|
+
style?: CSSProperties;
|
|
5
6
|
};
|
|
6
|
-
declare const Markdown: ({ value }: MarkdownProps) => JSX.Element;
|
|
7
|
+
declare const Markdown: ({ value, style }: MarkdownProps) => JSX.Element;
|
|
7
8
|
export default Markdown;
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAoC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,aAAa,EAAE,KAAK,GAAG,EAAoC,MAAM,OAAO,CAAC;AAI9F,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,kBAAkB,aAAa,KAAG,GAAG,CAAC,OAavD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -3,7 +3,8 @@ import { marked } from 'marked';
|
|
|
3
3
|
import './styles.scss';
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
5
|
const Markdown = ({
|
|
6
|
-
value
|
|
6
|
+
value,
|
|
7
|
+
style
|
|
7
8
|
}) => {
|
|
8
9
|
const [html, setHtml] = useState();
|
|
9
10
|
const parseValue = useCallback(async _value => {
|
|
@@ -12,9 +13,10 @@ const Markdown = ({
|
|
|
12
13
|
}, []);
|
|
13
14
|
useEffect(() => {
|
|
14
15
|
void parseValue(value);
|
|
15
|
-
}, [value]);
|
|
16
|
+
}, [parseValue, value]);
|
|
16
17
|
return /*#__PURE__*/_jsx("div", {
|
|
17
18
|
className: "markdown",
|
|
19
|
+
style: style,
|
|
18
20
|
dangerouslySetInnerHTML: {
|
|
19
21
|
__html: html ?? ''
|
|
20
22
|
}
|
|
@@ -13,6 +13,9 @@
|
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-flow: column;
|
|
15
15
|
font-family: terraware.$tw-fnt-frm-fld-text-value-font-family;
|
|
16
|
+
font-size: terraware.$tw-fnt-frm-fld-text-value-font-size;
|
|
17
|
+
font-weight: terraware.$tw-fnt-frm-fld-text-value-font-weight;
|
|
18
|
+
line-height: terraware.$tw-fnt-frm-fld-text-value-line-height;
|
|
16
19
|
color: terraware.$tw-clr-txt;
|
|
17
20
|
padding: terraware.$tw-spc-base-x-small 0;
|
|
18
21
|
margin: 0;
|
|
@@ -61,11 +64,12 @@
|
|
|
61
64
|
}
|
|
62
65
|
|
|
63
66
|
p {
|
|
64
|
-
font-size: terraware.$tw-fnt-frm-fld-text-value-font-size;
|
|
65
|
-
font-weight: terraware.$tw-fnt-frm-fld-text-value-font-weight;
|
|
66
|
-
line-height: terraware.$tw-fnt-frm-fld-text-value-line-height;
|
|
67
67
|
padding: 0;
|
|
68
68
|
margin: 0;
|
|
69
|
+
|
|
70
|
+
+ p {
|
|
71
|
+
margin-top: terraware.$tw-spc-base-x-small;
|
|
72
|
+
}
|
|
69
73
|
}
|
|
70
74
|
|
|
71
75
|
a {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAW,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAO,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAK3D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzC,OAAO,eAAe,CAAC;AAEvB,KAAK,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAW,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAO,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAK3D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzC,OAAO,eAAe,CAAC;AAEvB,KAAK,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAG7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACjD,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqL3D"}
|
|
@@ -103,7 +103,8 @@ export default function TextField(props) {
|
|
|
103
103
|
return null;
|
|
104
104
|
}
|
|
105
105
|
const component = markdown ? /*#__PURE__*/_jsx(Markdown, {
|
|
106
|
-
value: value.toString()
|
|
106
|
+
value: value.toString(),
|
|
107
|
+
style: styles?.markdown
|
|
107
108
|
}) : /*#__PURE__*/_jsx("p", {
|
|
108
109
|
className: `textfield-value--display${preserveNewlines ? ' preserve-newlines' : ''}`,
|
|
109
110
|
children: value
|
|
@@ -116,7 +117,7 @@ export default function TextField(props) {
|
|
|
116
117
|
} else {
|
|
117
118
|
return component;
|
|
118
119
|
}
|
|
119
|
-
}, [display, markdown, preserveNewlines, truncateConfig, type, value]);
|
|
120
|
+
}, [display, markdown, preserveNewlines, styles, truncateConfig, type, value]);
|
|
120
121
|
return /*#__PURE__*/_jsxs(Box, {
|
|
121
122
|
className: `textfield ${className}`,
|
|
122
123
|
sx: sx,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TruncatedTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/TruncatedTextArea.tsx"],"names":[],"mappings":"AAAA,OAAc,
|
|
1
|
+
{"version":3,"file":"TruncatedTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/TruncatedTextArea.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIrF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,eAAe,CAAC;AAEvB,UAAU,sBAAsB;IAC9B,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,4CA4E9E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -11,35 +11,52 @@ const TruncatedTextArea = ({
|
|
|
11
11
|
showLessText,
|
|
12
12
|
showMoreText,
|
|
13
13
|
showTextStyle,
|
|
14
|
-
alignment = 'left'
|
|
14
|
+
alignment = 'left',
|
|
15
|
+
collapseOnBlur = false
|
|
15
16
|
} = truncateConfig;
|
|
16
17
|
const theme = useTheme();
|
|
17
18
|
const [showAll, setShowAll] = useState(false);
|
|
18
19
|
const [needsTruncating, setNeedsTruncating] = useState(false);
|
|
19
|
-
const
|
|
20
|
-
const ref = useRef(null);
|
|
20
|
+
const contentRef = useRef(null);
|
|
21
21
|
useEffect(() => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
setNeedsTruncating(height > maxHeight);
|
|
22
|
+
const node = contentRef.current;
|
|
23
|
+
if (!node) {
|
|
24
|
+
return;
|
|
26
25
|
}
|
|
27
|
-
|
|
26
|
+
const measure = () => {
|
|
27
|
+
// offsetHeight is an untransformed layout value, so it is in the same units as maxHeight
|
|
28
|
+
const truncating = node.offsetHeight > maxHeight;
|
|
29
|
+
setNeedsTruncating(truncating);
|
|
30
|
+
if (!truncating) {
|
|
31
|
+
// Otherwise content that grows long again later would start out expanded
|
|
32
|
+
setShowAll(false);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
measure();
|
|
36
|
+
const observer = new ResizeObserver(measure);
|
|
37
|
+
observer.observe(node);
|
|
38
|
+
return () => observer.disconnect();
|
|
39
|
+
}, [maxHeight]);
|
|
28
40
|
const toggleShowAll = () => setShowAll(prev => !prev);
|
|
29
|
-
const
|
|
41
|
+
const containerStyle = {
|
|
30
42
|
margin: 0,
|
|
31
43
|
padding: 0,
|
|
32
44
|
overflow: 'hidden',
|
|
33
45
|
width: '100%'
|
|
34
46
|
};
|
|
35
47
|
if (needsTruncating && !showAll) {
|
|
36
|
-
|
|
48
|
+
containerStyle.maxHeight = `${maxHeight}px`;
|
|
37
49
|
}
|
|
38
50
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
39
51
|
children: [/*#__PURE__*/_jsx("div", {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
52
|
+
style: containerStyle,
|
|
53
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
54
|
+
ref: contentRef,
|
|
55
|
+
style: {
|
|
56
|
+
display: 'flow-root'
|
|
57
|
+
},
|
|
58
|
+
children: children
|
|
59
|
+
})
|
|
43
60
|
}), needsTruncating && /*#__PURE__*/_jsx("div", {
|
|
44
61
|
style: {
|
|
45
62
|
width: '100%',
|
|
@@ -48,7 +65,7 @@ const TruncatedTextArea = ({
|
|
|
48
65
|
children: /*#__PURE__*/_jsx(Link, {
|
|
49
66
|
component: "button",
|
|
50
67
|
onClick: toggleShowAll,
|
|
51
|
-
onBlur: () => setShowAll(false),
|
|
68
|
+
onBlur: collapseOnBlur ? () => setShowAll(false) : undefined,
|
|
52
69
|
sx: {
|
|
53
70
|
color: theme.palette.TwClrTxtBrand,
|
|
54
71
|
textDecorationColor: `${theme.palette.TwClrTxtBrand}80`
|