armtek-uikit-react 1.0.262 → 1.0.265
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/assets/Accordion.scss +123 -123
- package/assets/Adornment.scss +22 -22
- package/assets/Alert.scss +56 -56
- package/assets/Avatar.scss +111 -111
- package/assets/AvatarGroup.scss +47 -47
- package/assets/BackDrop.scss +39 -39
- package/assets/Badge.scss +96 -96
- package/assets/Button.scss +750 -750
- package/assets/ButtonGroup.scss +37 -37
- package/assets/ButtonIcon.scss +59 -32
- package/assets/Card.scss +13 -13
- package/assets/Checkbox.scss +313 -313
- package/assets/Chip.scss +327 -327
- package/assets/DateField.scss +2 -2
- package/assets/DatePicker.scss +72 -72
- package/assets/Dropdown.scss +42 -42
- package/assets/FormControls.scss +14 -14
- package/assets/HelperText.scss +11 -11
- package/assets/Icon.scss +30 -30
- package/assets/Interval.scss +34 -34
- package/assets/Link.scss +96 -96
- package/assets/ListItem.scss +76 -76
- package/assets/Loader.scss +56 -56
- package/assets/Logo.scss +28 -28
- package/assets/Modal.scss +103 -103
- package/assets/Pagination.scss +3 -3
- package/assets/Paper.scss +22 -22
- package/assets/Period.scss +8 -8
- package/assets/Popper.scss +2 -2
- package/assets/Rating.scss +26 -26
- package/assets/Select.scss +85 -85
- package/assets/Skeleton.scss +25 -25
- package/assets/Slider.scss +5 -5
- package/assets/Stack.scss +27 -27
- package/assets/Status.scss +69 -69
- package/assets/StepItem.scss +89 -89
- package/assets/StepItemIcon.scss +47 -47
- package/assets/Stepper.scss +30 -30
- package/assets/Switch.scss +67 -67
- package/assets/Table.scss +52 -52
- package/assets/TextArea.scss +17 -17
- package/assets/TextField.scss +197 -197
- package/assets/Tooltip.scss +17 -17
- package/assets/classes.scss +422 -422
- package/assets/fonts.scss +24 -24
- package/assets/global.scss +222 -222
- package/assets/styles.min.css +1 -1
- package/assets/styles.min.css.map +1 -1
- package/assets/styles.scss +46 -46
- package/assets/variables.scss +13 -13
- package/lib/helpers/helpers.d.ts +1 -1
- package/lib/helpers/helpers.js +1 -1
- package/lib/hooks/useEnhancedEffect.js +6 -6
- package/lib/hooks/useTimeout.js +2 -2
- package/package.json +1 -1
- package/ui/Avatar/Avatar.d.ts +10 -1
- package/ui/Avatar/Avatar.js +4 -2
- package/ui/ButtonIcon/ButtonIcon.js +5 -2
- package/ui/Card/Card.d.ts +1 -1
- package/ui/Card/Card.js +4 -2
- package/ui/Chip/Chip.d.ts +3 -2
- package/ui/Chip/Chip.js +4 -2
- package/ui/Form/DateField/DateField.js +2 -2
- package/ui/Form/DatePicker/styles.css +802 -802
- package/ui/Form/TextArea/TextArea.d.ts +7 -1
- package/ui/Form/TextArea/TextArea.js +37 -6
- package/ui/Icon/Mi.d.ts +17 -1
- package/ui/Icon/Mi.js +5 -3
- package/ui/Icon/Mis.d.ts +1 -1
- package/ui/Icon/Mis.js +4 -3
- package/ui/Link/Link.d.ts +3 -2
- package/ui/Link/Link.js +4 -2
- package/ui/Slider/style.scss +346 -346
- package/ui/Stack/Stack.d.ts +1 -1
- package/ui/Stack/Stack.js +3 -2
- package/ui/Status/Status.d.ts +4 -3
- package/ui/Status/Status.js +4 -2
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { TextFieldProps } from '../TextField/TextField';
|
|
2
|
-
export type TextAreaProps = {
|
|
2
|
+
export type TextAreaProps = {
|
|
3
|
+
minRows?: number;
|
|
4
|
+
maxRows?: number;
|
|
5
|
+
} & TextFieldProps;
|
|
3
6
|
declare const TextArea: import("react").ForwardRefExoticComponent<{
|
|
7
|
+
minRows?: number;
|
|
8
|
+
maxRows?: number;
|
|
9
|
+
} & {
|
|
4
10
|
label?: string;
|
|
5
11
|
size?: Exclude<import("../../../types/theme").SizeType, "extraLarge" | "medium">;
|
|
6
12
|
variant?: import("../../../types/theme").VariantType;
|
|
@@ -9,24 +9,55 @@ var _react = require("react");
|
|
|
9
9
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
11
|
const TextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
12
|
-
var _textareaRef$current, _textareaRef$current2;
|
|
13
12
|
let {
|
|
14
13
|
className,
|
|
14
|
+
minRows,
|
|
15
|
+
maxRows,
|
|
16
|
+
onInput,
|
|
17
|
+
style,
|
|
15
18
|
...restProps
|
|
16
19
|
} = props;
|
|
17
|
-
let [minHeight, setMinHeight] = (0, _react.useState)(0);
|
|
18
20
|
let textareaRef = (0, _react.useRef)(null);
|
|
19
21
|
(0, _react.useImperativeHandle)(ref, () => {
|
|
20
22
|
return textareaRef.current;
|
|
21
23
|
}, []);
|
|
24
|
+
const getRowsCount = rows => {
|
|
25
|
+
if (typeof rows !== 'number' || !Number.isFinite(rows)) return undefined;
|
|
26
|
+
return Math.max(1, Math.floor(rows));
|
|
27
|
+
};
|
|
28
|
+
const getHeightByRows = (rows, textarea) => {
|
|
29
|
+
const style = window.getComputedStyle(textarea);
|
|
30
|
+
const parsedLineHeight = parseFloat(style.lineHeight);
|
|
31
|
+
const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
|
|
32
|
+
const verticalPadding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
|
|
33
|
+
const verticalBorders = (parseFloat(style.borderTopWidth) || 0) + (parseFloat(style.borderBottomWidth) || 0);
|
|
34
|
+
return lineHeight * rows + verticalPadding + verticalBorders;
|
|
35
|
+
};
|
|
36
|
+
const resizeTextarea = () => {
|
|
37
|
+
if (!textareaRef.current) return;
|
|
38
|
+
const textarea = textareaRef.current;
|
|
39
|
+
const minRowsValue = getRowsCount(minRows) || 1;
|
|
40
|
+
const maxRowsValue = getRowsCount(maxRows);
|
|
41
|
+
const resolvedMaxRows = maxRowsValue !== undefined ? Math.max(minRowsValue, maxRowsValue) : undefined;
|
|
42
|
+
const minHeight = getHeightByRows(minRowsValue, textarea);
|
|
43
|
+
const maxHeight = resolvedMaxRows !== undefined ? getHeightByRows(resolvedMaxRows, textarea) : undefined;
|
|
44
|
+
textarea.style.height = 'auto';
|
|
45
|
+
let nextHeight = Math.max(textarea.scrollHeight, minHeight);
|
|
46
|
+
if (maxHeight !== undefined) nextHeight = Math.min(nextHeight, maxHeight);
|
|
47
|
+
textarea.style.height = nextHeight + 'px';
|
|
48
|
+
};
|
|
22
49
|
(0, _react.useEffect)(() => {
|
|
23
|
-
|
|
24
|
-
}, [
|
|
25
|
-
|
|
50
|
+
resizeTextarea();
|
|
51
|
+
}, [minRows, maxRows, props.value, props.defaultValue, props.size]);
|
|
52
|
+
const handleInput = event => {
|
|
53
|
+
resizeTextarea();
|
|
54
|
+
if (onInput) onInput(event);
|
|
55
|
+
};
|
|
26
56
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
27
57
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
|
|
28
58
|
ref: textareaRef,
|
|
29
59
|
...restProps,
|
|
60
|
+
onInput: handleInput,
|
|
30
61
|
className: (0, _clsx.default)('arm-textarea', ['arm-textarea_size_' + restProps.size], className),
|
|
31
62
|
multiline: true,
|
|
32
63
|
classes: {
|
|
@@ -34,7 +65,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
34
65
|
...restProps.classes
|
|
35
66
|
},
|
|
36
67
|
style: {
|
|
37
|
-
|
|
68
|
+
...style
|
|
38
69
|
}
|
|
39
70
|
})
|
|
40
71
|
});
|
package/ui/Icon/Mi.d.ts
CHANGED
|
@@ -3,4 +3,20 @@ import { TooltipProps } from '../../ui/Tooltip';
|
|
|
3
3
|
export type MiProps = {
|
|
4
4
|
tooltipProps?: Omit<TooltipProps, 'text' | 'children'>;
|
|
5
5
|
} & IconProps;
|
|
6
|
-
export declare const Mi:
|
|
6
|
+
export declare const Mi: import("react").ForwardRefExoticComponent<{
|
|
7
|
+
tooltipProps?: Omit<TooltipProps, "text" | "children">;
|
|
8
|
+
} & {
|
|
9
|
+
icon: string;
|
|
10
|
+
variant?: import("../../types/theme").VariantType;
|
|
11
|
+
color?: import("../../types/theme").ColorType | import("../../types/theme").ColorStatusType;
|
|
12
|
+
size?: import("../../types/theme").SizeType;
|
|
13
|
+
theme?: import("../../types/theme").ThemeType;
|
|
14
|
+
fs?: number;
|
|
15
|
+
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof {
|
|
16
|
+
icon: string;
|
|
17
|
+
variant?: import("../../types/theme").VariantType;
|
|
18
|
+
color?: import("../../types/theme").ColorType | import("../../types/theme").ColorStatusType;
|
|
19
|
+
size?: import("../../types/theme").SizeType;
|
|
20
|
+
theme?: import("../../types/theme").ThemeType;
|
|
21
|
+
fs?: number;
|
|
22
|
+
}> & import("react").RefAttributes<HTMLSpanElement>>;
|
package/ui/Icon/Mi.js
CHANGED
|
@@ -5,8 +5,9 @@ exports.__esModule = true;
|
|
|
5
5
|
exports.Mi = void 0;
|
|
6
6
|
var _Icon = _interopRequireDefault(require("./Icon"));
|
|
7
7
|
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
|
|
8
|
+
var _react = require("react");
|
|
8
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const Mi = props => {
|
|
10
|
+
const Mi = exports.Mi = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
10
11
|
const {
|
|
11
12
|
tooltipProps,
|
|
12
13
|
title,
|
|
@@ -17,13 +18,14 @@ const Mi = props => {
|
|
|
17
18
|
...tooltipProps,
|
|
18
19
|
text: title,
|
|
19
20
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
21
|
+
ref: ref,
|
|
20
22
|
variant: 'outlined',
|
|
21
23
|
...iconProps
|
|
22
24
|
})
|
|
23
25
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
26
|
+
ref: ref,
|
|
24
27
|
variant: 'outlined',
|
|
25
28
|
...iconProps
|
|
26
29
|
})
|
|
27
30
|
});
|
|
28
|
-
};
|
|
29
|
-
exports.Mi = Mi;
|
|
31
|
+
});
|
package/ui/Icon/Mis.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { MiProps } from './Mi';
|
|
2
|
-
export declare const Mis: (
|
|
2
|
+
export declare const Mis: import("react").ForwardRefExoticComponent<Omit<MiProps, "variant"> & import("react").RefAttributes<HTMLSpanElement>>;
|
package/ui/Icon/Mis.js
CHANGED
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.Mis = void 0;
|
|
5
5
|
var _Mi = require("./Mi");
|
|
6
|
+
var _react = require("react");
|
|
6
7
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
7
|
-
const Mis = props => {
|
|
8
|
+
const Mis = exports.Mis = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
8
9
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
9
10
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Mi.Mi, {
|
|
10
11
|
...props,
|
|
12
|
+
ref: ref,
|
|
11
13
|
variant: 'contained'
|
|
12
14
|
})
|
|
13
15
|
});
|
|
14
|
-
};
|
|
15
|
-
exports.Mis = Mis;
|
|
16
|
+
});
|
package/ui/Link/Link.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ElementType } from 'react';
|
|
1
|
+
import { ComponentPropsWithoutRef, ElementType, ReactElement, RefAttributes } from 'react';
|
|
2
2
|
import { ColorStatusType, ColorType, SizeType, ThemeType } from '../../types/theme';
|
|
3
3
|
type LinkType = 'a';
|
|
4
4
|
type OwnProps<T extends ElementType = LinkType> = {
|
|
@@ -11,5 +11,6 @@ type OwnProps<T extends ElementType = LinkType> = {
|
|
|
11
11
|
disablestyles?: string;
|
|
12
12
|
};
|
|
13
13
|
export type LinkProps<T extends ElementType = LinkType> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
|
|
14
|
-
|
|
14
|
+
type LinkComponent = <T extends ElementType = LinkType>(props: LinkProps<T> & RefAttributes<HTMLElement>) => ReactElement | null;
|
|
15
|
+
declare const Link: LinkComponent;
|
|
15
16
|
export default Link;
|
package/ui/Link/Link.js
CHANGED
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
exports.__esModule = true;
|
|
5
5
|
exports.default = void 0;
|
|
6
|
+
var _react = require("react");
|
|
6
7
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
7
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
-
const Link = props => {
|
|
9
|
+
const Link = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
9
10
|
let {
|
|
10
11
|
border,
|
|
11
12
|
children,
|
|
@@ -32,12 +33,13 @@ const Link = props => {
|
|
|
32
33
|
} : {};
|
|
33
34
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
34
35
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
|
|
36
|
+
ref: ref,
|
|
35
37
|
...restProps,
|
|
36
38
|
...polymorphProps,
|
|
37
39
|
className: !disablestyles ? classNames : className,
|
|
38
40
|
children: children
|
|
39
41
|
})
|
|
40
42
|
});
|
|
41
|
-
};
|
|
43
|
+
});
|
|
42
44
|
var _default = exports.default = Link;
|
|
43
45
|
module.exports = exports.default;
|