@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
|
@@ -1427,291 +1427,6 @@ declare const slotRecipes: {
|
|
|
1427
1427
|
};
|
|
1428
1428
|
};
|
|
1429
1429
|
}>;
|
|
1430
|
-
pageHeader: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "headerBlock" | "contentBlock" | "textBlock" | "titleRow" | "actionBlock", {
|
|
1431
|
-
contentVariant: {
|
|
1432
|
-
title: {
|
|
1433
|
-
titleBlock: {
|
|
1434
|
-
alignItems: "center";
|
|
1435
|
-
gap: "12";
|
|
1436
|
-
};
|
|
1437
|
-
textBlock: {
|
|
1438
|
-
gap: "4";
|
|
1439
|
-
};
|
|
1440
|
-
};
|
|
1441
|
-
app: {
|
|
1442
|
-
titleBlock: {
|
|
1443
|
-
gap: "16";
|
|
1444
|
-
alignItems: "center";
|
|
1445
|
-
};
|
|
1446
|
-
title: {
|
|
1447
|
-
readonly textStyle: {
|
|
1448
|
-
readonly base: "heading/mobile/h2";
|
|
1449
|
-
readonly tablet: "heading/h2";
|
|
1450
|
-
};
|
|
1451
|
-
};
|
|
1452
|
-
secondaryText: {
|
|
1453
|
-
readonly textStyle: "body/md/regular";
|
|
1454
|
-
};
|
|
1455
|
-
};
|
|
1456
|
-
user: {
|
|
1457
|
-
titleBlock: {
|
|
1458
|
-
gap: "12";
|
|
1459
|
-
alignItems: "center";
|
|
1460
|
-
};
|
|
1461
|
-
title: {
|
|
1462
|
-
readonly textStyle: {
|
|
1463
|
-
readonly base: "heading/mobile/h2";
|
|
1464
|
-
readonly tablet: "heading/h2";
|
|
1465
|
-
};
|
|
1466
|
-
};
|
|
1467
|
-
secondaryText: {
|
|
1468
|
-
readonly textStyle: "body/md/regular";
|
|
1469
|
-
};
|
|
1470
|
-
};
|
|
1471
|
-
};
|
|
1472
|
-
hasBreadcrumb: {
|
|
1473
|
-
true: {
|
|
1474
|
-
headerBlock: {
|
|
1475
|
-
paddingBlockStart: "24";
|
|
1476
|
-
};
|
|
1477
|
-
};
|
|
1478
|
-
false: {};
|
|
1479
|
-
};
|
|
1480
|
-
hasControls: {
|
|
1481
|
-
true: {};
|
|
1482
|
-
false: {};
|
|
1483
|
-
};
|
|
1484
|
-
isSticky: {
|
|
1485
|
-
true: {
|
|
1486
|
-
headerBlock: {
|
|
1487
|
-
readonly tablet: {
|
|
1488
|
-
readonly alignItems: "center";
|
|
1489
|
-
readonly flexDirection: "row";
|
|
1490
|
-
readonly gap: "24";
|
|
1491
|
-
readonly minHeight: string;
|
|
1492
|
-
readonly paddingBlockEnd: "12";
|
|
1493
|
-
readonly paddingBlockStart: "12";
|
|
1494
|
-
readonly paddingInlineEnd: "32";
|
|
1495
|
-
readonly paddingInlineStart: "24";
|
|
1496
|
-
};
|
|
1497
|
-
};
|
|
1498
|
-
breadcrumb: {
|
|
1499
|
-
readonly tablet: {
|
|
1500
|
-
readonly flex: "0 1 auto";
|
|
1501
|
-
readonly minWidth: 0;
|
|
1502
|
-
};
|
|
1503
|
-
};
|
|
1504
|
-
contentBlock: {
|
|
1505
|
-
readonly tablet: {
|
|
1506
|
-
readonly alignItems: "center";
|
|
1507
|
-
readonly flex: "1 0 0";
|
|
1508
|
-
readonly gap: "24";
|
|
1509
|
-
readonly justifyContent: "flex-end";
|
|
1510
|
-
readonly minWidth: 0;
|
|
1511
|
-
};
|
|
1512
|
-
};
|
|
1513
|
-
titleBlock: {
|
|
1514
|
-
readonly tablet: {
|
|
1515
|
-
readonly alignItems: "center";
|
|
1516
|
-
};
|
|
1517
|
-
};
|
|
1518
|
-
title: {
|
|
1519
|
-
readonly tablet: {
|
|
1520
|
-
readonly textStyle: "heading/h3";
|
|
1521
|
-
};
|
|
1522
|
-
};
|
|
1523
|
-
actionBlock: {
|
|
1524
|
-
readonly tablet: {
|
|
1525
|
-
readonly alignItems: "center";
|
|
1526
|
-
readonly flexDirection: "row";
|
|
1527
|
-
readonly gap: "8";
|
|
1528
|
-
readonly width: "auto";
|
|
1529
|
-
};
|
|
1530
|
-
};
|
|
1531
|
-
avatar: {
|
|
1532
|
-
readonly tablet: {
|
|
1533
|
-
readonly display: "none";
|
|
1534
|
-
};
|
|
1535
|
-
};
|
|
1536
|
-
badge: {
|
|
1537
|
-
readonly tablet: {
|
|
1538
|
-
readonly display: "none";
|
|
1539
|
-
};
|
|
1540
|
-
};
|
|
1541
|
-
secondaryText: {
|
|
1542
|
-
readonly tablet: {
|
|
1543
|
-
readonly display: "none";
|
|
1544
|
-
};
|
|
1545
|
-
};
|
|
1546
|
-
tabs: {
|
|
1547
|
-
readonly tablet: {
|
|
1548
|
-
readonly display: "none";
|
|
1549
|
-
};
|
|
1550
|
-
};
|
|
1551
|
-
root: {
|
|
1552
|
-
tablet: {
|
|
1553
|
-
borderColor: "border/minimal";
|
|
1554
|
-
boxShadow: "elevation/sm";
|
|
1555
|
-
};
|
|
1556
|
-
};
|
|
1557
|
-
};
|
|
1558
|
-
false: {};
|
|
1559
|
-
};
|
|
1560
|
-
variant: {
|
|
1561
|
-
default: {};
|
|
1562
|
-
minimal: {
|
|
1563
|
-
readonly headerBlock: {
|
|
1564
|
-
readonly tablet: {
|
|
1565
|
-
readonly alignItems: "center";
|
|
1566
|
-
readonly flexDirection: "row";
|
|
1567
|
-
readonly gap: "24";
|
|
1568
|
-
readonly minHeight: string;
|
|
1569
|
-
readonly paddingBlockEnd: "12";
|
|
1570
|
-
readonly paddingBlockStart: "12";
|
|
1571
|
-
readonly paddingInlineEnd: "32";
|
|
1572
|
-
readonly paddingInlineStart: "24";
|
|
1573
|
-
};
|
|
1574
|
-
};
|
|
1575
|
-
readonly breadcrumb: {
|
|
1576
|
-
readonly tablet: {
|
|
1577
|
-
readonly flex: "0 1 auto";
|
|
1578
|
-
readonly minWidth: 0;
|
|
1579
|
-
};
|
|
1580
|
-
};
|
|
1581
|
-
readonly contentBlock: {
|
|
1582
|
-
readonly tablet: {
|
|
1583
|
-
readonly alignItems: "center";
|
|
1584
|
-
readonly flex: "1 0 0";
|
|
1585
|
-
readonly gap: "24";
|
|
1586
|
-
readonly justifyContent: "flex-end";
|
|
1587
|
-
readonly minWidth: 0;
|
|
1588
|
-
};
|
|
1589
|
-
};
|
|
1590
|
-
readonly titleBlock: {
|
|
1591
|
-
readonly tablet: {
|
|
1592
|
-
readonly alignItems: "center";
|
|
1593
|
-
};
|
|
1594
|
-
};
|
|
1595
|
-
readonly title: {
|
|
1596
|
-
readonly tablet: {
|
|
1597
|
-
readonly textStyle: "heading/h3";
|
|
1598
|
-
};
|
|
1599
|
-
};
|
|
1600
|
-
readonly actionBlock: {
|
|
1601
|
-
readonly tablet: {
|
|
1602
|
-
readonly alignItems: "center";
|
|
1603
|
-
readonly flexDirection: "row";
|
|
1604
|
-
readonly gap: "8";
|
|
1605
|
-
readonly width: "auto";
|
|
1606
|
-
};
|
|
1607
|
-
};
|
|
1608
|
-
readonly avatar: {
|
|
1609
|
-
readonly tablet: {
|
|
1610
|
-
readonly display: "none";
|
|
1611
|
-
};
|
|
1612
|
-
};
|
|
1613
|
-
readonly badge: {
|
|
1614
|
-
readonly tablet: {
|
|
1615
|
-
readonly display: "none";
|
|
1616
|
-
};
|
|
1617
|
-
};
|
|
1618
|
-
readonly secondaryText: {
|
|
1619
|
-
readonly tablet: {
|
|
1620
|
-
readonly display: "none";
|
|
1621
|
-
};
|
|
1622
|
-
};
|
|
1623
|
-
readonly tabs: {
|
|
1624
|
-
readonly tablet: {
|
|
1625
|
-
readonly display: "none";
|
|
1626
|
-
};
|
|
1627
|
-
};
|
|
1628
|
-
};
|
|
1629
|
-
};
|
|
1630
|
-
}>;
|
|
1631
|
-
pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
|
|
1632
|
-
hasBack: {
|
|
1633
|
-
true: {
|
|
1634
|
-
title: {
|
|
1635
|
-
paddingBlockEnd: "8";
|
|
1636
|
-
paddingInlineStart: "16";
|
|
1637
|
-
};
|
|
1638
|
-
titleBlock: {
|
|
1639
|
-
gap: "4";
|
|
1640
|
-
paddingBlock: "4";
|
|
1641
|
-
};
|
|
1642
|
-
};
|
|
1643
|
-
false: {
|
|
1644
|
-
title: {
|
|
1645
|
-
paddingBlockEnd: "16";
|
|
1646
|
-
paddingInlineStart: "24";
|
|
1647
|
-
};
|
|
1648
|
-
titleBlock: {
|
|
1649
|
-
paddingBlock: "6";
|
|
1650
|
-
};
|
|
1651
|
-
};
|
|
1652
|
-
};
|
|
1653
|
-
isDisabled: {
|
|
1654
|
-
true: {
|
|
1655
|
-
item: {
|
|
1656
|
-
cursor: "not-allowed";
|
|
1657
|
-
_hover: {
|
|
1658
|
-
background: "transparent";
|
|
1659
|
-
_active: {
|
|
1660
|
-
background: "transparent";
|
|
1661
|
-
};
|
|
1662
|
-
};
|
|
1663
|
-
_active: {
|
|
1664
|
-
background: "transparent";
|
|
1665
|
-
};
|
|
1666
|
-
};
|
|
1667
|
-
itemIcon: {
|
|
1668
|
-
color: "icon/disabled";
|
|
1669
|
-
_groupHover: {
|
|
1670
|
-
color: "icon/disabled";
|
|
1671
|
-
};
|
|
1672
|
-
};
|
|
1673
|
-
itemLabel: {
|
|
1674
|
-
color: "text/disabled";
|
|
1675
|
-
};
|
|
1676
|
-
};
|
|
1677
|
-
false: {};
|
|
1678
|
-
};
|
|
1679
|
-
selected: {
|
|
1680
|
-
true: {
|
|
1681
|
-
item: {
|
|
1682
|
-
background: "background/selected";
|
|
1683
|
-
_hover: {
|
|
1684
|
-
background: "background/selected-hover";
|
|
1685
|
-
_active: {
|
|
1686
|
-
background: {
|
|
1687
|
-
base: "background/selected-hover";
|
|
1688
|
-
tablet: "background/selected-active";
|
|
1689
|
-
};
|
|
1690
|
-
};
|
|
1691
|
-
};
|
|
1692
|
-
_active: {
|
|
1693
|
-
background: {
|
|
1694
|
-
base: "background/selected-hover";
|
|
1695
|
-
tablet: "background/selected-active";
|
|
1696
|
-
};
|
|
1697
|
-
};
|
|
1698
|
-
};
|
|
1699
|
-
itemIcon: {
|
|
1700
|
-
color: "icon/interactive";
|
|
1701
|
-
_groupHover: {
|
|
1702
|
-
color: "icon/interactive-hover";
|
|
1703
|
-
};
|
|
1704
|
-
};
|
|
1705
|
-
itemLabel: {
|
|
1706
|
-
textStyle: {
|
|
1707
|
-
base: "body/lg/semibold";
|
|
1708
|
-
tablet: "body/md/semibold";
|
|
1709
|
-
};
|
|
1710
|
-
};
|
|
1711
|
-
};
|
|
1712
|
-
false: {};
|
|
1713
|
-
};
|
|
1714
|
-
}>;
|
|
1715
1430
|
pagination: import('@chakra-ui/react').SlotRecipeDefinition<"text" | "root" | "itemsBlock" | "itemsSelect" | "pageBlock" | "pageSelect", {
|
|
1716
1431
|
variant: {
|
|
1717
1432
|
card: {
|
|
@@ -2048,7 +1763,28 @@ declare const slotRecipes: {
|
|
|
2048
1763
|
};
|
|
2049
1764
|
};
|
|
2050
1765
|
}>;
|
|
2051
|
-
|
|
1766
|
+
sidebar: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "itemIcon" | "divider" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
|
|
1767
|
+
selected: {
|
|
1768
|
+
true: {
|
|
1769
|
+
item: {
|
|
1770
|
+
background: "background/selected";
|
|
1771
|
+
_hover: {
|
|
1772
|
+
background: "background/selected-hover";
|
|
1773
|
+
};
|
|
1774
|
+
};
|
|
1775
|
+
itemIcon: {
|
|
1776
|
+
color: "icon/interactive";
|
|
1777
|
+
};
|
|
1778
|
+
itemLabel: {
|
|
1779
|
+
textStyle: "body/lg/semibold";
|
|
1780
|
+
};
|
|
1781
|
+
selectionMarker: {
|
|
1782
|
+
display: "block";
|
|
1783
|
+
};
|
|
1784
|
+
};
|
|
1785
|
+
};
|
|
1786
|
+
}>;
|
|
1787
|
+
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" | "itemBadge" | "itemIcon" | "valueIcon", {
|
|
2052
1788
|
hasStatusIcon: {
|
|
2053
1789
|
true: {
|
|
2054
1790
|
trigger: {
|
|
@@ -3027,7 +2763,7 @@ declare const slotRecipes: {
|
|
|
3027
2763
|
};
|
|
3028
2764
|
};
|
|
3029
2765
|
}>;
|
|
3030
|
-
tour: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "
|
|
2766
|
+
tour: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow">>;
|
|
3031
2767
|
treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
|
|
3032
2768
|
variant: {
|
|
3033
2769
|
files: {
|
|
@@ -34,8 +34,6 @@ 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 pageHeaderSlotRecipe from "./PageHeader.recipe.js";
|
|
38
|
-
import pageSidebarSlotRecipe from "./PageSidebar.recipe.js";
|
|
39
37
|
import paginationSlotRecipe from "./Pagination.recipe.js";
|
|
40
38
|
import paginationLoadMoreRecipe from "./PaginationLoadMore.recipe.js";
|
|
41
39
|
import popoverSlotRecipe from "./Popover.recipe.js";
|
|
@@ -46,6 +44,7 @@ import ribbonSlotRecipe from "./Ribbon.recipe.js";
|
|
|
46
44
|
import sectionHeadingRecipe from "./SectionHeading.recipe.js";
|
|
47
45
|
import segmentGroupSlotRecipe from "./SegmentGroup.recipe.js";
|
|
48
46
|
import settingsCardSlotRecipe from "./SettingsCard.recipe.js";
|
|
47
|
+
import sidebarSlotRecipe from "./Sidebar.recipe.js";
|
|
49
48
|
import splitButtonSlotRecipe from "./SplitButton.recipe.js";
|
|
50
49
|
import statSlotRecipe from "./Stat.recipe.js";
|
|
51
50
|
import stepCardSlotRecipe from "./StepCard.recipe.js";
|
|
@@ -97,8 +96,6 @@ var slotRecipes = {
|
|
|
97
96
|
numberInput: numberInputSlotRecipe,
|
|
98
97
|
overflowContent: overflowContentSlotRecipe,
|
|
99
98
|
pageFooter: pageFooterSlotRecipe,
|
|
100
|
-
pageHeader: pageHeaderSlotRecipe,
|
|
101
|
-
pageSidebar: pageSidebarSlotRecipe,
|
|
102
99
|
pagination: paginationSlotRecipe,
|
|
103
100
|
paginationLoadMore: paginationLoadMoreRecipe,
|
|
104
101
|
popover: popoverSlotRecipe,
|
|
@@ -109,6 +106,7 @@ var slotRecipes = {
|
|
|
109
106
|
sectionHeading: sectionHeadingRecipe,
|
|
110
107
|
labeledData: labeledDataSlotRecipe,
|
|
111
108
|
segmentGroup: segmentGroupSlotRecipe,
|
|
109
|
+
sidebar: sidebarSlotRecipe,
|
|
112
110
|
select: selectSlotRecipe,
|
|
113
111
|
settingsCard: settingsCardSlotRecipe,
|
|
114
112
|
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
|
|
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 tableCardSlotRecipe from './TableCard.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 tableCard: tableCardSlotRecipe,\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,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,WAAW;CACX,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,MAAM;CACN,UAAU;AACZ"}
|
|
@@ -273,15 +273,12 @@ If your codebase has a local `card.tsx` wrapper around v1 Card (e.g. Shadcn-styl
|
|
|
273
273
|
### Sidebar & Breadcrumb
|
|
274
274
|
|
|
275
275
|
```tsx
|
|
276
|
-
// Sidebar v2
|
|
277
|
-
|
|
278
|
-
<
|
|
279
|
-
<
|
|
280
|
-
<
|
|
281
|
-
|
|
282
|
-
<BitkitPageSidebar.Item icon={IconName} selected={...}>Label</BitkitPageSidebar.Item>
|
|
283
|
-
</BitkitPageSidebar.Body>
|
|
284
|
-
</BitkitPageSidebar>
|
|
276
|
+
// Sidebar v2
|
|
277
|
+
<BitkitSidebar>
|
|
278
|
+
<BitkitSidebar.Title>Title</BitkitSidebar.Title>
|
|
279
|
+
<BitkitSidebar.GroupHeading>Group</BitkitSidebar.GroupHeading>
|
|
280
|
+
<BitkitSidebar.Item icon={IconName} selected={...}>Label</BitkitSidebar.Item>
|
|
281
|
+
</BitkitSidebar>
|
|
285
282
|
|
|
286
283
|
// Breadcrumb v2
|
|
287
284
|
<BitkitBreadcrumb>
|
package/package.json
CHANGED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
export interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {
|
|
4
|
-
/**
|
|
5
|
-
* Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.
|
|
6
|
-
*
|
|
7
|
-
* Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with
|
|
8
|
-
* no avatar, so pass this alongside a `breadcrumb`.
|
|
9
|
-
*
|
|
10
|
-
* Size it to match the design's two sub-page cards, since the node is yours to build: `size="40"`
|
|
11
|
-
* (8px radius) against a bare title, and `size="48"` (10px radius) once `secondaryText` is
|
|
12
|
-
* present — the same avatar the `app` and `user` content shapes use.
|
|
13
|
-
*/
|
|
14
|
-
avatar?: ReactNode;
|
|
15
|
-
/** Badge rendered next to the title. Hidden in the collapsed layout. */
|
|
16
|
-
badge?: ReactNode;
|
|
17
|
-
/**
|
|
18
|
-
* Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the
|
|
19
|
-
* header from the design's main-page layout to a sub-page one, so there is no separate page-type
|
|
20
|
-
* prop: the recipe's own `hasBreadcrumb` variant is derived from it.
|
|
21
|
-
*
|
|
22
|
-
* The two layouts carry more than the trail. A main-page header is a title and its subtitle —
|
|
23
|
-
* top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those
|
|
24
|
-
* belong to sub-pages, so pass them together with a trail.
|
|
25
|
-
*/
|
|
26
|
-
breadcrumb?: ReactNode;
|
|
27
|
-
/**
|
|
28
|
-
* Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.
|
|
29
|
-
*
|
|
30
|
-
* The collapsed row is built for `size="sm"` buttons and the expanded header for `size="md"`.
|
|
31
|
-
* Actions arrive as children, so the component cannot set that for you — pass a flat `size="sm"`
|
|
32
|
-
* whenever `minimal` or `isSticky` is in play.
|
|
33
|
-
*
|
|
34
|
-
* Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`
|
|
35
|
-
* resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px
|
|
36
|
-
* icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a
|
|
37
|
-
* little small in the expanded mobile layout — but the design draws no mobile frame for the
|
|
38
|
-
* collapsed variants, so `sm` is the closer of the two.
|
|
39
|
-
*/
|
|
40
|
-
children?: ReactNode;
|
|
41
|
-
/**
|
|
42
|
-
* Shape of the title block, mirroring the design's `content` property. `title` is a page title
|
|
43
|
-
* with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar
|
|
44
|
-
* centred against a smaller title and 14px secondary text. They differ only in the gap between
|
|
45
|
-
* the avatar and the text, 16 and 12 respectively.
|
|
46
|
-
*/
|
|
47
|
-
contentVariant?: 'title' | 'app' | 'user';
|
|
48
|
-
/**
|
|
49
|
-
* Inline controls between the trail and the actions — a view switcher, filters, a settings menu.
|
|
50
|
-
* Their presence spreads the row into three groups instead of the usual trail-and-actions pair,
|
|
51
|
-
* which is the shape the design file calls `PageHeader-WFE`.
|
|
52
|
-
*
|
|
53
|
-
* Belongs to the collapsed row, so it is honoured by `variant="minimal"` *and* by `isSticky` —
|
|
54
|
-
* the two produce the same row — and ignored in the expanded layouts, which the design draws no
|
|
55
|
-
* controls in.
|
|
56
|
-
*/
|
|
57
|
-
controls?: ReactNode;
|
|
58
|
-
/**
|
|
59
|
-
* Renders the compact single-row layout used while the header is stuck to the top of the viewport.
|
|
60
|
-
* Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset
|
|
61
|
-
* and header container are application concerns.
|
|
62
|
-
*
|
|
63
|
-
* Ignored below the `tablet` breakpoint, where the header always stays expanded.
|
|
64
|
-
*
|
|
65
|
-
* Pair it with `size="sm"` actions — see `children`.
|
|
66
|
-
*/
|
|
67
|
-
isSticky?: boolean;
|
|
68
|
-
/**
|
|
69
|
-
* Descriptive text below the title. Hidden in the collapsed layout.
|
|
70
|
-
*
|
|
71
|
-
* A string, like `title`, so it can be truncated to one line and carried in full by the tooltip
|
|
72
|
-
* that appears when it does not fit.
|
|
73
|
-
*/
|
|
74
|
-
secondaryText?: string;
|
|
75
|
-
/**
|
|
76
|
-
* Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.
|
|
77
|
-
*
|
|
78
|
-
* The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive
|
|
79
|
-
* page content from it, put `BitkitTabs.Root` around the header *and* the content, and pass only
|
|
80
|
-
* the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:
|
|
81
|
-
*
|
|
82
|
-
* ```tsx
|
|
83
|
-
* <BitkitTabs.Root defaultValue="overview">
|
|
84
|
-
* <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title="Build Hub" />
|
|
85
|
-
* <BitkitTabs.ContentGroup>
|
|
86
|
-
* <BitkitTabs.Content padding="32" value="overview">…</BitkitTabs.Content>
|
|
87
|
-
* </BitkitTabs.ContentGroup>
|
|
88
|
-
* </BitkitTabs.Root>
|
|
89
|
-
* ```
|
|
90
|
-
*
|
|
91
|
-
* Only the row is hidden when the header collapses — the panels live outside it and keep
|
|
92
|
-
* rendering, so the page never blanks.
|
|
93
|
-
*/
|
|
94
|
-
tabs?: ReactNode;
|
|
95
|
-
/**
|
|
96
|
-
* The page title, as a string. Everything passed here lands inside the `h1`, so it is the
|
|
97
|
-
* heading's accessible name and nothing else belongs in it — the avatar, badge and secondary
|
|
98
|
-
* text each have their own slot. Required: it is what gives the header a page heading at every
|
|
99
|
-
* breakpoint.
|
|
100
|
-
*
|
|
101
|
-
* Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it
|
|
102
|
-
* shows the full string in a tooltip — so a long title never grows the header.
|
|
103
|
-
*
|
|
104
|
-
* In the collapsed layout (`minimal` or `isSticky`) *with* a `breadcrumb`, the design shows the
|
|
105
|
-
* title in the trail rather than as a heading, so end the breadcrumb with a
|
|
106
|
-
* `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden
|
|
107
|
-
* `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header
|
|
108
|
-
* never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its
|
|
109
|
-
* `CurrentItem` on mobile).
|
|
110
|
-
*/
|
|
111
|
-
title: string;
|
|
112
|
-
/**
|
|
113
|
-
* `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat
|
|
114
|
-
* their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects
|
|
115
|
-
* `size="sm"` actions — see `children`.
|
|
116
|
-
*/
|
|
117
|
-
variant?: 'default' | 'minimal';
|
|
118
|
-
}
|
|
119
|
-
declare const BitkitPageHeader: import('react').ForwardRefExoticComponent<BitkitPageHeaderProps & import('react').RefAttributes<HTMLElement>>;
|
|
120
|
-
export default BitkitPageHeader;
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import { isEmptyNode } from "../../utilities/isEmptyNode.js";
|
|
2
|
-
import BitkitOverflowTooltip from "../BitkitOverflowTooltip/BitkitOverflowTooltip.js";
|
|
3
|
-
import useIsTruncated from "../../utilities/useIsTruncated.js";
|
|
4
|
-
import { Box } from "@chakra-ui/react/box";
|
|
5
|
-
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
|
-
import { forwardRef } from "react";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { Text } from "@chakra-ui/react/text";
|
|
9
|
-
//#region lib/components/BitkitPageHeader/BitkitPageHeader.tsx
|
|
10
|
-
var BitkitPageHeader = forwardRef((props, ref) => {
|
|
11
|
-
const { avatar, badge, breadcrumb, children, contentVariant, controls, isSticky, secondaryText, tabs, title, variant, ...rest } = props;
|
|
12
|
-
const hasAvatar = !isEmptyNode(avatar);
|
|
13
|
-
const hasBadge = !isEmptyNode(badge);
|
|
14
|
-
const hasBreadcrumb = !isEmptyNode(breadcrumb);
|
|
15
|
-
const hasActions = !isEmptyNode(children);
|
|
16
|
-
const hasSecondaryText = !isEmptyNode(secondaryText);
|
|
17
|
-
const hasTabs = !isEmptyNode(tabs);
|
|
18
|
-
const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated(title);
|
|
19
|
-
const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated(secondaryText);
|
|
20
|
-
const isCollapsed = variant === "minimal" || Boolean(isSticky);
|
|
21
|
-
const showControls = !isEmptyNode(controls) && isCollapsed;
|
|
22
|
-
const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);
|
|
23
|
-
const styles = useSlotRecipe({ key: "pageHeader" })({
|
|
24
|
-
contentVariant,
|
|
25
|
-
hasBreadcrumb,
|
|
26
|
-
hasControls: showControls,
|
|
27
|
-
isSticky,
|
|
28
|
-
variant
|
|
29
|
-
});
|
|
30
|
-
const controlsNode = showControls ? /* @__PURE__ */ jsx(Box, {
|
|
31
|
-
css: styles.controls,
|
|
32
|
-
children: controls
|
|
33
|
-
}) : null;
|
|
34
|
-
return /* @__PURE__ */ jsxs(Box, {
|
|
35
|
-
as: "header",
|
|
36
|
-
css: styles.root,
|
|
37
|
-
ref,
|
|
38
|
-
...rest,
|
|
39
|
-
children: [/* @__PURE__ */ jsxs(Box, {
|
|
40
|
-
css: styles.headerBlock,
|
|
41
|
-
children: [
|
|
42
|
-
hasBreadcrumb && /* @__PURE__ */ jsx(Box, {
|
|
43
|
-
css: styles.breadcrumb,
|
|
44
|
-
children: breadcrumb
|
|
45
|
-
}),
|
|
46
|
-
hasBreadcrumb && controlsNode,
|
|
47
|
-
/* @__PURE__ */ jsxs(Box, {
|
|
48
|
-
css: styles.contentBlock,
|
|
49
|
-
children: [
|
|
50
|
-
/* @__PURE__ */ jsxs(Box, {
|
|
51
|
-
css: styles.titleBlock,
|
|
52
|
-
children: [hasAvatar && /* @__PURE__ */ jsx(Box, {
|
|
53
|
-
css: styles.avatar,
|
|
54
|
-
children: avatar
|
|
55
|
-
}), /* @__PURE__ */ jsxs(Box, {
|
|
56
|
-
css: styles.textBlock,
|
|
57
|
-
children: [/* @__PURE__ */ jsxs(Box, {
|
|
58
|
-
css: styles.titleRow,
|
|
59
|
-
children: [/* @__PURE__ */ jsx(BitkitOverflowTooltip, {
|
|
60
|
-
disabled: !canShowTitleTooltip,
|
|
61
|
-
text: title,
|
|
62
|
-
children: /* @__PURE__ */ jsx(Text, {
|
|
63
|
-
as: "h1",
|
|
64
|
-
css: styles.title,
|
|
65
|
-
ref: titleRef,
|
|
66
|
-
tabIndex: canShowTitleTooltip ? 0 : void 0,
|
|
67
|
-
children: title
|
|
68
|
-
})
|
|
69
|
-
}), hasBadge && /* @__PURE__ */ jsx(Box, {
|
|
70
|
-
css: styles.badge,
|
|
71
|
-
children: badge
|
|
72
|
-
})]
|
|
73
|
-
}), hasSecondaryText && secondaryText !== void 0 && /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
|
|
74
|
-
disabled: !isSecondaryTruncated,
|
|
75
|
-
text: secondaryText,
|
|
76
|
-
children: /* @__PURE__ */ jsx(Text, {
|
|
77
|
-
css: styles.secondaryText,
|
|
78
|
-
ref: secondaryRef,
|
|
79
|
-
tabIndex: isSecondaryTruncated ? 0 : void 0,
|
|
80
|
-
children: secondaryText
|
|
81
|
-
})
|
|
82
|
-
})]
|
|
83
|
-
})]
|
|
84
|
-
}),
|
|
85
|
-
!hasBreadcrumb && controlsNode,
|
|
86
|
-
hasActions && /* @__PURE__ */ jsx(Box, {
|
|
87
|
-
css: styles.actionBlock,
|
|
88
|
-
children
|
|
89
|
-
})
|
|
90
|
-
]
|
|
91
|
-
})
|
|
92
|
-
]
|
|
93
|
-
}), hasTabs && /* @__PURE__ */ jsx(Box, {
|
|
94
|
-
css: styles.tabs,
|
|
95
|
-
children: tabs
|
|
96
|
-
})]
|
|
97
|
-
});
|
|
98
|
-
});
|
|
99
|
-
BitkitPageHeader.displayName = "BitkitPageHeader";
|
|
100
|
-
//#endregion
|
|
101
|
-
export { BitkitPageHeader as default };
|
|
102
|
-
|
|
103
|
-
//# sourceMappingURL=BitkitPageHeader.js.map
|