@tolokoban/ui 0.22.1 → 0.22.2
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/lib/dist/info.d.ts +1 -1
- package/lib/dist/info.js +1 -1
- package/lib/dist/util/customize.d.ts +1 -1
- package/lib/dist/util/customize.d.ts.map +1 -1
- package/lib/dist/util/customize.js +1 -1
- package/lib/dist/view/Tooltip/Tooltip.d.ts +1 -0
- package/lib/dist/view/Tooltip/Tooltip.d.ts.map +1 -1
- package/lib/dist/view/Tooltip/Tooltip.js +4 -4
- package/lib/dist/view/Tooltip/Tooltip.module.css +40 -0
- package/lib/dist/view/index.js +1 -1
- package/package.json +1 -1
package/lib/dist/info.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const name = "@tolokoban/ui";
|
|
2
|
-
export declare const version = "0.22.
|
|
2
|
+
export declare const version = "0.22.2";
|
|
3
3
|
export declare const description = "React components with theme";
|
|
4
4
|
export declare const homepage = "https://tolokoban.github.io/ui";
|
|
5
5
|
//# sourceMappingURL=info.d.ts.map
|
package/lib/dist/info.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export const name = "@tolokoban/ui";
|
|
2
|
-
export const version = "0.22.
|
|
2
|
+
export const version = "0.22.2";
|
|
3
3
|
export const description = "React components with theme";
|
|
4
4
|
export const homepage = "https://tolokoban.github.io/ui";
|
|
5
5
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmZvLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLElBQUksR0FBRyxlQUFlLENBQUE7QUFDbkMsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLFFBQVEsQ0FBQTtBQUMvQixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsNkJBQTZCLENBQUE7QUFDeEQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLGdDQUFnQyxDQUFBIn0=
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare function customizeView<T
|
|
1
|
+
export declare function customizeView<T, S extends Partial<T>>(View: React.FC<T>, defaultProps: S): React.FC<T>;
|
|
2
2
|
//# sourceMappingURL=customize.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"customize.d.ts","sourceRoot":"","sources":["../../src/util/customize.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"customize.d.ts","sourceRoot":"","sources":["../../src/util/customize.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,EACjD,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EACjB,YAAY,EAAE,CAAC,GAChB,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAQb"}
|
|
@@ -5,4 +5,4 @@ export function customizeView(View, defaultProps) {
|
|
|
5
5
|
return _jsx(View, Object.assign({}, mergedProps));
|
|
6
6
|
};
|
|
7
7
|
}
|
|
8
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
8
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9taXplLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWwvY3VzdG9taXplLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLGFBQWEsQ0FDekIsSUFBaUIsRUFDakIsWUFBZTtJQUVmLE9BQU8sQ0FBQyxLQUF1QixFQUFFLEVBQUU7UUFDL0IsTUFBTSxXQUFXLEdBQUcsZ0NBQ2IsWUFBWSxHQUNaLEtBQUssQ0FDK0IsQ0FBQTtRQUMzQyxPQUFPLEtBQUMsSUFBSSxvQkFBSyxXQUFXLEVBQUksQ0FBQTtJQUNwQyxDQUFDLENBQUE7QUFDTCxDQUFDIn0=
|
|
@@ -7,6 +7,7 @@ export interface tooltipProps extends ChildStyleProps, PositionStyleProps, Dimen
|
|
|
7
7
|
className?: string;
|
|
8
8
|
content?: React.ReactNode;
|
|
9
9
|
children?: React.ReactNode;
|
|
10
|
+
attach?: "top" | "top-left" | "top-right" | "bottom";
|
|
10
11
|
}
|
|
11
12
|
export declare function ViewTooltip(props: tooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/view/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAEpC,OAAO,EACH,eAAe,EACf,eAAe,EAIlB,MAAM,aAAa,CAAA;AACpB,OAAO,EACH,mBAAmB,EAEtB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,kBAAkB,EAAiB,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAc,MAAM,0BAA0B,CAAA;AAItE,MAAM,WAAW,YACb,SAAQ,eAAe,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,eAAe;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/view/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAEpC,OAAO,EACH,eAAe,EACf,eAAe,EAIlB,MAAM,aAAa,CAAA;AACpB,OAAO,EACH,mBAAmB,EAEtB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,kBAAkB,EAAiB,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAc,MAAM,0BAA0B,CAAA;AAItE,MAAM,WAAW,YACb,SAAQ,eAAe,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,eAAe;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;CACvD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,2CAwC9C"}
|
|
@@ -8,9 +8,9 @@ import Styles from "./Tooltip.module.css";
|
|
|
8
8
|
export function ViewTooltip(props) {
|
|
9
9
|
const id = useId();
|
|
10
10
|
const styleContainer = Object.assign(Object.assign({}, stylePosition(props)), styleChild(props));
|
|
11
|
-
const styleContent = Object.assign(Object.assign(Object.assign({}, styleDimension(props)), styleColor(Object.assign({
|
|
11
|
+
const styleContent = Object.assign(Object.assign(Object.assign({}, styleDimension(props)), styleColor(Object.assign({ shadow: 3, color: "primary-8" }, props))), styleSpace(Object.assign({ padding: "M", borderRadius: "S" }, props)));
|
|
12
12
|
styleContent["--custom-back"] = styleContent.backgroundColor;
|
|
13
|
-
const { content, children } = props;
|
|
14
|
-
return (_jsxs("div", { className: Theme.classNames.join(props.className, Styles.tooltip), style: styleContainer, "aria-details": id, children: [children, content && (_jsx("div", { className: Styles.content, style: styleContent, id: id, children: content }))] }));
|
|
13
|
+
const { content, children, attach = "top" } = props;
|
|
14
|
+
return (_jsxs("div", { className: Theme.classNames.join(props.className, Styles.tooltip), style: styleContainer, "aria-details": id, children: [children, content && (_jsx("div", { className: [Styles.content, Styles[attach]].join(" "), style: styleContent, id: id, children: content }))] }));
|
|
15
15
|
}
|
|
16
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
16
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy92aWV3L1Rvb2x0aXAvVG9vbHRpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQWMsRUFBRSxLQUFLLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFcEMsT0FBTyxFQUdILFVBQVUsRUFDVixVQUFVLEVBQ1YsS0FBSyxHQUNSLE1BQU0sYUFBYSxDQUFBO0FBQ3BCLE9BQU8sRUFFSCxjQUFjLEdBQ2pCLE1BQU0sOEJBQThCLENBQUE7QUFDckMsT0FBTyxFQUFzQixhQUFhLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQTtBQUMvRSxPQUFPLEVBQW1CLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBRXRFLE9BQU8sTUFBTSxNQUFNLHNCQUFzQixDQUFBO0FBY3pDLE1BQU0sVUFBVSxXQUFXLENBQUMsS0FBbUI7SUFDM0MsTUFBTSxFQUFFLEdBQUcsS0FBSyxFQUFFLENBQUE7SUFDbEIsTUFBTSxjQUFjLG1DQUNiLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FDcEIsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUN2QixDQUFBO0lBQ0QsTUFBTSxZQUFZLGlEQUNYLGNBQWMsQ0FBQyxLQUFLLENBQUMsR0FDckIsVUFBVSxpQkFDVCxNQUFNLEVBQUUsQ0FBQyxFQUNULEtBQUssRUFBRSxXQUFXLElBQ2YsS0FBSyxFQUNWLEdBQ0MsVUFBVSxpQkFDVCxPQUFPLEVBQUUsR0FBRyxFQUNaLFlBQVksRUFBRSxHQUFHLElBQ2QsS0FBSyxFQUNWLENBQ0wsQ0FBQTtJQUNELFlBQVksQ0FBQyxlQUFlLENBQUMsR0FBRyxZQUFZLENBQUMsZUFBZSxDQUFBO0lBQzVELE1BQU0sRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sR0FBRyxLQUFLLEVBQUUsR0FBRyxLQUFLLENBQUE7SUFFbkQsT0FBTyxDQUNILGVBQ0ksU0FBUyxFQUFFLEtBQUssQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDLE9BQU8sQ0FBQyxFQUNqRSxLQUFLLEVBQUUsY0FBYyxrQkFDUCxFQUFFLGFBRWYsUUFBUSxFQUNSLE9BQU8sSUFBSSxDQUNSLGNBQ0ksU0FBUyxFQUFFLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQ3JELEtBQUssRUFBRSxZQUFZLEVBQ25CLEVBQUUsRUFBRSxFQUFFLFlBRUwsT0FBTyxHQUNOLENBQ1QsSUFDQyxDQUNULENBQUE7QUFDTCxDQUFDIn0=
|
|
@@ -5,8 +5,10 @@
|
|
|
5
5
|
|
|
6
6
|
.tooltip > div.content {
|
|
7
7
|
position: absolute;
|
|
8
|
+
top: auto;
|
|
8
9
|
bottom: 0;
|
|
9
10
|
left: 50%;
|
|
11
|
+
right: auto;
|
|
10
12
|
width: max-content;
|
|
11
13
|
background: inherit;
|
|
12
14
|
background-color: inherit;
|
|
@@ -29,6 +31,44 @@
|
|
|
29
31
|
width: 0;
|
|
30
32
|
height: 0;
|
|
31
33
|
left: 50%;
|
|
34
|
+
right: auto;
|
|
32
35
|
top: -2em;
|
|
36
|
+
bottom: auto;
|
|
37
|
+
margin-left: -1em;
|
|
33
38
|
transform: scale(0.5, 1);
|
|
34
39
|
}
|
|
40
|
+
|
|
41
|
+
.tooltip > div.content.top-left {
|
|
42
|
+
left: max(calc(100% - 1em), 50%);
|
|
43
|
+
right: auto;
|
|
44
|
+
transform: translate(calc(-1em), calc(1em + 100%));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.tooltip > div.content.top-left::after {
|
|
48
|
+
left: 1em;
|
|
49
|
+
right: auto;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.tooltip > div.content.top-right {
|
|
53
|
+
left: auto;
|
|
54
|
+
right: max(calc(100% - 1em), 50%);
|
|
55
|
+
transform: translate(1em, calc(1em + 100%));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.tooltip > div.content.top-right::after {
|
|
59
|
+
left: auto;
|
|
60
|
+
right: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.tooltip > div.content.bottom {
|
|
64
|
+
top: 0;
|
|
65
|
+
bottom: auto;
|
|
66
|
+
transform: translate(-50%, calc(-1em - 100%));
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.tooltip > div.content.bottom::after {
|
|
70
|
+
border: 1em solid transparent;
|
|
71
|
+
border-top: 1em solid var(--custom-back);
|
|
72
|
+
top: auto;
|
|
73
|
+
bottom: -2em;
|
|
74
|
+
}
|
package/lib/dist/view/index.js
CHANGED