@connectif/ui-components 2.0.16 → 2.0.17
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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { SxProps } from '@mui/material';
|
|
3
|
+
import { TypographyVariant } from '../../theme/Typography';
|
|
3
4
|
import { InputLabelProps } from './InputLabel';
|
|
4
5
|
import { IconId } from '../icon';
|
|
5
6
|
export type TextFieldProps = {
|
|
@@ -144,6 +145,10 @@ export type TextFieldProps = {
|
|
|
144
145
|
* IconButton and MenuIconButton size must be 'M' or smaller.
|
|
145
146
|
*/
|
|
146
147
|
groupElements?: boolean;
|
|
148
|
+
/**
|
|
149
|
+
* Specify typography variant on input
|
|
150
|
+
*/
|
|
151
|
+
typographyVariant?: TypographyVariant;
|
|
147
152
|
};
|
|
148
153
|
/**
|
|
149
154
|
* TextField is a component that renders an input field with type="text" or a textarea.
|
package/dist/index.js
CHANGED
|
@@ -13801,7 +13801,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
|
|
|
13801
13801
|
borderStyle: "solid",
|
|
13802
13802
|
borderColor: !backgroundColor2 ? messageType === "incoming" ? grey200 : primary300 : backgroundColor2,
|
|
13803
13803
|
color: messageType === "incoming" ? grey900 : white,
|
|
13804
|
-
borderRadius: "
|
|
13804
|
+
borderRadius: "16px",
|
|
13805
13805
|
...highlightStartEdge && messageType === "outgoing" && {
|
|
13806
13806
|
borderTopRightRadius: "4px"
|
|
13807
13807
|
},
|
|
@@ -18411,11 +18411,14 @@ var InputHelperText_default = InputHelperText;
|
|
|
18411
18411
|
// src/components/input/TextField.tsx
|
|
18412
18412
|
import { Fragment as Fragment20, jsx as jsx98, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
18413
18413
|
var commonInputStylesOptions = {
|
|
18414
|
-
shouldForwardProp: (prop) => prop !== "variant"
|
|
18414
|
+
shouldForwardProp: (prop) => prop !== "variant" && prop !== "typographyVariant"
|
|
18415
18415
|
};
|
|
18416
|
-
function getCommonInputStyles({
|
|
18416
|
+
function getCommonInputStyles({
|
|
18417
|
+
disabled,
|
|
18418
|
+
typographyVariant
|
|
18419
|
+
}) {
|
|
18417
18420
|
return {
|
|
18418
|
-
...variants["body2"],
|
|
18421
|
+
...variants[typographyVariant ?? "body2"],
|
|
18419
18422
|
backgroundColor: "transparent",
|
|
18420
18423
|
display: "block",
|
|
18421
18424
|
width: "0",
|
|
@@ -18483,6 +18486,7 @@ var TextField = React50.forwardRef(function TextField2({
|
|
|
18483
18486
|
readOnly = false,
|
|
18484
18487
|
className = "",
|
|
18485
18488
|
groupElements,
|
|
18489
|
+
typographyVariant,
|
|
18486
18490
|
...restProps
|
|
18487
18491
|
}, ref) {
|
|
18488
18492
|
const [id] = React50.useState(Math.random().toString(10));
|
|
@@ -18581,6 +18585,7 @@ var TextField = React50.forwardRef(function TextField2({
|
|
|
18581
18585
|
maxLength,
|
|
18582
18586
|
onKeyDown,
|
|
18583
18587
|
className: "Slim-Vertical-Scroll",
|
|
18588
|
+
...typographyVariant && { typographyVariant },
|
|
18584
18589
|
onScroll: () => {
|
|
18585
18590
|
if (onScroll) {
|
|
18586
18591
|
const reference = ref || inputRef;
|
|
@@ -18613,6 +18618,7 @@ var TextField = React50.forwardRef(function TextField2({
|
|
|
18613
18618
|
autoComplete,
|
|
18614
18619
|
maxLength,
|
|
18615
18620
|
onKeyDown,
|
|
18621
|
+
...typographyVariant && { typographyVariant },
|
|
18616
18622
|
...restProps
|
|
18617
18623
|
}
|
|
18618
18624
|
)
|
|
@@ -24259,7 +24265,13 @@ var KatexRenderer_default = KatexRenderer;
|
|
|
24259
24265
|
// src/components/markdown/MarkdownRenderer.tsx
|
|
24260
24266
|
import { jsx as jsx137 } from "react/jsx-runtime";
|
|
24261
24267
|
var MarkdownContainer = styled8("div")(
|
|
24262
|
-
({
|
|
24268
|
+
({
|
|
24269
|
+
color: color2,
|
|
24270
|
+
backgroundColor: backgroundColor2 = "transparent",
|
|
24271
|
+
variant,
|
|
24272
|
+
lineHeight,
|
|
24273
|
+
codeLineHeight
|
|
24274
|
+
}) => ({
|
|
24263
24275
|
color: color2,
|
|
24264
24276
|
backgroundColor: backgroundColor2,
|
|
24265
24277
|
borderRadius: "8px",
|
|
@@ -24268,11 +24280,16 @@ var MarkdownContainer = styled8("div")(
|
|
|
24268
24280
|
"& h1": { fontSize: "1.75rem" },
|
|
24269
24281
|
"& h2": { fontSize: "1.5rem" },
|
|
24270
24282
|
"& h3": { fontSize: "1.25rem" },
|
|
24271
|
-
"& p": {
|
|
24283
|
+
"& p": {
|
|
24284
|
+
...variants[variant || "body2"],
|
|
24285
|
+
margin: "0.5em 0",
|
|
24286
|
+
...lineHeight && { lineHeight: `${lineHeight}px` }
|
|
24287
|
+
},
|
|
24272
24288
|
"& ul, & ol": {
|
|
24273
24289
|
...variants[variant || "body2"],
|
|
24274
24290
|
paddingLeft: "1.5em",
|
|
24275
|
-
margin: "0.5em 0"
|
|
24291
|
+
margin: "0.5em 0",
|
|
24292
|
+
...lineHeight && { lineHeight: `${lineHeight}px` }
|
|
24276
24293
|
},
|
|
24277
24294
|
"& li": { marginBottom: "0.25em" },
|
|
24278
24295
|
"& code": {
|
|
@@ -24281,18 +24298,30 @@ var MarkdownContainer = styled8("div")(
|
|
|
24281
24298
|
borderRadius: "4px",
|
|
24282
24299
|
fontFamily: "Courier New, monospace",
|
|
24283
24300
|
fontSize: "0.9em",
|
|
24284
|
-
color: white
|
|
24301
|
+
color: white,
|
|
24302
|
+
...(codeLineHeight || lineHeight) && {
|
|
24303
|
+
lineHeight: `${codeLineHeight ?? lineHeight}px`
|
|
24304
|
+
}
|
|
24305
|
+
},
|
|
24306
|
+
"& pre code": {
|
|
24307
|
+
display: "block",
|
|
24308
|
+
padding: "12px",
|
|
24309
|
+
overflowX: "auto",
|
|
24310
|
+
...(codeLineHeight || lineHeight) && {
|
|
24311
|
+
lineHeight: `${codeLineHeight ?? lineHeight}px`
|
|
24312
|
+
}
|
|
24285
24313
|
},
|
|
24286
|
-
"& pre code": { display: "block", padding: "12px", overflowX: "auto" },
|
|
24287
24314
|
"& table": {
|
|
24288
24315
|
width: "100%",
|
|
24289
24316
|
borderCollapse: "collapse",
|
|
24290
|
-
margin: "1em 0"
|
|
24317
|
+
margin: "1em 0",
|
|
24318
|
+
...lineHeight && { lineHeight: `${lineHeight}px` }
|
|
24291
24319
|
},
|
|
24292
24320
|
"& th, & td": {
|
|
24293
24321
|
border: `1px solid ${grey800}`,
|
|
24294
24322
|
padding: "8px",
|
|
24295
|
-
textAlign: "left"
|
|
24323
|
+
textAlign: "left",
|
|
24324
|
+
...lineHeight && { lineHeight: `${lineHeight}px` }
|
|
24296
24325
|
},
|
|
24297
24326
|
"& th": { backgroundColor: grey900, color: white },
|
|
24298
24327
|
"& a": { color: primary200, textDecoration: "none" },
|
|
@@ -25945,7 +25974,7 @@ import { Fragment as Fragment35, jsx as jsx169, jsxs as jsxs80 } from "react/jsx
|
|
|
25945
25974
|
var sizes6 = {
|
|
25946
25975
|
M: 400,
|
|
25947
25976
|
L: 500,
|
|
25948
|
-
XL:
|
|
25977
|
+
XL: 640
|
|
25949
25978
|
};
|
|
25950
25979
|
var styles2 = {
|
|
25951
25980
|
backgroundColor: dark900,
|