@rufous/ui 0.2.98 → 0.2.100
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/dist/main.cjs +29 -8
- package/dist/main.css +40 -3
- package/dist/main.d.cts +17 -1
- package/dist/main.d.ts +17 -1
- package/dist/main.js +32 -9
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -1805,15 +1805,20 @@ var TextField = (0, import_react17.forwardRef)(({
|
|
|
1805
1805
|
slotProps,
|
|
1806
1806
|
InputProps,
|
|
1807
1807
|
numberVariant,
|
|
1808
|
+
multiline = false,
|
|
1809
|
+
rows,
|
|
1810
|
+
maxRows,
|
|
1808
1811
|
...props
|
|
1809
1812
|
}, ref) => {
|
|
1810
1813
|
const sxClass = useSx(sx);
|
|
1811
|
-
const inputId = id || name || `tf-${Math.random().toString(36).
|
|
1814
|
+
const inputId = id || name || `tf-${Math.random().toString(36).substring(2, 11)}`;
|
|
1815
|
+
const isTextarea = multiline || rows !== void 0 && rows > 1;
|
|
1816
|
+
const resolvedRows = rows ?? (multiline ? 4 : void 0);
|
|
1812
1817
|
const isFloating = Boolean(
|
|
1813
1818
|
value !== void 0 && value !== "" || type === "date" || type === "time" || type === "datetime-local"
|
|
1814
1819
|
);
|
|
1815
1820
|
const hasLabel = Boolean(label);
|
|
1816
|
-
const readOnly = slotProps?.input?.readOnly;
|
|
1821
|
+
const readOnly = isTextarea ? slotProps?.textarea?.readOnly : slotProps?.input?.readOnly;
|
|
1817
1822
|
const rootClasses = [
|
|
1818
1823
|
"rf-text-field",
|
|
1819
1824
|
`rf-text-field--${variant}`,
|
|
@@ -1826,7 +1831,8 @@ var TextField = (0, import_react17.forwardRef)(({
|
|
|
1826
1831
|
hasLabel ? "rf-text-field--has-label" : "",
|
|
1827
1832
|
InputProps?.startAdornment ? "rf-text-field--adorned-start" : "",
|
|
1828
1833
|
InputProps?.endAdornment ? "rf-text-field--adorned-end" : "",
|
|
1829
|
-
|
|
1834
|
+
isTextarea ? "rf-text-field--multiline" : "",
|
|
1835
|
+
!isTextarea && type === "number" && !disabled && !readOnly ? "rf-text-field--has-number-controls" : "",
|
|
1830
1836
|
sxClass,
|
|
1831
1837
|
className
|
|
1832
1838
|
].filter(Boolean).join(" ");
|
|
@@ -1901,11 +1907,26 @@ var TextField = (0, import_react17.forwardRef)(({
|
|
|
1901
1907
|
}
|
|
1902
1908
|
}
|
|
1903
1909
|
}
|
|
1904
|
-
if (props.onKeyDown)
|
|
1905
|
-
props.onKeyDown(e);
|
|
1906
|
-
}
|
|
1910
|
+
if (props.onKeyDown) props.onKeyDown(e);
|
|
1907
1911
|
};
|
|
1908
|
-
|
|
1912
|
+
const textareaStyle = maxRows ? { maxHeight: `calc(${maxRows} * var(--tf-line-height, 1.5em) + var(--tf-textarea-vpad, 18px) * 2)`, overflowY: "auto" } : {};
|
|
1913
|
+
return /* @__PURE__ */ import_react17.default.createElement("div", { ref, className: rootClasses, style }, /* @__PURE__ */ import_react17.default.createElement("div", { className: `rf-text-field__wrapper ${InputProps?.className || ""}`, style: InputProps?.style }, InputProps?.startAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--start" }, InputProps.startAdornment), isTextarea ? /* @__PURE__ */ import_react17.default.createElement(
|
|
1914
|
+
"textarea",
|
|
1915
|
+
{
|
|
1916
|
+
id: inputId,
|
|
1917
|
+
name,
|
|
1918
|
+
className: "rf-text-field__input rf-text-field__textarea",
|
|
1919
|
+
placeholder: placeholder || (variant === "outlined" ? " " : void 0),
|
|
1920
|
+
value,
|
|
1921
|
+
rows: resolvedRows,
|
|
1922
|
+
required,
|
|
1923
|
+
disabled,
|
|
1924
|
+
readOnly,
|
|
1925
|
+
style: textareaStyle,
|
|
1926
|
+
...slotProps?.textarea,
|
|
1927
|
+
onChange
|
|
1928
|
+
}
|
|
1929
|
+
) : /* @__PURE__ */ import_react17.default.createElement(
|
|
1909
1930
|
"input",
|
|
1910
1931
|
{
|
|
1911
1932
|
ref: internalRef,
|
|
@@ -1925,7 +1946,7 @@ var TextField = (0, import_react17.forwardRef)(({
|
|
|
1925
1946
|
...props,
|
|
1926
1947
|
onChange: handleChange
|
|
1927
1948
|
}
|
|
1928
|
-
), InputProps?.endAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ import_react17.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react17.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ import_react17.default.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react17.default.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
1949
|
+
), InputProps?.endAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), !isTextarea && type === "number" && !disabled && !readOnly && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ import_react17.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react17.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ import_react17.default.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react17.default.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
1929
1950
|
});
|
|
1930
1951
|
TextField.displayName = "TextField";
|
|
1931
1952
|
|
package/dist/main.css
CHANGED
|
@@ -441,6 +441,7 @@
|
|
|
441
441
|
border-top: 2px solid var(--border-color);
|
|
442
442
|
border-bottom: 1px solid var(--border-color);
|
|
443
443
|
overflow-x: auto;
|
|
444
|
+
overflow-y: auto;
|
|
444
445
|
flex: 1;
|
|
445
446
|
}
|
|
446
447
|
.dg-table-wrap--empty {
|
|
@@ -453,6 +454,11 @@
|
|
|
453
454
|
min-width: 600px;
|
|
454
455
|
table-layout: fixed;
|
|
455
456
|
}
|
|
457
|
+
.dg-table thead {
|
|
458
|
+
position: sticky;
|
|
459
|
+
top: 0;
|
|
460
|
+
z-index: 10;
|
|
461
|
+
}
|
|
456
462
|
.dg-table thead tr {
|
|
457
463
|
background: var(--hover-color);
|
|
458
464
|
border-bottom: 1px solid var(--border-color);
|
|
@@ -469,13 +475,13 @@
|
|
|
469
475
|
.dg-thead-cell.pinned-left {
|
|
470
476
|
position: sticky;
|
|
471
477
|
left: 0;
|
|
472
|
-
z-index:
|
|
478
|
+
z-index: 30;
|
|
473
479
|
box-shadow: inset -1px 0 0 var(--border-color);
|
|
474
480
|
}
|
|
475
481
|
.dg-thead-cell.pinned-right {
|
|
476
482
|
position: sticky;
|
|
477
483
|
right: 0;
|
|
478
|
-
z-index:
|
|
484
|
+
z-index: 30;
|
|
479
485
|
box-shadow: inset 1px 0 0 var(--border-color);
|
|
480
486
|
}
|
|
481
487
|
.dg-th-inner {
|
|
@@ -6388,7 +6394,7 @@ pre {
|
|
|
6388
6394
|
white-space: nowrap;
|
|
6389
6395
|
overflow: hidden;
|
|
6390
6396
|
text-overflow: ellipsis;
|
|
6391
|
-
max-width: calc(
|
|
6397
|
+
max-width: calc(100% - 32px);
|
|
6392
6398
|
position: absolute;
|
|
6393
6399
|
left: 0;
|
|
6394
6400
|
top: 0;
|
|
@@ -6402,11 +6408,13 @@ pre {
|
|
|
6402
6408
|
}
|
|
6403
6409
|
.rf-text-field--adorned-start:not(.rf-text-field--floating) .rf-text-field__label:not(.rf-text-field__wrapper:focus-within .rf-text-field__label):not(.rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label) {
|
|
6404
6410
|
transform: translate(36px, 16px) scale(1);
|
|
6411
|
+
max-width: calc(100% - 50px);
|
|
6405
6412
|
}
|
|
6406
6413
|
.rf-text-field--floating .rf-text-field__label,
|
|
6407
6414
|
.rf-text-field__wrapper:focus-within .rf-text-field__label,
|
|
6408
6415
|
.rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
|
|
6409
6416
|
transform: translate(14px, -9px) scale(0.75);
|
|
6417
|
+
max-width: calc(133% - 32px);
|
|
6410
6418
|
}
|
|
6411
6419
|
.rf-text-field__wrapper:focus-within .rf-text-field__label {
|
|
6412
6420
|
color: var(--tf-primary-color);
|
|
@@ -6518,6 +6526,7 @@ pre {
|
|
|
6518
6526
|
.rf-text-field--filled .rf-text-field__wrapper:focus-within .rf-text-field__label,
|
|
6519
6527
|
.rf-text-field--filled .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
|
|
6520
6528
|
transform: translate(12px, 7px) scale(0.75);
|
|
6529
|
+
max-width: calc(133% - 32px);
|
|
6521
6530
|
}
|
|
6522
6531
|
.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper {
|
|
6523
6532
|
background-color: rgba(0, 0, 0, 0.04);
|
|
@@ -6545,6 +6554,7 @@ pre {
|
|
|
6545
6554
|
.rf-text-field--standard .rf-text-field__wrapper:focus-within .rf-text-field__label,
|
|
6546
6555
|
.rf-text-field--standard .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
|
|
6547
6556
|
transform: translate(0, 1.5px) scale(0.75);
|
|
6557
|
+
max-width: calc(133% - 32px);
|
|
6548
6558
|
}
|
|
6549
6559
|
.rf-text-field--standard .rf-text-field__wrapper::after {
|
|
6550
6560
|
left: 0;
|
|
@@ -6607,6 +6617,7 @@ pre {
|
|
|
6607
6617
|
.rf-text-field--small.rf-text-field--outlined .rf-text-field__wrapper:focus-within .rf-text-field__label,
|
|
6608
6618
|
.rf-text-field--small.rf-text-field--outlined .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
|
|
6609
6619
|
transform: translate(14px, -9px) scale(0.75);
|
|
6620
|
+
max-width: calc(133% - 32px);
|
|
6610
6621
|
}
|
|
6611
6622
|
.rf-text-field--small.rf-text-field--filled .rf-text-field__input {
|
|
6612
6623
|
padding: 21px 12px 4px;
|
|
@@ -6621,6 +6632,7 @@ pre {
|
|
|
6621
6632
|
.rf-text-field--small.rf-text-field--filled .rf-text-field__wrapper:focus-within .rf-text-field__label,
|
|
6622
6633
|
.rf-text-field--small.rf-text-field--filled .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
|
|
6623
6634
|
transform: translate(12px, 7px) scale(0.75);
|
|
6635
|
+
max-width: calc(133% - 32px);
|
|
6624
6636
|
}
|
|
6625
6637
|
.rf-text-field__input[type=number]::-webkit-inner-spin-button,
|
|
6626
6638
|
.rf-text-field__input[type=number]::-webkit-outer-spin-button {
|
|
@@ -6692,6 +6704,31 @@ pre {
|
|
|
6692
6704
|
.rf-text-field--compact.rf-text-field--disabled .rf-text-field__wrapper:hover {
|
|
6693
6705
|
border-color: rgba(0, 0, 0, 0.12);
|
|
6694
6706
|
}
|
|
6707
|
+
.rf-text-field--multiline .rf-text-field__wrapper {
|
|
6708
|
+
align-items: flex-start;
|
|
6709
|
+
height: auto;
|
|
6710
|
+
}
|
|
6711
|
+
.rf-text-field__textarea {
|
|
6712
|
+
resize: vertical;
|
|
6713
|
+
height: auto;
|
|
6714
|
+
min-height: 56px;
|
|
6715
|
+
line-height: 1.5;
|
|
6716
|
+
padding-top: 16.5px;
|
|
6717
|
+
padding-bottom: 16.5px;
|
|
6718
|
+
overflow-y: auto;
|
|
6719
|
+
}
|
|
6720
|
+
.rf-text-field--small .rf-text-field__textarea {
|
|
6721
|
+
padding-top: 8.5px;
|
|
6722
|
+
padding-bottom: 8.5px;
|
|
6723
|
+
min-height: 38px;
|
|
6724
|
+
}
|
|
6725
|
+
.rf-text-field--multiline .rf-text-field__label {
|
|
6726
|
+
transform-origin: left top;
|
|
6727
|
+
}
|
|
6728
|
+
.rf-text-field--multiline .rf-text-field__notch {
|
|
6729
|
+
top: 0;
|
|
6730
|
+
height: 100%;
|
|
6731
|
+
}
|
|
6695
6732
|
|
|
6696
6733
|
/* lib/styles/rufous-text-editor.css */
|
|
6697
6734
|
.rf-rte-wrapper {
|
package/dist/main.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, ReactElement, ComponentType } from 'react';
|
|
2
|
+
import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, ComponentType } from 'react';
|
|
3
3
|
|
|
4
4
|
declare const APP_THEMES: {
|
|
5
5
|
default: {
|
|
@@ -554,6 +554,7 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
|
|
|
554
554
|
/** Props applied to the `input` element natively. */
|
|
555
555
|
slotProps?: {
|
|
556
556
|
input?: InputHTMLAttributes<HTMLInputElement>;
|
|
557
|
+
textarea?: TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
557
558
|
};
|
|
558
559
|
/** Optional class name to apply to the outer wrapper */
|
|
559
560
|
className?: string;
|
|
@@ -561,6 +562,21 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
|
|
|
561
562
|
style?: CSSProperties;
|
|
562
563
|
/** Scoped style overrides. Supports nested CSS selectors with & */
|
|
563
564
|
sx?: SxProp;
|
|
565
|
+
/**
|
|
566
|
+
* Renders a `<textarea>` instead of `<input>`.
|
|
567
|
+
* Use together with `rows` to control height.
|
|
568
|
+
*/
|
|
569
|
+
multiline?: boolean;
|
|
570
|
+
/**
|
|
571
|
+
* Number of visible text rows. Setting this to > 1 automatically
|
|
572
|
+
* enables multiline mode. Defaults to 4 when `multiline` is true.
|
|
573
|
+
*/
|
|
574
|
+
rows?: number;
|
|
575
|
+
/**
|
|
576
|
+
* Maximum number of rows before a scrollbar appears.
|
|
577
|
+
* When set, the textarea grows up to this many rows then scrolls.
|
|
578
|
+
*/
|
|
579
|
+
maxRows?: number;
|
|
564
580
|
}
|
|
565
581
|
declare const TextField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
566
582
|
|
package/dist/main.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, ReactElement, ComponentType } from 'react';
|
|
2
|
+
import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, ComponentType } from 'react';
|
|
3
3
|
|
|
4
4
|
declare const APP_THEMES: {
|
|
5
5
|
default: {
|
|
@@ -554,6 +554,7 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
|
|
|
554
554
|
/** Props applied to the `input` element natively. */
|
|
555
555
|
slotProps?: {
|
|
556
556
|
input?: InputHTMLAttributes<HTMLInputElement>;
|
|
557
|
+
textarea?: TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
557
558
|
};
|
|
558
559
|
/** Optional class name to apply to the outer wrapper */
|
|
559
560
|
className?: string;
|
|
@@ -561,6 +562,21 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
|
|
|
561
562
|
style?: CSSProperties;
|
|
562
563
|
/** Scoped style overrides. Supports nested CSS selectors with & */
|
|
563
564
|
sx?: SxProp;
|
|
565
|
+
/**
|
|
566
|
+
* Renders a `<textarea>` instead of `<input>`.
|
|
567
|
+
* Use together with `rows` to control height.
|
|
568
|
+
*/
|
|
569
|
+
multiline?: boolean;
|
|
570
|
+
/**
|
|
571
|
+
* Number of visible text rows. Setting this to > 1 automatically
|
|
572
|
+
* enables multiline mode. Defaults to 4 when `multiline` is true.
|
|
573
|
+
*/
|
|
574
|
+
rows?: number;
|
|
575
|
+
/**
|
|
576
|
+
* Maximum number of rows before a scrollbar appears.
|
|
577
|
+
* When set, the textarea grows up to this many rows then scrolls.
|
|
578
|
+
*/
|
|
579
|
+
maxRows?: number;
|
|
564
580
|
}
|
|
565
581
|
declare const TextField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
566
582
|
|
package/dist/main.js
CHANGED
|
@@ -1597,7 +1597,9 @@ var Checkbox = ({
|
|
|
1597
1597
|
};
|
|
1598
1598
|
|
|
1599
1599
|
// lib/TextFields/TextField.tsx
|
|
1600
|
-
import React68, {
|
|
1600
|
+
import React68, {
|
|
1601
|
+
forwardRef as forwardRef3
|
|
1602
|
+
} from "react";
|
|
1601
1603
|
var NUMBER_BLOCKED_KEYS = ["e", "E", "+", "-"];
|
|
1602
1604
|
var BLOCKED_KEYS_BY_VARIANT = {
|
|
1603
1605
|
"integer": [...NUMBER_BLOCKED_KEYS, ".", ","],
|
|
@@ -1639,15 +1641,20 @@ var TextField = forwardRef3(({
|
|
|
1639
1641
|
slotProps,
|
|
1640
1642
|
InputProps,
|
|
1641
1643
|
numberVariant,
|
|
1644
|
+
multiline = false,
|
|
1645
|
+
rows,
|
|
1646
|
+
maxRows,
|
|
1642
1647
|
...props
|
|
1643
1648
|
}, ref) => {
|
|
1644
1649
|
const sxClass = useSx(sx);
|
|
1645
|
-
const inputId = id || name || `tf-${Math.random().toString(36).
|
|
1650
|
+
const inputId = id || name || `tf-${Math.random().toString(36).substring(2, 11)}`;
|
|
1651
|
+
const isTextarea = multiline || rows !== void 0 && rows > 1;
|
|
1652
|
+
const resolvedRows = rows ?? (multiline ? 4 : void 0);
|
|
1646
1653
|
const isFloating = Boolean(
|
|
1647
1654
|
value !== void 0 && value !== "" || type === "date" || type === "time" || type === "datetime-local"
|
|
1648
1655
|
);
|
|
1649
1656
|
const hasLabel = Boolean(label);
|
|
1650
|
-
const readOnly = slotProps?.input?.readOnly;
|
|
1657
|
+
const readOnly = isTextarea ? slotProps?.textarea?.readOnly : slotProps?.input?.readOnly;
|
|
1651
1658
|
const rootClasses = [
|
|
1652
1659
|
"rf-text-field",
|
|
1653
1660
|
`rf-text-field--${variant}`,
|
|
@@ -1660,7 +1667,8 @@ var TextField = forwardRef3(({
|
|
|
1660
1667
|
hasLabel ? "rf-text-field--has-label" : "",
|
|
1661
1668
|
InputProps?.startAdornment ? "rf-text-field--adorned-start" : "",
|
|
1662
1669
|
InputProps?.endAdornment ? "rf-text-field--adorned-end" : "",
|
|
1663
|
-
|
|
1670
|
+
isTextarea ? "rf-text-field--multiline" : "",
|
|
1671
|
+
!isTextarea && type === "number" && !disabled && !readOnly ? "rf-text-field--has-number-controls" : "",
|
|
1664
1672
|
sxClass,
|
|
1665
1673
|
className
|
|
1666
1674
|
].filter(Boolean).join(" ");
|
|
@@ -1735,11 +1743,26 @@ var TextField = forwardRef3(({
|
|
|
1735
1743
|
}
|
|
1736
1744
|
}
|
|
1737
1745
|
}
|
|
1738
|
-
if (props.onKeyDown)
|
|
1739
|
-
props.onKeyDown(e);
|
|
1740
|
-
}
|
|
1746
|
+
if (props.onKeyDown) props.onKeyDown(e);
|
|
1741
1747
|
};
|
|
1742
|
-
|
|
1748
|
+
const textareaStyle = maxRows ? { maxHeight: `calc(${maxRows} * var(--tf-line-height, 1.5em) + var(--tf-textarea-vpad, 18px) * 2)`, overflowY: "auto" } : {};
|
|
1749
|
+
return /* @__PURE__ */ React68.createElement("div", { ref, className: rootClasses, style }, /* @__PURE__ */ React68.createElement("div", { className: `rf-text-field__wrapper ${InputProps?.className || ""}`, style: InputProps?.style }, InputProps?.startAdornment && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--start" }, InputProps.startAdornment), isTextarea ? /* @__PURE__ */ React68.createElement(
|
|
1750
|
+
"textarea",
|
|
1751
|
+
{
|
|
1752
|
+
id: inputId,
|
|
1753
|
+
name,
|
|
1754
|
+
className: "rf-text-field__input rf-text-field__textarea",
|
|
1755
|
+
placeholder: placeholder || (variant === "outlined" ? " " : void 0),
|
|
1756
|
+
value,
|
|
1757
|
+
rows: resolvedRows,
|
|
1758
|
+
required,
|
|
1759
|
+
disabled,
|
|
1760
|
+
readOnly,
|
|
1761
|
+
style: textareaStyle,
|
|
1762
|
+
...slotProps?.textarea,
|
|
1763
|
+
onChange
|
|
1764
|
+
}
|
|
1765
|
+
) : /* @__PURE__ */ React68.createElement(
|
|
1743
1766
|
"input",
|
|
1744
1767
|
{
|
|
1745
1768
|
ref: internalRef,
|
|
@@ -1759,7 +1782,7 @@ var TextField = forwardRef3(({
|
|
|
1759
1782
|
...props,
|
|
1760
1783
|
onChange: handleChange
|
|
1761
1784
|
}
|
|
1762
|
-
), InputProps?.endAdornment && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ React68.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React68.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ React68.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React68.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
1785
|
+
), InputProps?.endAdornment && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), !isTextarea && type === "number" && !disabled && !readOnly && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ React68.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React68.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ React68.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React68.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
|
|
1763
1786
|
});
|
|
1764
1787
|
TextField.displayName = "TextField";
|
|
1765
1788
|
|