@bitrise/bitkit-v2 0.3.358 → 0.3.359
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/components/BitkitControlButton/BitkitControlButton.js +1 -0
- package/dist/components/BitkitControlButton/BitkitControlButton.js.map +1 -1
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts +2 -0
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js +15 -11
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts +74 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +244 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/main.js +2 -2
- package/dist/theme/slot-recipes/GroupHeading.recipe.js +4 -1
- package/dist/theme/slot-recipes/GroupHeading.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts +82 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js +230 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/index.d.ts +81 -21
- package/dist/theme/slot-recipes/index.js +2 -2
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/utilities/useIsTruncated.d.ts +27 -0
- package/dist/utilities/useIsTruncated.js +51 -0
- package/dist/utilities/useIsTruncated.js.map +1 -0
- package/docs/v1-to-v2-migration-guide.md +9 -6
- package/package.json +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.d.ts +0 -45
- package/dist/components/BitkitSidebar/BitkitSidebar.js +0 -147
- package/dist/components/BitkitSidebar/BitkitSidebar.js.map +0 -1
- package/dist/theme/slot-recipes/Sidebar.recipe.d.ts +0 -22
- package/dist/theme/slot-recipes/Sidebar.recipe.js +0 -143
- package/dist/theme/slot-recipes/Sidebar.recipe.js.map +0 -1
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import { rem } from "../themeUtils.js";
|
|
2
|
+
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
|
+
//#region lib/theme/slot-recipes/PageSidebar.recipe.ts
|
|
4
|
+
var pageSidebarSlotRecipe = defineSlotRecipe({
|
|
5
|
+
className: "page-sidebar",
|
|
6
|
+
slots: [
|
|
7
|
+
"body",
|
|
8
|
+
"contentBlock",
|
|
9
|
+
"divider",
|
|
10
|
+
"footer",
|
|
11
|
+
"item",
|
|
12
|
+
"itemIcon",
|
|
13
|
+
"itemLabel",
|
|
14
|
+
"project",
|
|
15
|
+
"projectLabel",
|
|
16
|
+
"projectValue",
|
|
17
|
+
"projectValueWrapper",
|
|
18
|
+
"root",
|
|
19
|
+
"selectionMarker",
|
|
20
|
+
"suffixIcon",
|
|
21
|
+
"title",
|
|
22
|
+
"titleBlock",
|
|
23
|
+
"titleText"
|
|
24
|
+
],
|
|
25
|
+
base: {
|
|
26
|
+
root: {
|
|
27
|
+
background: "background/primary",
|
|
28
|
+
borderInlineEndColor: "border/regular",
|
|
29
|
+
borderInlineEndStyle: "solid",
|
|
30
|
+
borderInlineEndWidth: "1",
|
|
31
|
+
display: "flex",
|
|
32
|
+
flexDirection: "column",
|
|
33
|
+
minHeight: "100dvh",
|
|
34
|
+
maxWidth: rem(320),
|
|
35
|
+
minWidth: rem(240),
|
|
36
|
+
paddingBlockStart: "16",
|
|
37
|
+
width: rem(240)
|
|
38
|
+
},
|
|
39
|
+
body: {
|
|
40
|
+
display: "flex",
|
|
41
|
+
flex: 1,
|
|
42
|
+
flexDirection: "column",
|
|
43
|
+
marginBlockEnd: "16",
|
|
44
|
+
width: "full"
|
|
45
|
+
},
|
|
46
|
+
title: {
|
|
47
|
+
alignItems: "center",
|
|
48
|
+
color: "text/primary",
|
|
49
|
+
display: "flex",
|
|
50
|
+
flexShrink: 0,
|
|
51
|
+
overflow: "clip",
|
|
52
|
+
paddingInlineEnd: "32"
|
|
53
|
+
},
|
|
54
|
+
titleBlock: {
|
|
55
|
+
alignItems: "center",
|
|
56
|
+
display: "flex",
|
|
57
|
+
minWidth: 0
|
|
58
|
+
},
|
|
59
|
+
titleText: {
|
|
60
|
+
textStyle: "heading/h3",
|
|
61
|
+
whiteSpace: "nowrap"
|
|
62
|
+
},
|
|
63
|
+
item: {
|
|
64
|
+
alignItems: "center",
|
|
65
|
+
cursor: "pointer",
|
|
66
|
+
display: "flex",
|
|
67
|
+
focusVisibleRing: "inside",
|
|
68
|
+
gap: "12",
|
|
69
|
+
overflow: "clip",
|
|
70
|
+
paddingBlock: "8",
|
|
71
|
+
paddingInline: "24",
|
|
72
|
+
position: "relative",
|
|
73
|
+
width: "full",
|
|
74
|
+
_hover: {
|
|
75
|
+
background: "background/secondary",
|
|
76
|
+
_active: { background: "background/tertiary" }
|
|
77
|
+
},
|
|
78
|
+
_active: { background: "background/tertiary" },
|
|
79
|
+
_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
|
|
80
|
+
},
|
|
81
|
+
contentBlock: {
|
|
82
|
+
alignItems: "center",
|
|
83
|
+
display: "flex",
|
|
84
|
+
flex: 1,
|
|
85
|
+
gap: "12",
|
|
86
|
+
minWidth: 0,
|
|
87
|
+
paddingBlock: "2"
|
|
88
|
+
},
|
|
89
|
+
itemIcon: {
|
|
90
|
+
color: "icon/secondary",
|
|
91
|
+
flexShrink: 0,
|
|
92
|
+
_groupHover: { color: "icon/primary" }
|
|
93
|
+
},
|
|
94
|
+
itemLabel: {
|
|
95
|
+
color: "text/primary",
|
|
96
|
+
flex: 1,
|
|
97
|
+
minWidth: 0,
|
|
98
|
+
overflow: "hidden",
|
|
99
|
+
textAlign: "start",
|
|
100
|
+
textOverflow: "ellipsis",
|
|
101
|
+
textStyle: "body/md/regular",
|
|
102
|
+
whiteSpace: "nowrap"
|
|
103
|
+
},
|
|
104
|
+
suffixIcon: {
|
|
105
|
+
color: "icon/tertiary",
|
|
106
|
+
display: "none",
|
|
107
|
+
flexShrink: 0,
|
|
108
|
+
_groupHover: { display: "block" }
|
|
109
|
+
},
|
|
110
|
+
selectionMarker: {
|
|
111
|
+
background: "border/selected",
|
|
112
|
+
borderEndStartRadius: "2",
|
|
113
|
+
borderStartStartRadius: "2",
|
|
114
|
+
height: "full",
|
|
115
|
+
insetBlockStart: 0,
|
|
116
|
+
insetInlineEnd: 0,
|
|
117
|
+
position: "absolute",
|
|
118
|
+
width: "2"
|
|
119
|
+
},
|
|
120
|
+
footer: {
|
|
121
|
+
borderBlockStart: "1px solid",
|
|
122
|
+
borderColor: "border/minimal",
|
|
123
|
+
display: "flex",
|
|
124
|
+
flexDirection: "column",
|
|
125
|
+
flexShrink: 0,
|
|
126
|
+
paddingBlock: "8"
|
|
127
|
+
},
|
|
128
|
+
project: {
|
|
129
|
+
display: "flex",
|
|
130
|
+
flexDirection: "column",
|
|
131
|
+
gap: "4",
|
|
132
|
+
justifyContent: "center",
|
|
133
|
+
overflow: "clip",
|
|
134
|
+
paddingBlock: "8",
|
|
135
|
+
paddingInlineEnd: "32",
|
|
136
|
+
paddingInlineStart: "24",
|
|
137
|
+
whiteSpace: "nowrap"
|
|
138
|
+
},
|
|
139
|
+
projectLabel: {
|
|
140
|
+
color: "text/tertiary",
|
|
141
|
+
textStyle: "heading/h6"
|
|
142
|
+
},
|
|
143
|
+
projectValue: {
|
|
144
|
+
color: "text/body",
|
|
145
|
+
overflow: "hidden",
|
|
146
|
+
textOverflow: "ellipsis",
|
|
147
|
+
textStyle: "body/lg/semibold"
|
|
148
|
+
},
|
|
149
|
+
projectValueWrapper: {
|
|
150
|
+
display: "flex",
|
|
151
|
+
minWidth: 0
|
|
152
|
+
},
|
|
153
|
+
divider: {
|
|
154
|
+
borderColor: "border/minimal",
|
|
155
|
+
marginBlock: "16",
|
|
156
|
+
marginInline: "24",
|
|
157
|
+
width: "auto"
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
variants: {
|
|
161
|
+
hasBack: {
|
|
162
|
+
true: {
|
|
163
|
+
title: {
|
|
164
|
+
paddingBlockEnd: "8",
|
|
165
|
+
paddingInlineStart: "16"
|
|
166
|
+
},
|
|
167
|
+
titleBlock: {
|
|
168
|
+
gap: "4",
|
|
169
|
+
paddingBlock: "4"
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
false: {
|
|
173
|
+
title: {
|
|
174
|
+
paddingBlockEnd: "16",
|
|
175
|
+
paddingInlineStart: "24"
|
|
176
|
+
},
|
|
177
|
+
titleBlock: { paddingBlock: "6" }
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
isDisabled: {
|
|
181
|
+
true: {
|
|
182
|
+
item: {
|
|
183
|
+
cursor: "not-allowed",
|
|
184
|
+
_hover: {
|
|
185
|
+
background: "transparent",
|
|
186
|
+
_active: { background: "transparent" }
|
|
187
|
+
},
|
|
188
|
+
_active: { background: "transparent" }
|
|
189
|
+
},
|
|
190
|
+
itemIcon: {
|
|
191
|
+
color: "icon/disabled",
|
|
192
|
+
_groupHover: { color: "icon/disabled" }
|
|
193
|
+
},
|
|
194
|
+
itemLabel: { color: "text/disabled" },
|
|
195
|
+
suffixIcon: {
|
|
196
|
+
display: "none",
|
|
197
|
+
_groupHover: { display: "none" }
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
false: {}
|
|
201
|
+
},
|
|
202
|
+
selected: {
|
|
203
|
+
true: {
|
|
204
|
+
item: {
|
|
205
|
+
background: "background/selected",
|
|
206
|
+
_hover: {
|
|
207
|
+
background: "background/selected-hover",
|
|
208
|
+
_active: { background: "background/selected-active" }
|
|
209
|
+
},
|
|
210
|
+
_active: { background: "background/selected-active" }
|
|
211
|
+
},
|
|
212
|
+
itemIcon: {
|
|
213
|
+
color: "icon/interactive",
|
|
214
|
+
_groupHover: { color: "icon/interactive-hover" }
|
|
215
|
+
},
|
|
216
|
+
itemLabel: { textStyle: "body/md/semibold" }
|
|
217
|
+
},
|
|
218
|
+
false: {}
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
defaultVariants: {
|
|
222
|
+
hasBack: false,
|
|
223
|
+
isDisabled: false,
|
|
224
|
+
selected: false
|
|
225
|
+
}
|
|
226
|
+
});
|
|
227
|
+
//#endregion
|
|
228
|
+
export { pageSidebarSlotRecipe as default };
|
|
229
|
+
|
|
230
|
+
//# sourceMappingURL=PageSidebar.recipe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageSidebar.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageSidebar.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst pageSidebarSlotRecipe = defineSlotRecipe({\n className: 'page-sidebar',\n slots: [\n 'body',\n 'contentBlock',\n 'divider',\n 'footer',\n 'item',\n 'itemIcon',\n 'itemLabel',\n 'project',\n 'projectLabel',\n 'projectValue',\n 'projectValueWrapper',\n 'root',\n 'selectionMarker',\n 'suffixIcon',\n 'title',\n 'titleBlock',\n 'titleText',\n ],\n base: {\n root: {\n background: 'background/primary',\n // Longhands, not the `borderInlineEnd: '1px solid'` shorthand: that shorthand carries no\n // colour, so it resets it to `currentColor` if it lands after `borderColor` — which is what\n // sorting these keys alphabetically did, turning the rule dark.\n borderInlineEndColor: 'border/regular',\n borderInlineEndStyle: 'solid',\n borderInlineEndWidth: '1',\n display: 'flex',\n flexDirection: 'column',\n // `minHeight` rather than `height`: on a short navigation the sidebar still reaches the\n // bottom of the viewport, but a long one grows past it and scrolls with the page as one\n // block — the footer is part of that scroll, not pinned to the bottom.\n minHeight: '100dvh',\n maxWidth: rem(320),\n minWidth: rem(240),\n paddingBlockStart: '16',\n width: rem(240),\n },\n body: {\n display: 'flex',\n // Absorbs the slack so the footer sits at the bottom when the navigation is short, and\n // simply grows when it is long.\n flex: 1,\n flexDirection: 'column',\n // The minimum gap between the navigation and the footer block. It is a margin so it stays\n // outside the items' own box, and `flex: 1` above means any extra space lands in the body\n // rather than widening this gap.\n marginBlockEnd: '16',\n width: 'full',\n },\n title: {\n alignItems: 'center',\n color: 'text/primary',\n display: 'flex',\n flexShrink: 0,\n overflow: 'clip',\n paddingInlineEnd: '32',\n },\n titleBlock: {\n alignItems: 'center',\n display: 'flex',\n minWidth: 0,\n },\n titleText: {\n textStyle: 'heading/h3',\n whiteSpace: 'nowrap',\n },\n item: {\n alignItems: 'center',\n cursor: 'pointer',\n display: 'flex',\n focusVisibleRing: 'inside',\n gap: '12',\n overflow: 'clip',\n paddingBlock: '8',\n paddingInline: '24',\n position: 'relative',\n width: 'full',\n _hover: {\n background: 'background/secondary',\n _active: {\n background: 'background/tertiary',\n },\n },\n _active: {\n background: 'background/tertiary',\n },\n // `focusVisibleRing: 'inside'` still resolves to `outline-offset: 0`, which draws the ring\n // just outside the border box. The item spans the sidebar's full width, so that would bleed\n // past the sidebar's edges — pull the whole ring inside the item instead.\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n contentBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n gap: '12',\n minWidth: 0,\n paddingBlock: '2',\n },\n itemIcon: {\n color: 'icon/secondary',\n flexShrink: 0,\n _groupHover: {\n color: 'icon/primary',\n },\n },\n itemLabel: {\n color: 'text/primary',\n flex: 1,\n minWidth: 0,\n overflow: 'hidden',\n textAlign: 'start',\n textOverflow: 'ellipsis',\n textStyle: 'body/md/regular',\n whiteSpace: 'nowrap',\n },\n suffixIcon: {\n color: 'icon/tertiary',\n display: 'none',\n flexShrink: 0,\n _groupHover: {\n display: 'block',\n },\n },\n selectionMarker: {\n background: 'border/selected',\n borderEndStartRadius: '2',\n borderStartStartRadius: '2',\n height: 'full',\n insetBlockStart: 0,\n insetInlineEnd: 0,\n position: 'absolute',\n width: '2',\n },\n footer: {\n borderBlockStart: '1px solid',\n borderColor: 'border/minimal',\n display: 'flex',\n flexDirection: 'column',\n // The body above absorbs the free space, so the footer needs no positioning of its own —\n // it just must not be squashed by a long list.\n flexShrink: 0,\n paddingBlock: '8',\n },\n project: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n justifyContent: 'center',\n overflow: 'clip',\n paddingBlock: '8',\n paddingInlineEnd: '32',\n paddingInlineStart: '24',\n whiteSpace: 'nowrap',\n },\n projectLabel: {\n color: 'text/tertiary',\n textStyle: 'heading/h6',\n },\n projectValue: {\n color: 'text/body',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n textStyle: 'body/lg/semibold',\n },\n projectValueWrapper: {\n display: 'flex',\n minWidth: 0,\n },\n divider: {\n // Both of the sidebar's separator roles are `border/minimal` in Figma — the group header\n // (`20014:6508`) and this plain rule (`20014:6511`) — against `border/regular` for the general\n // Separator component. The override is per-slot for that reason, not to limit blast radius.\n borderColor: 'border/minimal',\n marginBlock: '16',\n marginInline: '24',\n width: 'auto',\n },\n },\n variants: {\n hasBack: {\n // Redlines on the sub view (Figma `- page sidebar - interactions`): the title block sits at\n // x/y 16, is 40 tall, and the 32px back button sits at y 20 — i.e. the 4px padding belongs to\n // the block wrapping button + text, not to the text. Header totals 16 + 40 + 8 = 64.\n true: {\n title: {\n paddingBlockEnd: '8',\n paddingInlineStart: '16',\n },\n titleBlock: {\n gap: '4',\n paddingBlock: '4',\n },\n },\n // Main view: no button, so the text alone is the block — 6 + 28 + 6 = 40, header 16+40+16 = 72.\n false: {\n title: {\n paddingBlockEnd: '16',\n paddingInlineStart: '24',\n },\n titleBlock: {\n paddingBlock: '6',\n },\n },\n },\n isDisabled: {\n true: {\n item: {\n cursor: 'not-allowed',\n _hover: {\n background: 'transparent',\n _active: {\n background: 'transparent',\n },\n },\n _active: {\n background: 'transparent',\n },\n },\n itemIcon: {\n color: 'icon/disabled',\n _groupHover: {\n color: 'icon/disabled',\n },\n },\n itemLabel: {\n color: 'text/disabled',\n },\n suffixIcon: {\n display: 'none',\n _groupHover: {\n display: 'none',\n },\n },\n },\n false: {},\n },\n selected: {\n true: {\n item: {\n background: 'background/selected',\n _hover: {\n background: 'background/selected-hover',\n _active: {\n background: 'background/selected-active',\n },\n },\n _active: {\n background: 'background/selected-active',\n },\n },\n itemIcon: {\n color: 'icon/interactive',\n _groupHover: {\n color: 'icon/interactive-hover',\n },\n },\n itemLabel: {\n textStyle: 'body/md/semibold',\n },\n },\n false: {},\n },\n },\n defaultVariants: {\n hasBack: false,\n isDisabled: false,\n selected: false,\n },\n});\n\nexport default pageSidebarSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,wBAAwB,iBAAiB;CAC7C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GAIZ,sBAAsB;GACtB,sBAAsB;GACtB,sBAAsB;GACtB,SAAS;GACT,eAAe;GAIf,WAAW;GACX,UAAU,IAAI,GAAG;GACjB,UAAU,IAAI,GAAG;GACjB,mBAAmB;GACnB,OAAO,IAAI,GAAG;EAChB;EACA,MAAM;GACJ,SAAS;GAGT,MAAM;GACN,eAAe;GAIf,gBAAgB;GAChB,OAAO;EACT;EACA,OAAO;GACL,YAAY;GACZ,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,UAAU;EACZ;EACA,WAAW;GACT,WAAW;GACX,YAAY;EACd;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,kBAAkB;GAClB,KAAK;GACL,UAAU;GACV,cAAc;GACd,eAAe;GACf,UAAU;GACV,OAAO;GACP,QAAQ;IACN,YAAY;IACZ,SAAS,EACP,YAAY,sBACd;GACF;GACA,SAAS,EACP,YAAY,sBACd;GAIA,eAAe,EACb,eAAe,qCACjB;EACF;EACA,cAAc;GACZ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;GACV,cAAc;EAChB;EACA,UAAU;GACR,OAAO;GACP,YAAY;GACZ,aAAa,EACX,OAAO,eACT;EACF;EACA,WAAW;GACT,OAAO;GACP,MAAM;GACN,UAAU;GACV,UAAU;GACV,WAAW;GACX,cAAc;GACd,WAAW;GACX,YAAY;EACd;EACA,YAAY;GACV,OAAO;GACP,SAAS;GACT,YAAY;GACZ,aAAa,EACX,SAAS,QACX;EACF;EACA,iBAAiB;GACf,YAAY;GACZ,sBAAsB;GACtB,wBAAwB;GACxB,QAAQ;GACR,iBAAiB;GACjB,gBAAgB;GAChB,UAAU;GACV,OAAO;EACT;EACA,QAAQ;GACN,kBAAkB;GAClB,aAAa;GACb,SAAS;GACT,eAAe;GAGf,YAAY;GACZ,cAAc;EAChB;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,gBAAgB;GAChB,UAAU;GACV,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,YAAY;EACd;EACA,cAAc;GACZ,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,OAAO;GACP,UAAU;GACV,cAAc;GACd,WAAW;EACb;EACA,qBAAqB;GACnB,SAAS;GACT,UAAU;EACZ;EACA,SAAS;GAIP,aAAa;GACb,aAAa;GACb,cAAc;GACd,OAAO;EACT;CACF;CACA,UAAU;EACR,SAAS;GAIP,MAAM;IACJ,OAAO;KACL,iBAAiB;KACjB,oBAAoB;IACtB;IACA,YAAY;KACV,KAAK;KACL,cAAc;IAChB;GACF;GAEA,OAAO;IACL,OAAO;KACL,iBAAiB;KACjB,oBAAoB;IACtB;IACA,YAAY,EACV,cAAc,IAChB;GACF;EACF;EACA,YAAY;GACV,MAAM;IACJ,MAAM;KACJ,QAAQ;KACR,QAAQ;MACN,YAAY;MACZ,SAAS,EACP,YAAY,cACd;KACF;KACA,SAAS,EACP,YAAY,cACd;IACF;IACA,UAAU;KACR,OAAO;KACP,aAAa,EACX,OAAO,gBACT;IACF;IACA,WAAW,EACT,OAAO,gBACT;IACA,YAAY;KACV,SAAS;KACT,aAAa,EACX,SAAS,OACX;IACF;GACF;GACA,OAAO,CAAC;EACV;EACA,UAAU;GACR,MAAM;IACJ,MAAM;KACJ,YAAY;KACZ,QAAQ;MACN,YAAY;MACZ,SAAS,EACP,YAAY,6BACd;KACF;KACA,SAAS,EACP,YAAY,6BACd;IACF;IACA,UAAU;KACR,OAAO;KACP,aAAa,EACX,OAAO,yBACT;IACF;IACA,WAAW,EACT,WAAW,mBACb;GACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,YAAY;EACZ,UAAU;CACZ;AACF,CAAC"}
|
|
@@ -1422,6 +1422,87 @@ declare const slotRecipes: {
|
|
|
1422
1422
|
};
|
|
1423
1423
|
};
|
|
1424
1424
|
}>;
|
|
1425
|
+
pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
|
|
1426
|
+
hasBack: {
|
|
1427
|
+
true: {
|
|
1428
|
+
title: {
|
|
1429
|
+
paddingBlockEnd: "8";
|
|
1430
|
+
paddingInlineStart: "16";
|
|
1431
|
+
};
|
|
1432
|
+
titleBlock: {
|
|
1433
|
+
gap: "4";
|
|
1434
|
+
paddingBlock: "4";
|
|
1435
|
+
};
|
|
1436
|
+
};
|
|
1437
|
+
false: {
|
|
1438
|
+
title: {
|
|
1439
|
+
paddingBlockEnd: "16";
|
|
1440
|
+
paddingInlineStart: "24";
|
|
1441
|
+
};
|
|
1442
|
+
titleBlock: {
|
|
1443
|
+
paddingBlock: "6";
|
|
1444
|
+
};
|
|
1445
|
+
};
|
|
1446
|
+
};
|
|
1447
|
+
isDisabled: {
|
|
1448
|
+
true: {
|
|
1449
|
+
item: {
|
|
1450
|
+
cursor: "not-allowed";
|
|
1451
|
+
_hover: {
|
|
1452
|
+
background: "transparent";
|
|
1453
|
+
_active: {
|
|
1454
|
+
background: "transparent";
|
|
1455
|
+
};
|
|
1456
|
+
};
|
|
1457
|
+
_active: {
|
|
1458
|
+
background: "transparent";
|
|
1459
|
+
};
|
|
1460
|
+
};
|
|
1461
|
+
itemIcon: {
|
|
1462
|
+
color: "icon/disabled";
|
|
1463
|
+
_groupHover: {
|
|
1464
|
+
color: "icon/disabled";
|
|
1465
|
+
};
|
|
1466
|
+
};
|
|
1467
|
+
itemLabel: {
|
|
1468
|
+
color: "text/disabled";
|
|
1469
|
+
};
|
|
1470
|
+
suffixIcon: {
|
|
1471
|
+
display: "none";
|
|
1472
|
+
_groupHover: {
|
|
1473
|
+
display: "none";
|
|
1474
|
+
};
|
|
1475
|
+
};
|
|
1476
|
+
};
|
|
1477
|
+
false: {};
|
|
1478
|
+
};
|
|
1479
|
+
selected: {
|
|
1480
|
+
true: {
|
|
1481
|
+
item: {
|
|
1482
|
+
background: "background/selected";
|
|
1483
|
+
_hover: {
|
|
1484
|
+
background: "background/selected-hover";
|
|
1485
|
+
_active: {
|
|
1486
|
+
background: "background/selected-active";
|
|
1487
|
+
};
|
|
1488
|
+
};
|
|
1489
|
+
_active: {
|
|
1490
|
+
background: "background/selected-active";
|
|
1491
|
+
};
|
|
1492
|
+
};
|
|
1493
|
+
itemIcon: {
|
|
1494
|
+
color: "icon/interactive";
|
|
1495
|
+
_groupHover: {
|
|
1496
|
+
color: "icon/interactive-hover";
|
|
1497
|
+
};
|
|
1498
|
+
};
|
|
1499
|
+
itemLabel: {
|
|
1500
|
+
textStyle: "body/md/semibold";
|
|
1501
|
+
};
|
|
1502
|
+
};
|
|
1503
|
+
false: {};
|
|
1504
|
+
};
|
|
1505
|
+
}>;
|
|
1425
1506
|
pagination: import('@chakra-ui/react').SlotRecipeDefinition<"text" | "root" | "itemsBlock" | "itemsSelect" | "pageBlock" | "pageSelect", {
|
|
1426
1507
|
variant: {
|
|
1427
1508
|
card: {
|
|
@@ -1758,27 +1839,6 @@ declare const slotRecipes: {
|
|
|
1758
1839
|
};
|
|
1759
1840
|
};
|
|
1760
1841
|
}>;
|
|
1761
|
-
sidebar: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "itemIcon" | "divider" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
|
|
1762
|
-
selected: {
|
|
1763
|
-
true: {
|
|
1764
|
-
item: {
|
|
1765
|
-
background: "background/selected";
|
|
1766
|
-
_hover: {
|
|
1767
|
-
background: "background/selected-hover";
|
|
1768
|
-
};
|
|
1769
|
-
};
|
|
1770
|
-
itemIcon: {
|
|
1771
|
-
color: "icon/interactive";
|
|
1772
|
-
};
|
|
1773
|
-
itemLabel: {
|
|
1774
|
-
textStyle: "body/lg/semibold";
|
|
1775
|
-
};
|
|
1776
|
-
selectionMarker: {
|
|
1777
|
-
display: "block";
|
|
1778
|
-
};
|
|
1779
|
-
};
|
|
1780
|
-
};
|
|
1781
|
-
}>;
|
|
1782
1842
|
select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemIcon" | "valueIcon", {
|
|
1783
1843
|
hasStatusIcon: {
|
|
1784
1844
|
true: {
|
|
@@ -34,6 +34,7 @@ import nativeSelectSlotRecipe from "./NativeSelect.recipe.js";
|
|
|
34
34
|
import noteCardSlotRecipe from "./NoteCard.recipe.js";
|
|
35
35
|
import overflowContentSlotRecipe from "./OverflowContent.recipe.js";
|
|
36
36
|
import pageFooterSlotRecipe from "./PageFooter.recipe.js";
|
|
37
|
+
import pageSidebarSlotRecipe from "./PageSidebar.recipe.js";
|
|
37
38
|
import paginationSlotRecipe from "./Pagination.recipe.js";
|
|
38
39
|
import paginationLoadMoreRecipe from "./PaginationLoadMore.recipe.js";
|
|
39
40
|
import popoverSlotRecipe from "./Popover.recipe.js";
|
|
@@ -44,7 +45,6 @@ import ribbonSlotRecipe from "./Ribbon.recipe.js";
|
|
|
44
45
|
import sectionHeadingRecipe from "./SectionHeading.recipe.js";
|
|
45
46
|
import segmentGroupSlotRecipe from "./SegmentGroup.recipe.js";
|
|
46
47
|
import settingsCardSlotRecipe from "./SettingsCard.recipe.js";
|
|
47
|
-
import sidebarSlotRecipe from "./Sidebar.recipe.js";
|
|
48
48
|
import splitButtonSlotRecipe from "./SplitButton.recipe.js";
|
|
49
49
|
import statSlotRecipe from "./Stat.recipe.js";
|
|
50
50
|
import stepCardSlotRecipe from "./StepCard.recipe.js";
|
|
@@ -95,6 +95,7 @@ var slotRecipes = {
|
|
|
95
95
|
numberInput: numberInputSlotRecipe,
|
|
96
96
|
overflowContent: overflowContentSlotRecipe,
|
|
97
97
|
pageFooter: pageFooterSlotRecipe,
|
|
98
|
+
pageSidebar: pageSidebarSlotRecipe,
|
|
98
99
|
pagination: paginationSlotRecipe,
|
|
99
100
|
paginationLoadMore: paginationLoadMoreRecipe,
|
|
100
101
|
popover: popoverSlotRecipe,
|
|
@@ -105,7 +106,6 @@ var slotRecipes = {
|
|
|
105
106
|
sectionHeading: sectionHeadingRecipe,
|
|
106
107
|
labeledData: labeledDataSlotRecipe,
|
|
107
108
|
segmentGroup: segmentGroupSlotRecipe,
|
|
108
|
-
sidebar: sidebarSlotRecipe,
|
|
109
109
|
select: selectSlotRecipe,
|
|
110
110
|
settingsCard: settingsCardSlotRecipe,
|
|
111
111
|
splitButton: splitButtonSlotRecipe,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pageSidebar: pageSidebarSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n progress: progressSlotRecipe,\n qrCode: qrCodeSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n tooltip: tooltipSlotRecipe,\n tour: tourSlotRecipe,\n treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,MAAM;CACN,UAAU;AACZ"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Reports whether an element's text is actually clipped by its own box.
|
|
3
|
+
*
|
|
4
|
+
* `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip
|
|
5
|
+
* that repeats a label the user can already read in full is noise — so pass the result as its
|
|
6
|
+
* `disabled` prop to keep it out of the way when the text fits.
|
|
7
|
+
*
|
|
8
|
+
* Attach the returned `ref` to the element that truncates:
|
|
9
|
+
*
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);
|
|
12
|
+
* <BitkitOverflowTooltip disabled={!isTruncated} text={label}>
|
|
13
|
+
* <Text ref={ref} truncate>{label}</Text>
|
|
14
|
+
* </BitkitOverflowTooltip>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* The measured node is tracked in state rather than a `RefObject` so that it can be an effect
|
|
18
|
+
* dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run
|
|
19
|
+
* when React swaps the node — which happens whenever an element changes type, say a row rendering
|
|
20
|
+
* as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the
|
|
21
|
+
* result would freeze at whatever it last measured.
|
|
22
|
+
*/
|
|
23
|
+
declare const useIsTruncated: <T extends HTMLElement>(value?: unknown) => {
|
|
24
|
+
isTruncated: boolean;
|
|
25
|
+
ref: import('react').Dispatch<import('react').SetStateAction<T | null>>;
|
|
26
|
+
};
|
|
27
|
+
export default useIsTruncated;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
//#region lib/utilities/useIsTruncated.ts
|
|
3
|
+
/**
|
|
4
|
+
* Reports whether an element's text is actually clipped by its own box.
|
|
5
|
+
*
|
|
6
|
+
* `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip
|
|
7
|
+
* that repeats a label the user can already read in full is noise — so pass the result as its
|
|
8
|
+
* `disabled` prop to keep it out of the way when the text fits.
|
|
9
|
+
*
|
|
10
|
+
* Attach the returned `ref` to the element that truncates:
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);
|
|
14
|
+
* <BitkitOverflowTooltip disabled={!isTruncated} text={label}>
|
|
15
|
+
* <Text ref={ref} truncate>{label}</Text>
|
|
16
|
+
* </BitkitOverflowTooltip>
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* The measured node is tracked in state rather than a `RefObject` so that it can be an effect
|
|
20
|
+
* dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run
|
|
21
|
+
* when React swaps the node — which happens whenever an element changes type, say a row rendering
|
|
22
|
+
* as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the
|
|
23
|
+
* result would freeze at whatever it last measured.
|
|
24
|
+
*/
|
|
25
|
+
var useIsTruncated = (value) => {
|
|
26
|
+
const [node, setNode] = useState(null);
|
|
27
|
+
const [isTruncated, setIsTruncated] = useState(false);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (!node) return;
|
|
30
|
+
const measure = () => setIsTruncated(node.scrollWidth > node.clientWidth + 1);
|
|
31
|
+
measure();
|
|
32
|
+
let cancelled = false;
|
|
33
|
+
document.fonts?.ready.then(() => {
|
|
34
|
+
if (!cancelled) measure();
|
|
35
|
+
});
|
|
36
|
+
const observer = new ResizeObserver(measure);
|
|
37
|
+
observer.observe(node);
|
|
38
|
+
return () => {
|
|
39
|
+
cancelled = true;
|
|
40
|
+
observer.disconnect();
|
|
41
|
+
};
|
|
42
|
+
}, [node, value]);
|
|
43
|
+
return {
|
|
44
|
+
isTruncated,
|
|
45
|
+
ref: setNode
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
//#endregion
|
|
49
|
+
export { useIsTruncated as default };
|
|
50
|
+
|
|
51
|
+
//# sourceMappingURL=useIsTruncated.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsTruncated.js","names":[],"sources":["../../lib/utilities/useIsTruncated.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Reports whether an element's text is actually clipped by its own box.\n *\n * `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip\n * that repeats a label the user can already read in full is noise — so pass the result as its\n * `disabled` prop to keep it out of the way when the text fits.\n *\n * Attach the returned `ref` to the element that truncates:\n *\n * ```tsx\n * const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);\n * <BitkitOverflowTooltip disabled={!isTruncated} text={label}>\n * <Text ref={ref} truncate>{label}</Text>\n * </BitkitOverflowTooltip>\n * ```\n *\n * The measured node is tracked in state rather than a `RefObject` so that it can be an effect\n * dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run\n * when React swaps the node — which happens whenever an element changes type, say a row rendering\n * as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the\n * result would freeze at whatever it last measured.\n */\nconst useIsTruncated = <T extends HTMLElement>(value?: unknown) => {\n const [node, setNode] = useState<T | null>(null);\n const [isTruncated, setIsTruncated] = useState(false);\n\n useEffect(() => {\n // No reset when the node is missing: React nulls the ref and hands over the replacement in the\n // same commit, and the effect re-runs to measure it. Resetting here would only add a render.\n if (!node) {\n return;\n }\n\n // 1px of slack: sub-pixel text metrics make `scrollWidth` exceed `clientWidth` by a fraction on\n // labels that actually fit, which would show a tooltip repeating the whole visible label.\n const measure = () => setIsTruncated(node.scrollWidth > node.clientWidth + 1);\n\n measure();\n\n // The element's own box is fixed by its container, so swapping the fallback font for the real\n // one changes how wide the *text* renders without ever resizing the element — a ResizeObserver\n // never fires for that. Re-measure once the webfonts are in.\n let cancelled = false;\n void document.fonts?.ready.then(() => {\n if (!cancelled) {\n measure();\n }\n });\n\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n\n return () => {\n cancelled = true;\n observer.disconnect();\n };\n }, [node, value]);\n\n return { isTruncated, ref: setNode };\n};\n\nexport default useIsTruncated;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAM,kBAAyC,UAAoB;CACjE,MAAM,CAAC,MAAM,WAAW,SAAmB,IAAI;CAC/C,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,gBAAgB;EAGd,IAAI,CAAC,MACH;EAKF,MAAM,gBAAgB,eAAe,KAAK,cAAc,KAAK,cAAc,CAAC;EAE5E,QAAQ;EAKR,IAAI,YAAY;EAChB,SAAc,OAAO,MAAM,WAAW;GACpC,IAAI,CAAC,WACH,QAAQ;EAEZ,CAAC;EAED,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,IAAI;EAErB,aAAa;GACX,YAAY;GACZ,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,OAAO;EAAE;EAAa,KAAK;CAAQ;AACrC"}
|
|
@@ -249,12 +249,15 @@ If your codebase has a local `card.tsx` wrapper around v1 Card (e.g. Shadcn-styl
|
|
|
249
249
|
### Sidebar & Breadcrumb
|
|
250
250
|
|
|
251
251
|
```tsx
|
|
252
|
-
// Sidebar v2
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
<
|
|
256
|
-
<
|
|
257
|
-
|
|
252
|
+
// Sidebar v2 — note the rename: v1 `Sidebar` maps to `BitkitPageSidebar`.
|
|
253
|
+
// It stands at least viewport-tall; an embedded panel opts out with `minHeight="auto"`.
|
|
254
|
+
<BitkitPageSidebar>
|
|
255
|
+
<BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>
|
|
256
|
+
<BitkitPageSidebar.Body>
|
|
257
|
+
<BitkitPageSidebar.GroupHeading label="Group" />
|
|
258
|
+
<BitkitPageSidebar.Item icon={IconName} selected={...}>Label</BitkitPageSidebar.Item>
|
|
259
|
+
</BitkitPageSidebar.Body>
|
|
260
|
+
</BitkitPageSidebar>
|
|
258
261
|
|
|
259
262
|
// Breadcrumb v2
|
|
260
263
|
<BitkitBreadcrumb>
|
package/package.json
CHANGED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
-
import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
|
|
3
|
-
import { ReactNode } from 'react';
|
|
4
|
-
import { BitkitIconComponent } from '../../icons';
|
|
5
|
-
import { BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';
|
|
6
|
-
export interface BitkitSidebarProps extends BoxProps {
|
|
7
|
-
children: ReactNode;
|
|
8
|
-
}
|
|
9
|
-
interface BitkitSidebarItemCommonProps {
|
|
10
|
-
badge?: ReactNode;
|
|
11
|
-
children: ReactNode;
|
|
12
|
-
icon?: BitkitIconComponent;
|
|
13
|
-
selected?: boolean;
|
|
14
|
-
suffixIcon?: BitkitIconComponent;
|
|
15
|
-
}
|
|
16
|
-
interface BitkitSidebarItemLinkProps extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitSidebarItemCommonProps {
|
|
17
|
-
href: string;
|
|
18
|
-
}
|
|
19
|
-
interface BitkitSidebarItemButtonProps extends Omit<HTMLChakraProps<'button'>, 'children'>, BitkitSidebarItemCommonProps {
|
|
20
|
-
href?: never;
|
|
21
|
-
}
|
|
22
|
-
export type BitkitSidebarItemProps = BitkitSidebarItemButtonProps | BitkitSidebarItemLinkProps;
|
|
23
|
-
export interface BitkitSidebarTitleProps extends BoxProps {
|
|
24
|
-
backHref?: string;
|
|
25
|
-
backLabel?: string;
|
|
26
|
-
children: ReactNode;
|
|
27
|
-
onBackClick?: () => void;
|
|
28
|
-
}
|
|
29
|
-
export interface BitkitSidebarFooterProps extends BoxProps {
|
|
30
|
-
children: ReactNode;
|
|
31
|
-
}
|
|
32
|
-
export interface BitkitSidebarProjectProps extends BoxProps {
|
|
33
|
-
label: string;
|
|
34
|
-
value: string;
|
|
35
|
-
}
|
|
36
|
-
export type BitkitSidebarGroupHeadingProps = BitkitGroupHeadingProps;
|
|
37
|
-
declare const _default: import('react').ForwardRefExoticComponent<BitkitSidebarProps & import('react').RefAttributes<HTMLElement>> & {
|
|
38
|
-
Divider: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
|
|
39
|
-
Footer: import('react').ForwardRefExoticComponent<BitkitSidebarFooterProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
40
|
-
GroupHeading: import('react').ForwardRefExoticComponent<BitkitGroupHeadingProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
41
|
-
Item: import('react').ForwardRefExoticComponent<BitkitSidebarItemProps & import('react').RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
|
|
42
|
-
Project: import('react').ForwardRefExoticComponent<BitkitSidebarProjectProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
43
|
-
Title: import('react').ForwardRefExoticComponent<BitkitSidebarTitleProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
44
|
-
};
|
|
45
|
-
export default _default;
|