@yakad/ui 1.3.159 → 1.3.161
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/ActiveOnVisible/ActiveOnVisible.d.ts +2 -1
- package/dist/ActiveOnVisible/ActiveOnVisible.js +5 -5
- package/dist/AppBar/AppBar.d.ts +2 -1
- package/dist/AppBar/AppBar.js +4 -4
- package/dist/Avatar/Avatar.d.ts +2 -2
- package/dist/Avatar/Avatar.js +3 -5
- package/dist/Button/Button.d.ts +2 -1
- package/dist/Button/Button.js +3 -4
- package/dist/Card/Card.d.ts +2 -1
- package/dist/Card/Card.js +3 -4
- package/dist/CheckBox/CheckBox.d.ts +2 -1
- package/dist/CheckBox/CheckBox.js +3 -4
- package/dist/CodeBox/CodeBox.d.ts +4 -2
- package/dist/CodeBox/CodeBox.js +3 -4
- package/dist/CodeField/CodeField.d.ts +2 -1
- package/dist/CodeField/CodeField.js +7 -6
- package/dist/Container/Container.d.ts +2 -1
- package/dist/Container/Container.js +3 -4
- package/dist/Display/Display.d.ts +4 -2
- package/dist/Display/Display.js +3 -4
- package/dist/Dropdown/Dropdown.d.ts +3 -1
- package/dist/Dropdown/Dropdown.js +5 -5
- package/dist/Footer/Footer.d.ts +3 -1
- package/dist/Footer/Footer.js +4 -4
- package/dist/Form/Form.d.ts +3 -1
- package/dist/Form/Form.js +3 -4
- package/dist/GridContainer/GridContainer.d.ts +3 -1
- package/dist/GridContainer/GridContainer.js +3 -4
- package/dist/GridItem/GridItem.d.ts +3 -1
- package/dist/GridItem/GridItem.js +3 -4
- package/dist/Hr/Hr.d.ts +3 -1
- package/dist/Hr/Hr.js +3 -4
- package/dist/InputField/InputField.d.ts +2 -1
- package/dist/InputField/InputField.js +3 -4
- package/dist/List/List.d.ts +3 -1
- package/dist/List/List.js +3 -4
- package/dist/ListItem/ListItem.d.ts +3 -1
- package/dist/ListItem/ListItem.js +3 -4
- package/dist/LoadingIcon/LoadingIcon.d.ts +3 -1
- package/dist/LoadingIcon/LoadingIcon.js +3 -4
- package/dist/Main/Main.d.ts +3 -1
- package/dist/Main/Main.js +3 -4
- package/dist/Navigation/Navigation.d.ts +3 -1
- package/dist/Navigation/Navigation.js +3 -4
- package/dist/Popup/Popup.d.ts +2 -1
- package/dist/Popup/Popup.js +5 -5
- package/dist/RadioButton/RadioButton.d.ts +2 -1
- package/dist/RadioButton/RadioButton.js +3 -4
- package/dist/RadioGroup/RadioGroup.d.ts +3 -1
- package/dist/RadioGroup/RadioGroup.js +4 -4
- package/dist/RenderByScroll/RenderByScroll.d.ts +3 -1
- package/dist/RenderByScroll/RenderByScroll.js +4 -4
- package/dist/Row/Row.d.ts +3 -1
- package/dist/Row/Row.js +3 -4
- package/dist/Screen/Screen.d.ts +3 -1
- package/dist/Screen/Screen.js +3 -4
- package/dist/Select/Select.d.ts +3 -1
- package/dist/Select/Select.js +3 -4
- package/dist/Spacer/Spacer.d.ts +3 -1
- package/dist/Spacer/Spacer.js +3 -4
- package/dist/Stack/Stack.d.ts +2 -1
- package/dist/Stack/Stack.js +3 -4
- package/dist/SvgIcon/SvgIcon.d.ts +3 -1
- package/dist/SvgIcon/SvgIcon.js +3 -4
- package/dist/Table/Table.d.ts +21 -7
- package/dist/Table/Table.js +21 -22
- package/dist/Text/Text.d.ts +11 -10
- package/dist/Text/Text.js +45 -46
- package/dist/Theme/Theme.d.ts +2 -1
- package/dist/Theme/Theme.js +4 -4
- package/dist/WithOverlay/WithOverlay.d.ts +2 -1
- package/dist/WithOverlay/WithOverlay.js +5 -5
- package/package.json +1 -1
package/dist/Text/Text.js
CHANGED
|
@@ -10,78 +10,77 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { forwardRef } from "react";
|
|
14
13
|
import classNames from "classnames";
|
|
15
14
|
import styles from "./Text.module.css";
|
|
16
|
-
export
|
|
17
|
-
var { variant = "heading1",
|
|
15
|
+
export function H1(_a) {
|
|
16
|
+
var { variant = "heading1", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
18
17
|
const joinedClassNames = classNames(styles.text, styles[variant], {
|
|
19
|
-
[styles.onSurfaceColor]:
|
|
20
|
-
[styles.onSurfaceVariantColor]:
|
|
18
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
19
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
21
20
|
}, className);
|
|
22
21
|
return (_jsx("h1", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
23
|
-
}
|
|
24
|
-
export
|
|
25
|
-
var { variant = "heading2",
|
|
22
|
+
}
|
|
23
|
+
export function H2(_a) {
|
|
24
|
+
var { variant = "heading2", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
26
25
|
const joinedClassNames = classNames(styles.text, styles[variant], {
|
|
27
|
-
[styles.onSurfaceColor]:
|
|
28
|
-
[styles.onSurfaceVariantColor]:
|
|
26
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
27
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
29
28
|
}, className);
|
|
30
29
|
return (_jsx("h2", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
31
|
-
}
|
|
32
|
-
export
|
|
33
|
-
var { variant = "heading3",
|
|
30
|
+
}
|
|
31
|
+
export function H3(_a) {
|
|
32
|
+
var { variant = "heading3", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
34
33
|
const joinedClassNames = classNames(styles.text, styles[variant], {
|
|
35
|
-
[styles.onSurfaceColor]:
|
|
36
|
-
[styles.onSurfaceVariantColor]:
|
|
34
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
35
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
37
36
|
}, className);
|
|
38
37
|
return (_jsx("h3", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
39
|
-
}
|
|
40
|
-
export
|
|
41
|
-
var { variant = "heading4",
|
|
38
|
+
}
|
|
39
|
+
export function H4(_a) {
|
|
40
|
+
var { variant = "heading4", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
42
41
|
const joinedClassNames = classNames(styles.text, styles[variant], {
|
|
43
|
-
[styles.onSurfaceColor]:
|
|
44
|
-
[styles.onSurfaceVariantColor]:
|
|
42
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
43
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
45
44
|
}, className);
|
|
46
45
|
return (_jsx("h4", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
47
|
-
}
|
|
48
|
-
export
|
|
49
|
-
var { variant = "heading5",
|
|
46
|
+
}
|
|
47
|
+
export function H5(_a) {
|
|
48
|
+
var { variant = "heading5", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
50
49
|
const joinedClassNames = classNames(styles.text, styles[variant], {
|
|
51
|
-
[styles.onSurfaceColor]:
|
|
52
|
-
[styles.onSurfaceVariantColor]:
|
|
50
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
51
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
53
52
|
}, className);
|
|
54
53
|
return (_jsx("h5", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
55
|
-
}
|
|
56
|
-
export
|
|
57
|
-
var { variant = "heading6",
|
|
54
|
+
}
|
|
55
|
+
export function H6(_a) {
|
|
56
|
+
var { variant = "heading6", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
58
57
|
const joinedClassNames = classNames(styles.text, styles[variant], {
|
|
59
|
-
[styles.onSurfaceColor]:
|
|
60
|
-
[styles.onSurfaceVariantColor]:
|
|
58
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
59
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
61
60
|
}, className);
|
|
62
61
|
return (_jsx("h6", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
63
|
-
}
|
|
64
|
-
export
|
|
65
|
-
var { variant = "body5",
|
|
62
|
+
}
|
|
63
|
+
export function P(_a) {
|
|
64
|
+
var { variant = "body5", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
66
65
|
const joinedClassNames = classNames(styles.text, styles[variant], {
|
|
67
|
-
[styles.onSurfaceColor]:
|
|
68
|
-
[styles.onSurfaceVariantColor]:
|
|
66
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
67
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
69
68
|
}, className);
|
|
70
69
|
return (_jsx("p", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
71
|
-
}
|
|
72
|
-
export
|
|
73
|
-
var { variant = "span",
|
|
70
|
+
}
|
|
71
|
+
export function Span(_a) {
|
|
72
|
+
var { variant = "span", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
74
73
|
const joinedClassNames = classNames(styles.text, styles[variant], {
|
|
75
|
-
[styles.onSurfaceColor]:
|
|
76
|
-
[styles.onSurfaceVariantColor]:
|
|
74
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
75
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
77
76
|
}, className);
|
|
78
77
|
return (_jsx("span", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
79
|
-
}
|
|
80
|
-
export
|
|
81
|
-
var { variant = "body5",
|
|
78
|
+
}
|
|
79
|
+
export function Text(_a) {
|
|
80
|
+
var { variant = "body5", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
|
|
82
81
|
const joinedClassNames = classNames(styles[variant], {
|
|
83
|
-
[styles.onSurfaceColor]:
|
|
84
|
-
[styles.onSurfaceVariantColor]:
|
|
82
|
+
[styles.onSurfaceColor]: palette === "onSurfaceColor",
|
|
83
|
+
[styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
|
|
85
84
|
}, className);
|
|
86
85
|
return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
87
|
-
}
|
|
86
|
+
}
|
package/dist/Theme/Theme.d.ts
CHANGED
|
@@ -8,5 +8,6 @@ export interface ThemeProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
color?: ThemeColor;
|
|
9
9
|
zoom?: number;
|
|
10
10
|
children?: React.ReactNode;
|
|
11
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
11
12
|
}
|
|
12
|
-
export declare
|
|
13
|
+
export declare function Theme({ align, darkStyle, color, zoom, className, children, ref, ...restProps }: ThemeProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/Theme/Theme.js
CHANGED
|
@@ -11,17 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
return t;
|
|
12
12
|
};
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
import {
|
|
14
|
+
import { useEffect } from "react";
|
|
15
15
|
import classNames from "classnames";
|
|
16
16
|
import "./globals.css";
|
|
17
17
|
import styles from "./Theme.module.css";
|
|
18
18
|
import boxingStyles from "../boxing.module.css";
|
|
19
|
-
export
|
|
20
|
-
var { align, darkStyle = "system", color = "blue", zoom = 100, className, children } = _a, restProps = __rest(_a, ["align", "darkStyle", "color", "zoom", "className", "children"]);
|
|
19
|
+
export function Theme(_a) {
|
|
20
|
+
var { align, darkStyle = "system", color = "blue", zoom = 100, className, children, ref } = _a, restProps = __rest(_a, ["align", "darkStyle", "color", "zoom", "className", "children", "ref"]);
|
|
21
21
|
const zoomPercentage = zoom ? (zoom / 100) * 62.5 : 62.5;
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
|
|
24
24
|
}, [zoomPercentage]);
|
|
25
25
|
const joinedClassNames = classNames({ portalRoot: true }, boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.theme, styles[darkStyle], styles[color], className);
|
|
26
26
|
return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
|
|
27
|
-
}
|
|
27
|
+
}
|
|
@@ -9,6 +9,7 @@ export interface WithOverlayProps extends StackProps {
|
|
|
9
9
|
trigger?: "onClick" | "onRightClick";
|
|
10
10
|
overlay?: AllowedOverlays;
|
|
11
11
|
children?: React.ReactElement;
|
|
12
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
12
13
|
}
|
|
13
|
-
export declare
|
|
14
|
+
export declare function WithOverlay({ trigger, overlay, children, onClick, ref, ...restProps }: WithOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -11,11 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
return t;
|
|
12
12
|
};
|
|
13
13
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
import { useState, cloneElement, useEffect, useRef,
|
|
14
|
+
import { useState, cloneElement, useEffect, useRef, useImperativeHandle, } from "react";
|
|
15
15
|
import { createPortal } from "react-dom";
|
|
16
16
|
import { Stack, useOnRightClick, } from "..";
|
|
17
|
-
export
|
|
18
|
-
var { trigger = "onClick", overlay, children, onClick } = _a, restProps = __rest(_a, ["trigger", "overlay", "children", "onClick"]);
|
|
17
|
+
export function WithOverlay(_a) {
|
|
18
|
+
var { trigger = "onClick", overlay, children, onClick, ref } = _a, restProps = __rest(_a, ["trigger", "overlay", "children", "onClick", "ref"]);
|
|
19
19
|
// Get Triggers ref and send to Overlay
|
|
20
20
|
const localRef = useRef(null);
|
|
21
21
|
const [showOverlay, setShowOverlay] = useState(false);
|
|
@@ -27,7 +27,7 @@ export const WithOverlay = forwardRef(function WithOverlay(_a, forwardedRef) {
|
|
|
27
27
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
28
28
|
};
|
|
29
29
|
// Let the parent access our DOM node
|
|
30
|
-
useImperativeHandle(
|
|
30
|
+
useImperativeHandle(ref, () => localRef.current);
|
|
31
31
|
// Disable Body Scroll on showOverlay
|
|
32
32
|
useEffect(() => {
|
|
33
33
|
document.body.style.overflow = showOverlay ? "hidden" : "initial";
|
|
@@ -48,4 +48,4 @@ export const WithOverlay = forwardRef(function WithOverlay(_a, forwardedRef) {
|
|
|
48
48
|
},
|
|
49
49
|
}), portalRoot);
|
|
50
50
|
return (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ ref: localRef }, restProps, { onClick: onClickHandler, children: children })), showOverlay && teleport] }));
|
|
51
|
-
}
|
|
51
|
+
}
|