@bitrise/bitkit-v2 0.3.412-beta.2661 → 0.3.412
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/BitkitCombobox/BitkitCombobox.d.ts +5 -5
- package/dist/components/BitkitCombobox/BitkitCombobox.js +7 -3
- package/dist/components/BitkitCombobox/BitkitCombobox.js.map +1 -1
- package/dist/components/BitkitControlButton/BitkitControlButton.js +0 -1
- package/dist/components/BitkitControlButton/BitkitControlButton.js.map +1 -1
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts +0 -2
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js +11 -15
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
- package/dist/components/BitkitMultiselect/BitkitMultiselect.d.ts +9 -5
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js +25 -13
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map +1 -1
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.d.ts +3 -3
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map +1 -1
- package/dist/components/BitkitSelect/BitkitSelect.d.ts +5 -5
- package/dist/components/BitkitSelect/BitkitSelect.js +2 -1
- package/dist/components/BitkitSelect/BitkitSelect.js.map +1 -1
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts +10 -3
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js +5 -1
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js.map +1 -1
- package/dist/components/BitkitSelectMenu/SelectMenuShell.d.ts +3 -3
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js +10 -2
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.d.ts +45 -0
- package/dist/components/BitkitSidebar/BitkitSidebar.js +147 -0
- package/dist/components/BitkitSidebar/BitkitSidebar.js.map +1 -0
- package/dist/components/BitkitTagsInput/BitkitTagsInput.js +10 -8
- package/dist/components/BitkitTagsInput/BitkitTagsInput.js.map +1 -1
- package/dist/components/index.d.ts +1 -2
- package/dist/main.js +2 -3
- package/dist/theme/slot-recipes/GroupHeading.recipe.js +1 -4
- package/dist/theme/slot-recipes/GroupHeading.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Select.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/Select.recipe.js +5 -0
- package/dist/theme/slot-recipes/Select.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Sidebar.recipe.d.ts +22 -0
- package/dist/theme/slot-recipes/Sidebar.recipe.js +143 -0
- package/dist/theme/slot-recipes/Sidebar.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/Tour.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/index.d.ts +23 -287
- package/dist/theme/slot-recipes/index.js +2 -4
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/docs/v1-to-v2-migration-guide.md +6 -9
- package/package.json +1 -1
- package/dist/components/BitkitPageHeader/BitkitPageHeader.d.ts +0 -120
- package/dist/components/BitkitPageHeader/BitkitPageHeader.js +0 -103
- package/dist/components/BitkitPageHeader/BitkitPageHeader.js.map +0 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts +0 -74
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +0 -263
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +0 -1
- package/dist/theme/slot-recipes/PageHeader.recipe.d.ts +0 -202
- package/dist/theme/slot-recipes/PageHeader.recipe.js +0 -354
- package/dist/theme/slot-recipes/PageHeader.recipe.js.map +0 -1
- package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts +0 -85
- package/dist/theme/slot-recipes/PageSidebar.recipe.js +0 -276
- package/dist/theme/slot-recipes/PageSidebar.recipe.js.map +0 -1
- package/dist/utilities/useIsTruncated.d.ts +0 -27
- package/dist/utilities/useIsTruncated.js +0 -54
- package/dist/utilities/useIsTruncated.js.map +0 -1
|
@@ -1,276 +0,0 @@
|
|
|
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: {
|
|
35
|
-
base: "none",
|
|
36
|
-
tablet: rem(320)
|
|
37
|
-
},
|
|
38
|
-
minWidth: rem(240),
|
|
39
|
-
paddingBlockStart: "16",
|
|
40
|
-
width: {
|
|
41
|
-
base: "full",
|
|
42
|
-
tablet: rem(240)
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
body: {
|
|
46
|
-
display: "flex",
|
|
47
|
-
flex: 1,
|
|
48
|
-
flexDirection: "column",
|
|
49
|
-
marginBlockEnd: "16",
|
|
50
|
-
width: "full"
|
|
51
|
-
},
|
|
52
|
-
title: {
|
|
53
|
-
alignItems: "center",
|
|
54
|
-
color: "text/primary",
|
|
55
|
-
display: "flex",
|
|
56
|
-
flexShrink: 0,
|
|
57
|
-
overflow: "clip",
|
|
58
|
-
paddingInlineEnd: "32"
|
|
59
|
-
},
|
|
60
|
-
titleBlock: {
|
|
61
|
-
alignItems: "center",
|
|
62
|
-
display: "flex",
|
|
63
|
-
minWidth: 0
|
|
64
|
-
},
|
|
65
|
-
titleText: {
|
|
66
|
-
textStyle: "heading/h3",
|
|
67
|
-
whiteSpace: "nowrap"
|
|
68
|
-
},
|
|
69
|
-
item: {
|
|
70
|
-
alignItems: "center",
|
|
71
|
-
cursor: "pointer",
|
|
72
|
-
display: "flex",
|
|
73
|
-
focusVisibleRing: "inside",
|
|
74
|
-
gap: "12",
|
|
75
|
-
overflow: "clip",
|
|
76
|
-
paddingBlock: {
|
|
77
|
-
base: "12",
|
|
78
|
-
tablet: "8"
|
|
79
|
-
},
|
|
80
|
-
paddingInline: "24",
|
|
81
|
-
position: "relative",
|
|
82
|
-
width: "full",
|
|
83
|
-
_hover: {
|
|
84
|
-
background: {
|
|
85
|
-
base: "background/hover",
|
|
86
|
-
tablet: "background/secondary"
|
|
87
|
-
},
|
|
88
|
-
_active: { background: {
|
|
89
|
-
base: "background/active",
|
|
90
|
-
tablet: "background/tertiary"
|
|
91
|
-
} }
|
|
92
|
-
},
|
|
93
|
-
_active: { background: {
|
|
94
|
-
base: "background/active",
|
|
95
|
-
tablet: "background/tertiary"
|
|
96
|
-
} },
|
|
97
|
-
_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
|
|
98
|
-
},
|
|
99
|
-
contentBlock: {
|
|
100
|
-
alignItems: "center",
|
|
101
|
-
display: "flex",
|
|
102
|
-
flex: 1,
|
|
103
|
-
gap: "12",
|
|
104
|
-
minWidth: 0,
|
|
105
|
-
paddingBlock: {
|
|
106
|
-
base: "0",
|
|
107
|
-
tablet: "2"
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
itemIcon: {
|
|
111
|
-
color: "icon/secondary",
|
|
112
|
-
flexShrink: 0,
|
|
113
|
-
_groupHover: { color: "icon/primary" }
|
|
114
|
-
},
|
|
115
|
-
itemLabel: {
|
|
116
|
-
color: "text/primary",
|
|
117
|
-
flex: 1,
|
|
118
|
-
minWidth: 0,
|
|
119
|
-
overflow: "hidden",
|
|
120
|
-
textAlign: "start",
|
|
121
|
-
textOverflow: "ellipsis",
|
|
122
|
-
textStyle: {
|
|
123
|
-
base: "body/lg/regular",
|
|
124
|
-
tablet: "body/md/regular"
|
|
125
|
-
},
|
|
126
|
-
whiteSpace: "nowrap"
|
|
127
|
-
},
|
|
128
|
-
suffixIcon: {
|
|
129
|
-
color: "icon/tertiary",
|
|
130
|
-
flexShrink: 0
|
|
131
|
-
},
|
|
132
|
-
selectionMarker: {
|
|
133
|
-
background: "border/selected",
|
|
134
|
-
borderEndStartRadius: {
|
|
135
|
-
base: "0",
|
|
136
|
-
tablet: "2"
|
|
137
|
-
},
|
|
138
|
-
borderStartStartRadius: {
|
|
139
|
-
base: "0",
|
|
140
|
-
tablet: "2"
|
|
141
|
-
},
|
|
142
|
-
height: "full",
|
|
143
|
-
insetBlockStart: 0,
|
|
144
|
-
insetInlineEnd: 0,
|
|
145
|
-
position: "absolute",
|
|
146
|
-
width: {
|
|
147
|
-
base: "4",
|
|
148
|
-
tablet: "2"
|
|
149
|
-
}
|
|
150
|
-
},
|
|
151
|
-
footer: {
|
|
152
|
-
borderBlockStart: "1px solid",
|
|
153
|
-
borderColor: "border/minimal",
|
|
154
|
-
display: "flex",
|
|
155
|
-
flexDirection: "column",
|
|
156
|
-
flexShrink: 0,
|
|
157
|
-
paddingBlock: "8"
|
|
158
|
-
},
|
|
159
|
-
project: {
|
|
160
|
-
display: "flex",
|
|
161
|
-
flexDirection: "column",
|
|
162
|
-
gap: "4",
|
|
163
|
-
justifyContent: "center",
|
|
164
|
-
overflow: "clip",
|
|
165
|
-
paddingBlockEnd: {
|
|
166
|
-
base: "12",
|
|
167
|
-
tablet: "8"
|
|
168
|
-
},
|
|
169
|
-
paddingBlockStart: "8",
|
|
170
|
-
paddingInlineEnd: {
|
|
171
|
-
base: "24",
|
|
172
|
-
tablet: "32"
|
|
173
|
-
},
|
|
174
|
-
paddingInlineStart: "24",
|
|
175
|
-
whiteSpace: "nowrap"
|
|
176
|
-
},
|
|
177
|
-
projectLabel: {
|
|
178
|
-
color: "text/tertiary",
|
|
179
|
-
textStyle: "heading/h6"
|
|
180
|
-
},
|
|
181
|
-
projectValue: {
|
|
182
|
-
color: "text/body",
|
|
183
|
-
overflow: "hidden",
|
|
184
|
-
textOverflow: "ellipsis",
|
|
185
|
-
textStyle: "body/lg/semibold"
|
|
186
|
-
},
|
|
187
|
-
projectValueWrapper: {
|
|
188
|
-
display: "flex",
|
|
189
|
-
minWidth: 0
|
|
190
|
-
},
|
|
191
|
-
divider: {
|
|
192
|
-
borderColor: "border/minimal",
|
|
193
|
-
marginBlock: {
|
|
194
|
-
base: "20",
|
|
195
|
-
tablet: "16"
|
|
196
|
-
},
|
|
197
|
-
marginInline: "24",
|
|
198
|
-
width: "auto"
|
|
199
|
-
}
|
|
200
|
-
},
|
|
201
|
-
variants: {
|
|
202
|
-
hasBack: {
|
|
203
|
-
true: {
|
|
204
|
-
title: {
|
|
205
|
-
paddingBlockEnd: "8",
|
|
206
|
-
paddingInlineStart: "16"
|
|
207
|
-
},
|
|
208
|
-
titleBlock: {
|
|
209
|
-
gap: "4",
|
|
210
|
-
paddingBlock: "4"
|
|
211
|
-
}
|
|
212
|
-
},
|
|
213
|
-
false: {
|
|
214
|
-
title: {
|
|
215
|
-
paddingBlockEnd: "16",
|
|
216
|
-
paddingInlineStart: "24"
|
|
217
|
-
},
|
|
218
|
-
titleBlock: { paddingBlock: "6" }
|
|
219
|
-
}
|
|
220
|
-
},
|
|
221
|
-
isDisabled: {
|
|
222
|
-
true: {
|
|
223
|
-
item: {
|
|
224
|
-
cursor: "not-allowed",
|
|
225
|
-
_hover: {
|
|
226
|
-
background: "transparent",
|
|
227
|
-
_active: { background: "transparent" }
|
|
228
|
-
},
|
|
229
|
-
_active: { background: "transparent" }
|
|
230
|
-
},
|
|
231
|
-
itemIcon: {
|
|
232
|
-
color: "icon/disabled",
|
|
233
|
-
_groupHover: { color: "icon/disabled" }
|
|
234
|
-
},
|
|
235
|
-
itemLabel: { color: "text/disabled" }
|
|
236
|
-
},
|
|
237
|
-
false: {}
|
|
238
|
-
},
|
|
239
|
-
selected: {
|
|
240
|
-
true: {
|
|
241
|
-
item: {
|
|
242
|
-
background: "background/selected",
|
|
243
|
-
_hover: {
|
|
244
|
-
background: "background/selected-hover",
|
|
245
|
-
_active: { background: {
|
|
246
|
-
base: "background/selected-hover",
|
|
247
|
-
tablet: "background/selected-active"
|
|
248
|
-
} }
|
|
249
|
-
},
|
|
250
|
-
_active: { background: {
|
|
251
|
-
base: "background/selected-hover",
|
|
252
|
-
tablet: "background/selected-active"
|
|
253
|
-
} }
|
|
254
|
-
},
|
|
255
|
-
itemIcon: {
|
|
256
|
-
color: "icon/interactive",
|
|
257
|
-
_groupHover: { color: "icon/interactive-hover" }
|
|
258
|
-
},
|
|
259
|
-
itemLabel: { textStyle: {
|
|
260
|
-
base: "body/lg/semibold",
|
|
261
|
-
tablet: "body/md/semibold"
|
|
262
|
-
} }
|
|
263
|
-
},
|
|
264
|
-
false: {}
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
|
-
defaultVariants: {
|
|
268
|
-
hasBack: false,
|
|
269
|
-
isDisabled: false,
|
|
270
|
-
selected: false
|
|
271
|
-
}
|
|
272
|
-
});
|
|
273
|
-
//#endregion
|
|
274
|
-
export { pageSidebarSlotRecipe as default };
|
|
275
|
-
|
|
276
|
-
//# sourceMappingURL=PageSidebar.recipe.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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 // Below `tablet` the sidebar is the whole view — Figma's mobile frame (`23056:50745`) is the\n // full 375 of the phone, not a 240 column beside a page.\n maxWidth: { base: 'none', tablet: rem(320) },\n minWidth: rem(240),\n paddingBlockStart: '16',\n width: { base: 'full', tablet: 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 // 48 tall on mobile against 40 on desktop — the row is a touch target there.\n paddingBlock: { base: '12', tablet: '8' },\n paddingInline: '24',\n position: 'relative',\n width: 'full',\n // Mobile reaches for `background/hover` / `background/active` where desktop uses the\n // `secondary` / `tertiary` surfaces. The two happen to resolve close, but they are separate\n // tokens in the design and the mobile item (`9221:4406`) binds these.\n _hover: {\n background: { base: 'background/hover', tablet: 'background/secondary' },\n _active: {\n background: { base: 'background/active', tablet: 'background/tertiary' },\n },\n },\n _active: {\n background: { base: 'background/active', tablet: '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 // Pads the 16px icon out to the 24px line box on desktop. The mobile icon is already 24, so\n // there is nothing to make up — the row would just grow past 48.\n paddingBlock: { base: '0', tablet: '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: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n whiteSpace: 'nowrap',\n },\n suffixIcon: {\n color: 'icon/tertiary',\n flexShrink: 0,\n },\n selectionMarker: {\n background: 'border/selected',\n // Mobile draws the marker as a plain 4px edge (`9221:4417`); desktop as a 2px rounded rule.\n borderEndStartRadius: { base: '0', tablet: '2' },\n borderStartStartRadius: { base: '0', tablet: '2' },\n height: 'full',\n insetBlockStart: 0,\n insetInlineEnd: 0,\n position: 'absolute',\n width: { base: '4', tablet: '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 paddingBlockEnd: { base: '12', tablet: '8' },\n paddingBlockStart: '8',\n paddingInlineEnd: { base: '24', tablet: '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` — 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 // Mobile's separator row is 40 tall, which centres the rule at 19.5 a side; 20 is the token\n // next to it and the resulting 1px lands nowhere the eye can find it.\n marginBlock: { base: '20', tablet: '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 },\n false: {},\n },\n selected: {\n true: {\n item: {\n background: 'background/selected',\n _hover: {\n background: 'background/selected-hover',\n _active: {\n background: { base: 'background/selected-hover', tablet: 'background/selected-active' },\n },\n },\n _active: {\n background: { base: 'background/selected-hover', tablet: 'background/selected-active' },\n },\n },\n itemIcon: {\n color: 'icon/interactive',\n _groupHover: {\n color: 'icon/interactive-hover',\n },\n },\n itemLabel: {\n textStyle: { base: 'body/lg/semibold', tablet: '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":"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"}
|
|
@@ -1,27 +0,0 @@
|
|
|
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;
|
|
@@ -1,54 +0,0 @@
|
|
|
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
|
-
if (typeof ResizeObserver === "undefined") return () => {
|
|
37
|
-
cancelled = true;
|
|
38
|
-
};
|
|
39
|
-
const observer = new ResizeObserver(measure);
|
|
40
|
-
observer.observe(node);
|
|
41
|
-
return () => {
|
|
42
|
-
cancelled = true;
|
|
43
|
-
observer.disconnect();
|
|
44
|
-
};
|
|
45
|
-
}, [node, value]);
|
|
46
|
-
return {
|
|
47
|
-
isTruncated,
|
|
48
|
-
ref: setNode
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
//#endregion
|
|
52
|
-
export { useIsTruncated as default };
|
|
53
|
-
|
|
54
|
-
//# sourceMappingURL=useIsTruncated.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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 if (typeof ResizeObserver === 'undefined') {\n return () => {\n cancelled = true;\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,IAAI,OAAO,mBAAmB,aAC5B,aAAa;GACX,YAAY;EACd;EAGF,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"}
|