@kanso-labs/kanso-ui 0.25.0 → 0.26.0
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.
|
@@ -7,6 +7,13 @@ type SupportingPaneProps = Omit<RenderComponentProps<'div'>, 'children'> & {
|
|
|
7
7
|
* expanded up.
|
|
8
8
|
*/
|
|
9
9
|
main?: ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* Which side of the main pane the supporting one takes from expanded up.
|
|
12
|
+
* Below the medium breakpoint the layout stacks either way, with the
|
|
13
|
+
* supporting pane under the main one.
|
|
14
|
+
* @default 'trailing'
|
|
15
|
+
*/
|
|
16
|
+
placement?: 'leading' | 'trailing';
|
|
10
17
|
/**
|
|
11
18
|
* Content that only means something beside `main`. Sits below it at compact
|
|
12
19
|
* and medium, and beside it at a fixed 360px from expanded up.
|
|
@@ -26,7 +33,7 @@ type SupportingPaneProps = Omit<RenderComponentProps<'div'>, 'children'> & {
|
|
|
26
33
|
* Material Design asks of co-planar panes: focus order has to match the
|
|
27
34
|
* arrangement on screen.
|
|
28
35
|
*/
|
|
29
|
-
declare function SupportingPane({ main, render, supporting, ...props }: SupportingPaneProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
36
|
+
declare function SupportingPane({ main, placement, render, supporting, ...props }: SupportingPaneProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
30
37
|
//#endregion
|
|
31
38
|
export { type SupportingPaneProps, SupportingPane as default };
|
|
32
39
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useRender } from "../../render/useRender.js";
|
|
2
2
|
import { mergeStyles } from "../../styles/merge.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
import { c } from "react/compiler-runtime";
|
|
5
4
|
//#region src/components/supporting-pane/index.tsx
|
|
6
5
|
/**
|
|
7
6
|
* Material Design's supporting pane layout: a main pane and a companion that
|
|
@@ -16,85 +15,29 @@ import { c } from "react/compiler-runtime";
|
|
|
16
15
|
* Material Design asks of co-planar panes: focus order has to match the
|
|
17
16
|
* arrangement on screen.
|
|
18
17
|
*/
|
|
19
|
-
function SupportingPane(
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
let t5;
|
|
27
|
-
if ($[0] !== t0) {
|
|
28
|
-
const { main, render: t6, supporting, ...props } = t0;
|
|
29
|
-
render = t6;
|
|
30
|
-
t5 = useRender;
|
|
31
|
-
t4 = "div";
|
|
32
|
-
t1 = props;
|
|
33
|
-
let t7;
|
|
34
|
-
if ($[7] !== main) {
|
|
35
|
-
t7 = /* @__PURE__ */ jsx("div", {
|
|
18
|
+
function SupportingPane({ main, placement = "trailing", render, supporting, ...props }) {
|
|
19
|
+
const leading = placement === "leading";
|
|
20
|
+
return useRender({
|
|
21
|
+
defaultTagName: "div",
|
|
22
|
+
props: {
|
|
23
|
+
...props,
|
|
24
|
+
children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
|
|
36
25
|
className: "x9f619 xeuugli",
|
|
37
26
|
children: main
|
|
38
|
-
})
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
if ($[9] !== supporting) {
|
|
44
|
-
t8 = /* @__PURE__ */ jsx("div", {
|
|
45
|
-
className: "x9f619 xeuugli",
|
|
27
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
28
|
+
...{
|
|
29
|
+
0: { className: "x9f619 xeuugli" },
|
|
30
|
+
1: { className: "x9f619 xeuugli xm5moh1 x1mqhcjd x15daork x15qucf8" }
|
|
31
|
+
}[!!leading << 0],
|
|
46
32
|
children: supporting
|
|
47
|
-
})
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
$[13] = t2;
|
|
56
|
-
} else t2 = $[13];
|
|
57
|
-
t3 = mergeStyles({ className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x x1674ulc" }, props);
|
|
58
|
-
$[0] = t0;
|
|
59
|
-
$[1] = render;
|
|
60
|
-
$[2] = t1;
|
|
61
|
-
$[3] = t2;
|
|
62
|
-
$[4] = t3;
|
|
63
|
-
$[5] = t4;
|
|
64
|
-
$[6] = t5;
|
|
65
|
-
} else {
|
|
66
|
-
render = $[1];
|
|
67
|
-
t1 = $[2];
|
|
68
|
-
t2 = $[3];
|
|
69
|
-
t3 = $[4];
|
|
70
|
-
t4 = $[5];
|
|
71
|
-
t5 = $[6];
|
|
72
|
-
}
|
|
73
|
-
let t6;
|
|
74
|
-
if ($[14] !== t1 || $[15] !== t2 || $[16] !== t3) {
|
|
75
|
-
t6 = {
|
|
76
|
-
...t1,
|
|
77
|
-
children: t2,
|
|
78
|
-
...t3
|
|
79
|
-
};
|
|
80
|
-
$[14] = t1;
|
|
81
|
-
$[15] = t2;
|
|
82
|
-
$[16] = t3;
|
|
83
|
-
$[17] = t6;
|
|
84
|
-
} else t6 = $[17];
|
|
85
|
-
let t7;
|
|
86
|
-
if ($[18] !== render || $[19] !== t4 || $[20] !== t6) {
|
|
87
|
-
t7 = {
|
|
88
|
-
defaultTagName: t4,
|
|
89
|
-
props: t6,
|
|
90
|
-
render
|
|
91
|
-
};
|
|
92
|
-
$[18] = render;
|
|
93
|
-
$[19] = t4;
|
|
94
|
-
$[20] = t6;
|
|
95
|
-
$[21] = t7;
|
|
96
|
-
} else t7 = $[21];
|
|
97
|
-
return t5(t7);
|
|
33
|
+
})] }),
|
|
34
|
+
...mergeStyles({
|
|
35
|
+
0: { className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x x1674ulc" },
|
|
36
|
+
1: { className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7" }
|
|
37
|
+
}[!!leading << 0], props)
|
|
38
|
+
},
|
|
39
|
+
render
|
|
40
|
+
});
|
|
98
41
|
}
|
|
99
42
|
//#endregion
|
|
100
43
|
export { SupportingPane as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// One of Material Design's canonical layouts. The supporting pane holds\n// content that only means anything next to the main pane — reviewer comments,\n// related items, a tool panel — which is what separates it from list-detail,\n// where the second pane stands on its own.\n//\n// The canonical layout page gives this layout two shapes across the\n// breakpoints, and both are reachable in CSS because neither depends on what\n// the reader selected: stacked at compact and medium, and from expanded up the\n// supporting pane beside the main one at a fixed 360, with the main pane\n// taking the rest. Stacking is Material Design's \"reflow\" strategy, where the\n// supporting pane moves under the main one rather than being dismissed. The\n// page's other compact option is a bottom sheet, which is a different\n// component's job — reach for Sheet at the call site when the supporting\n// content should be summoned rather than scrolled to.\n//\n// **Which side the supporting pane takes is an expanded-window choice, and\n// only that.** The page gives two rules: below the focus pane in medium\n// windows and under, and \"on the leading or trailing side of the focus pane\"\n// from expanded up. So `placement` moves the pane beside the main one and\n// leaves the stacked shape alone — stacked, the supporting pane is under the\n// main one either way.\n//\n// **A leading pane is placed with grid columns rather than by reordering the\n// DOM, and that is a departure worth naming.** The page also asks that focus\n// order match the arrangement on screen for co-planar panes, and no single\n// DOM order satisfies both of its rules: a supporting pane written first\n// reads left of the main one at expanded, as leading should, but then sits\n// above it when the layout stacks — which is the one thing the page says it\n// should not do. Whichever way it is written, one breakpoint has focus order\n// crossing the visual order.\n//\n// The main pane stays first in the DOM, so the break lands at expanded and\n// not on a phone. Side by side, a keyboard reaches the main pane before the\n// supporting one that is drawn to its left, which is an odd half-second with\n// both panes in view; stacked the other way round, a reader meets content\n// that \"only means anything next to the main pane\" before reaching the pane\n// it is talking about. The second is worse, and it is the case the page\n// rules on explicitly.\n\ntype SupportingPaneProps = Omit<RenderComponentProps<'div'>, 'children'> & {\n /**\n * The primary content. Takes whatever width the supporting pane leaves from\n * expanded up.\n */\n main?: ReactNode;\n /**\n * Which side of the main pane the supporting one takes from expanded up.\n * Below the medium breakpoint the layout stacks either way, with the\n * supporting pane under the main one.\n * @default 'trailing'\n */\n placement?: 'leading' | 'trailing';\n /**\n * Content that only means something beside `main`. Sits below it at compact\n * and medium, and beside it at a fixed 360px from expanded up.\n */\n supporting?: ReactNode;\n};\n\n/**\n * Material Design's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * Layout only — neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists, or plain\n * content. `render` swaps the container's element, for a layout that should\n * be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n */\nfunction SupportingPane({\n main,\n placement = 'trailing',\n render,\n supporting,\n ...props\n}: SupportingPaneProps) {\n const leading = placement === 'leading';\n return useRender({\n defaultTagName: 'div',\n props: {\n ...props,\n children: <>\n <div className=\"x9f619 xeuugli\">{main}</div>\n <div {...{\n 0: {\n className: \"x9f619 xeuugli\"\n },\n 1: {\n className: \"x9f619 xeuugli xm5moh1 x1mqhcjd x15daork x15qucf8\"\n }\n }[!!leading << 0]}>\n {supporting}\n </div>\n </>,\n ...mergeStyles({\n 0: {\n className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x x1674ulc\"\n },\n 1: {\n className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7\"\n }\n }[!!leading << 0], props)\n },\n render\n });\n}\nexport type { SupportingPaneProps };\nexport default SupportingPane;"],"mappings":";;;;;;;;;;;;;;;;;AAgFA,SAAS,eAAe,EACtB,MACA,YAAY,YACZ,QACA,YACA,GAAG,SACmB;CACtB,MAAM,UAAU,cAAc;CAC9B,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,qBAAA,UAAA,EAAA,UAAA,CACN,oBAAC,OAAD;IAAK,WAAU;IAAkB,UAAA;GAAU,CAAA,GAC3C,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,oDACb;IACF,EAAE,CAAC,CAAC,WAAW;IACV,UAAA;GACE,CAAA,CACP,EAAA,CAAA;GACF,GAAG,YAAY;IACb,GAAG,EACD,WAAW,2CACb;IACA,GAAG,EACD,WAAW,0CACb;GACF,EAAE,CAAC,CAAC,WAAW,IAAI,KAAK;EAC1B;EACA;CACF,CAAC;AACH"}
|
package/dist/styles.css
CHANGED
|
@@ -199,6 +199,14 @@
|
|
|
199
199
|
gap: var(--xqgx294);
|
|
200
200
|
}
|
|
201
201
|
|
|
202
|
+
.xm5moh1 {
|
|
203
|
+
grid-column: auto;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.x15daork {
|
|
207
|
+
grid-row: auto;
|
|
208
|
+
}
|
|
209
|
+
|
|
202
210
|
.x17y0mx6 {
|
|
203
211
|
inset-inline: 0;
|
|
204
212
|
}
|
|
@@ -2872,6 +2880,16 @@
|
|
|
2872
2880
|
border-radius: var(--x1lckk6t);
|
|
2873
2881
|
}
|
|
2874
2882
|
}
|
|
2883
|
+
|
|
2884
|
+
@media (width >= 840px) {
|
|
2885
|
+
.x1mqhcjd.x1mqhcjd {
|
|
2886
|
+
grid-column: 1;
|
|
2887
|
+
}
|
|
2888
|
+
|
|
2889
|
+
.x15qucf8.x15qucf8 {
|
|
2890
|
+
grid-row: 1;
|
|
2891
|
+
}
|
|
2892
|
+
}
|
|
2875
2893
|
}
|
|
2876
2894
|
|
|
2877
2895
|
@layer priority7 {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-labs/kanso-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.26.0",
|
|
4
4
|
"description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|