@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.
Files changed (29) hide show
  1. package/dist/components/BitkitControlButton/BitkitControlButton.js +1 -0
  2. package/dist/components/BitkitControlButton/BitkitControlButton.js.map +1 -1
  3. package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts +2 -0
  4. package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js +15 -11
  5. package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
  6. package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts +74 -0
  7. package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +244 -0
  8. package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +1 -0
  9. package/dist/components/index.d.ts +1 -1
  10. package/dist/main.js +2 -2
  11. package/dist/theme/slot-recipes/GroupHeading.recipe.js +4 -1
  12. package/dist/theme/slot-recipes/GroupHeading.recipe.js.map +1 -1
  13. package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts +82 -0
  14. package/dist/theme/slot-recipes/PageSidebar.recipe.js +230 -0
  15. package/dist/theme/slot-recipes/PageSidebar.recipe.js.map +1 -0
  16. package/dist/theme/slot-recipes/index.d.ts +81 -21
  17. package/dist/theme/slot-recipes/index.js +2 -2
  18. package/dist/theme/slot-recipes/index.js.map +1 -1
  19. package/dist/utilities/useIsTruncated.d.ts +27 -0
  20. package/dist/utilities/useIsTruncated.js +51 -0
  21. package/dist/utilities/useIsTruncated.js.map +1 -0
  22. package/docs/v1-to-v2-migration-guide.md +9 -6
  23. package/package.json +1 -1
  24. package/dist/components/BitkitSidebar/BitkitSidebar.d.ts +0 -45
  25. package/dist/components/BitkitSidebar/BitkitSidebar.js +0 -147
  26. package/dist/components/BitkitSidebar/BitkitSidebar.js.map +0 -1
  27. package/dist/theme/slot-recipes/Sidebar.recipe.d.ts +0 -22
  28. package/dist/theme/slot-recipes/Sidebar.recipe.js +0 -143
  29. 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 sidebarSlotRecipe from './Sidebar.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 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 sidebar: sidebarSlotRecipe,\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,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,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"}
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
- <BitkitSidebar>
254
- <BitkitSidebar.Title>Title</BitkitSidebar.Title>
255
- <BitkitSidebar.GroupHeading>Group</BitkitSidebar.GroupHeading>
256
- <BitkitSidebar.Item icon={IconName} selected={...}>Label</BitkitSidebar.Item>
257
- </BitkitSidebar>
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,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.358",
4
+ "version": "0.3.359",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",
@@ -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;