@bitrise/bitkit-v2 0.3.359-beta.2314 → 0.3.359
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitCheckbox/BitkitCheckbox.d.ts +5 -12
- package/dist/components/BitkitCheckbox/BitkitCheckbox.js +1 -1
- package/dist/components/BitkitCheckbox/BitkitCheckbox.js.map +1 -1
- package/dist/components/BitkitControlButton/BitkitControlButton.js +1 -0
- package/dist/components/BitkitControlButton/BitkitControlButton.js.map +1 -1
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts +2 -0
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js +15 -11
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts +74 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +244 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +1 -0
- package/dist/components/BitkitRadio/BitkitRadio.d.ts +11 -23
- package/dist/components/BitkitRadio/BitkitRadio.js +3 -7
- package/dist/components/BitkitRadio/BitkitRadio.js.map +1 -1
- package/dist/components/BitkitRadioItem/BitkitRadioItem.d.ts +30 -0
- package/dist/components/BitkitRadioItem/BitkitRadioItem.js +29 -0
- package/dist/components/BitkitRadioItem/BitkitRadioItem.js.map +1 -0
- package/dist/components/index.d.ts +2 -1
- package/dist/main.js +3 -2
- package/dist/theme/slot-recipes/GroupHeading.recipe.js +4 -1
- package/dist/theme/slot-recipes/GroupHeading.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts +82 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js +230 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/index.d.ts +81 -21
- package/dist/theme/slot-recipes/index.js +2 -2
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/utilities/useIsTruncated.d.ts +27 -0
- package/dist/utilities/useIsTruncated.js +51 -0
- package/dist/utilities/useIsTruncated.js.map +1 -0
- package/docs/v1-to-v2-migration-guide.md +9 -6
- package/package.json +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.d.ts +0 -45
- package/dist/components/BitkitSidebar/BitkitSidebar.js +0 -147
- package/dist/components/BitkitSidebar/BitkitSidebar.js.map +0 -1
- package/dist/theme/slot-recipes/Sidebar.recipe.d.ts +0 -22
- package/dist/theme/slot-recipes/Sidebar.recipe.js +0 -143
- package/dist/theme/slot-recipes/Sidebar.recipe.js.map +0 -1
- package/dist/utilities/isEmptyNode.d.ts +0 -6
- package/dist/utilities/isEmptyNode.js +0 -10
- package/dist/utilities/isEmptyNode.js.map +0 -1
|
@@ -1422,6 +1422,87 @@ declare const slotRecipes: {
|
|
|
1422
1422
|
};
|
|
1423
1423
|
};
|
|
1424
1424
|
}>;
|
|
1425
|
+
pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
|
|
1426
|
+
hasBack: {
|
|
1427
|
+
true: {
|
|
1428
|
+
title: {
|
|
1429
|
+
paddingBlockEnd: "8";
|
|
1430
|
+
paddingInlineStart: "16";
|
|
1431
|
+
};
|
|
1432
|
+
titleBlock: {
|
|
1433
|
+
gap: "4";
|
|
1434
|
+
paddingBlock: "4";
|
|
1435
|
+
};
|
|
1436
|
+
};
|
|
1437
|
+
false: {
|
|
1438
|
+
title: {
|
|
1439
|
+
paddingBlockEnd: "16";
|
|
1440
|
+
paddingInlineStart: "24";
|
|
1441
|
+
};
|
|
1442
|
+
titleBlock: {
|
|
1443
|
+
paddingBlock: "6";
|
|
1444
|
+
};
|
|
1445
|
+
};
|
|
1446
|
+
};
|
|
1447
|
+
isDisabled: {
|
|
1448
|
+
true: {
|
|
1449
|
+
item: {
|
|
1450
|
+
cursor: "not-allowed";
|
|
1451
|
+
_hover: {
|
|
1452
|
+
background: "transparent";
|
|
1453
|
+
_active: {
|
|
1454
|
+
background: "transparent";
|
|
1455
|
+
};
|
|
1456
|
+
};
|
|
1457
|
+
_active: {
|
|
1458
|
+
background: "transparent";
|
|
1459
|
+
};
|
|
1460
|
+
};
|
|
1461
|
+
itemIcon: {
|
|
1462
|
+
color: "icon/disabled";
|
|
1463
|
+
_groupHover: {
|
|
1464
|
+
color: "icon/disabled";
|
|
1465
|
+
};
|
|
1466
|
+
};
|
|
1467
|
+
itemLabel: {
|
|
1468
|
+
color: "text/disabled";
|
|
1469
|
+
};
|
|
1470
|
+
suffixIcon: {
|
|
1471
|
+
display: "none";
|
|
1472
|
+
_groupHover: {
|
|
1473
|
+
display: "none";
|
|
1474
|
+
};
|
|
1475
|
+
};
|
|
1476
|
+
};
|
|
1477
|
+
false: {};
|
|
1478
|
+
};
|
|
1479
|
+
selected: {
|
|
1480
|
+
true: {
|
|
1481
|
+
item: {
|
|
1482
|
+
background: "background/selected";
|
|
1483
|
+
_hover: {
|
|
1484
|
+
background: "background/selected-hover";
|
|
1485
|
+
_active: {
|
|
1486
|
+
background: "background/selected-active";
|
|
1487
|
+
};
|
|
1488
|
+
};
|
|
1489
|
+
_active: {
|
|
1490
|
+
background: "background/selected-active";
|
|
1491
|
+
};
|
|
1492
|
+
};
|
|
1493
|
+
itemIcon: {
|
|
1494
|
+
color: "icon/interactive";
|
|
1495
|
+
_groupHover: {
|
|
1496
|
+
color: "icon/interactive-hover";
|
|
1497
|
+
};
|
|
1498
|
+
};
|
|
1499
|
+
itemLabel: {
|
|
1500
|
+
textStyle: "body/md/semibold";
|
|
1501
|
+
};
|
|
1502
|
+
};
|
|
1503
|
+
false: {};
|
|
1504
|
+
};
|
|
1505
|
+
}>;
|
|
1425
1506
|
pagination: import('@chakra-ui/react').SlotRecipeDefinition<"text" | "root" | "itemsBlock" | "itemsSelect" | "pageBlock" | "pageSelect", {
|
|
1426
1507
|
variant: {
|
|
1427
1508
|
card: {
|
|
@@ -1758,27 +1839,6 @@ declare const slotRecipes: {
|
|
|
1758
1839
|
};
|
|
1759
1840
|
};
|
|
1760
1841
|
}>;
|
|
1761
|
-
sidebar: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "itemIcon" | "divider" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
|
|
1762
|
-
selected: {
|
|
1763
|
-
true: {
|
|
1764
|
-
item: {
|
|
1765
|
-
background: "background/selected";
|
|
1766
|
-
_hover: {
|
|
1767
|
-
background: "background/selected-hover";
|
|
1768
|
-
};
|
|
1769
|
-
};
|
|
1770
|
-
itemIcon: {
|
|
1771
|
-
color: "icon/interactive";
|
|
1772
|
-
};
|
|
1773
|
-
itemLabel: {
|
|
1774
|
-
textStyle: "body/lg/semibold";
|
|
1775
|
-
};
|
|
1776
|
-
selectionMarker: {
|
|
1777
|
-
display: "block";
|
|
1778
|
-
};
|
|
1779
|
-
};
|
|
1780
|
-
};
|
|
1781
|
-
}>;
|
|
1782
1842
|
select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemIcon" | "valueIcon", {
|
|
1783
1843
|
hasStatusIcon: {
|
|
1784
1844
|
true: {
|
|
@@ -34,6 +34,7 @@ import nativeSelectSlotRecipe from "./NativeSelect.recipe.js";
|
|
|
34
34
|
import noteCardSlotRecipe from "./NoteCard.recipe.js";
|
|
35
35
|
import overflowContentSlotRecipe from "./OverflowContent.recipe.js";
|
|
36
36
|
import pageFooterSlotRecipe from "./PageFooter.recipe.js";
|
|
37
|
+
import pageSidebarSlotRecipe from "./PageSidebar.recipe.js";
|
|
37
38
|
import paginationSlotRecipe from "./Pagination.recipe.js";
|
|
38
39
|
import paginationLoadMoreRecipe from "./PaginationLoadMore.recipe.js";
|
|
39
40
|
import popoverSlotRecipe from "./Popover.recipe.js";
|
|
@@ -44,7 +45,6 @@ import ribbonSlotRecipe from "./Ribbon.recipe.js";
|
|
|
44
45
|
import sectionHeadingRecipe from "./SectionHeading.recipe.js";
|
|
45
46
|
import segmentGroupSlotRecipe from "./SegmentGroup.recipe.js";
|
|
46
47
|
import settingsCardSlotRecipe from "./SettingsCard.recipe.js";
|
|
47
|
-
import sidebarSlotRecipe from "./Sidebar.recipe.js";
|
|
48
48
|
import splitButtonSlotRecipe from "./SplitButton.recipe.js";
|
|
49
49
|
import statSlotRecipe from "./Stat.recipe.js";
|
|
50
50
|
import stepCardSlotRecipe from "./StepCard.recipe.js";
|
|
@@ -95,6 +95,7 @@ var slotRecipes = {
|
|
|
95
95
|
numberInput: numberInputSlotRecipe,
|
|
96
96
|
overflowContent: overflowContentSlotRecipe,
|
|
97
97
|
pageFooter: pageFooterSlotRecipe,
|
|
98
|
+
pageSidebar: pageSidebarSlotRecipe,
|
|
98
99
|
pagination: paginationSlotRecipe,
|
|
99
100
|
paginationLoadMore: paginationLoadMoreRecipe,
|
|
100
101
|
popover: popoverSlotRecipe,
|
|
@@ -105,7 +106,6 @@ var slotRecipes = {
|
|
|
105
106
|
sectionHeading: sectionHeadingRecipe,
|
|
106
107
|
labeledData: labeledDataSlotRecipe,
|
|
107
108
|
segmentGroup: segmentGroupSlotRecipe,
|
|
108
|
-
sidebar: sidebarSlotRecipe,
|
|
109
109
|
select: selectSlotRecipe,
|
|
110
110
|
settingsCard: settingsCardSlotRecipe,
|
|
111
111
|
splitButton: splitButtonSlotRecipe,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pageSidebar: pageSidebarSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n progress: progressSlotRecipe,\n qrCode: qrCodeSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n tooltip: tooltipSlotRecipe,\n tour: tourSlotRecipe,\n treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,MAAM;CACN,UAAU;AACZ"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Reports whether an element's text is actually clipped by its own box.
|
|
3
|
+
*
|
|
4
|
+
* `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip
|
|
5
|
+
* that repeats a label the user can already read in full is noise — so pass the result as its
|
|
6
|
+
* `disabled` prop to keep it out of the way when the text fits.
|
|
7
|
+
*
|
|
8
|
+
* Attach the returned `ref` to the element that truncates:
|
|
9
|
+
*
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);
|
|
12
|
+
* <BitkitOverflowTooltip disabled={!isTruncated} text={label}>
|
|
13
|
+
* <Text ref={ref} truncate>{label}</Text>
|
|
14
|
+
* </BitkitOverflowTooltip>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* The measured node is tracked in state rather than a `RefObject` so that it can be an effect
|
|
18
|
+
* dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run
|
|
19
|
+
* when React swaps the node — which happens whenever an element changes type, say a row rendering
|
|
20
|
+
* as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the
|
|
21
|
+
* result would freeze at whatever it last measured.
|
|
22
|
+
*/
|
|
23
|
+
declare const useIsTruncated: <T extends HTMLElement>(value?: unknown) => {
|
|
24
|
+
isTruncated: boolean;
|
|
25
|
+
ref: import('react').Dispatch<import('react').SetStateAction<T | null>>;
|
|
26
|
+
};
|
|
27
|
+
export default useIsTruncated;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
//#region lib/utilities/useIsTruncated.ts
|
|
3
|
+
/**
|
|
4
|
+
* Reports whether an element's text is actually clipped by its own box.
|
|
5
|
+
*
|
|
6
|
+
* `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip
|
|
7
|
+
* that repeats a label the user can already read in full is noise — so pass the result as its
|
|
8
|
+
* `disabled` prop to keep it out of the way when the text fits.
|
|
9
|
+
*
|
|
10
|
+
* Attach the returned `ref` to the element that truncates:
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);
|
|
14
|
+
* <BitkitOverflowTooltip disabled={!isTruncated} text={label}>
|
|
15
|
+
* <Text ref={ref} truncate>{label}</Text>
|
|
16
|
+
* </BitkitOverflowTooltip>
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* The measured node is tracked in state rather than a `RefObject` so that it can be an effect
|
|
20
|
+
* dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run
|
|
21
|
+
* when React swaps the node — which happens whenever an element changes type, say a row rendering
|
|
22
|
+
* as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the
|
|
23
|
+
* result would freeze at whatever it last measured.
|
|
24
|
+
*/
|
|
25
|
+
var useIsTruncated = (value) => {
|
|
26
|
+
const [node, setNode] = useState(null);
|
|
27
|
+
const [isTruncated, setIsTruncated] = useState(false);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (!node) return;
|
|
30
|
+
const measure = () => setIsTruncated(node.scrollWidth > node.clientWidth + 1);
|
|
31
|
+
measure();
|
|
32
|
+
let cancelled = false;
|
|
33
|
+
document.fonts?.ready.then(() => {
|
|
34
|
+
if (!cancelled) measure();
|
|
35
|
+
});
|
|
36
|
+
const observer = new ResizeObserver(measure);
|
|
37
|
+
observer.observe(node);
|
|
38
|
+
return () => {
|
|
39
|
+
cancelled = true;
|
|
40
|
+
observer.disconnect();
|
|
41
|
+
};
|
|
42
|
+
}, [node, value]);
|
|
43
|
+
return {
|
|
44
|
+
isTruncated,
|
|
45
|
+
ref: setNode
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
//#endregion
|
|
49
|
+
export { useIsTruncated as default };
|
|
50
|
+
|
|
51
|
+
//# sourceMappingURL=useIsTruncated.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsTruncated.js","names":[],"sources":["../../lib/utilities/useIsTruncated.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Reports whether an element's text is actually clipped by its own box.\n *\n * `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip\n * that repeats a label the user can already read in full is noise — so pass the result as its\n * `disabled` prop to keep it out of the way when the text fits.\n *\n * Attach the returned `ref` to the element that truncates:\n *\n * ```tsx\n * const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);\n * <BitkitOverflowTooltip disabled={!isTruncated} text={label}>\n * <Text ref={ref} truncate>{label}</Text>\n * </BitkitOverflowTooltip>\n * ```\n *\n * The measured node is tracked in state rather than a `RefObject` so that it can be an effect\n * dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run\n * when React swaps the node — which happens whenever an element changes type, say a row rendering\n * as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the\n * result would freeze at whatever it last measured.\n */\nconst useIsTruncated = <T extends HTMLElement>(value?: unknown) => {\n const [node, setNode] = useState<T | null>(null);\n const [isTruncated, setIsTruncated] = useState(false);\n\n useEffect(() => {\n // No reset when the node is missing: React nulls the ref and hands over the replacement in the\n // same commit, and the effect re-runs to measure it. Resetting here would only add a render.\n if (!node) {\n return;\n }\n\n // 1px of slack: sub-pixel text metrics make `scrollWidth` exceed `clientWidth` by a fraction on\n // labels that actually fit, which would show a tooltip repeating the whole visible label.\n const measure = () => setIsTruncated(node.scrollWidth > node.clientWidth + 1);\n\n measure();\n\n // The element's own box is fixed by its container, so swapping the fallback font for the real\n // one changes how wide the *text* renders without ever resizing the element — a ResizeObserver\n // never fires for that. Re-measure once the webfonts are in.\n let cancelled = false;\n void document.fonts?.ready.then(() => {\n if (!cancelled) {\n measure();\n }\n });\n\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n\n return () => {\n cancelled = true;\n observer.disconnect();\n };\n }, [node, value]);\n\n return { isTruncated, ref: setNode };\n};\n\nexport default useIsTruncated;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAM,kBAAyC,UAAoB;CACjE,MAAM,CAAC,MAAM,WAAW,SAAmB,IAAI;CAC/C,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,gBAAgB;EAGd,IAAI,CAAC,MACH;EAKF,MAAM,gBAAgB,eAAe,KAAK,cAAc,KAAK,cAAc,CAAC;EAE5E,QAAQ;EAKR,IAAI,YAAY;EAChB,SAAc,OAAO,MAAM,WAAW;GACpC,IAAI,CAAC,WACH,QAAQ;EAEZ,CAAC;EAED,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,IAAI;EAErB,aAAa;GACX,YAAY;GACZ,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,OAAO;EAAE;EAAa,KAAK;CAAQ;AACrC"}
|
|
@@ -249,12 +249,15 @@ If your codebase has a local `card.tsx` wrapper around v1 Card (e.g. Shadcn-styl
|
|
|
249
249
|
### Sidebar & Breadcrumb
|
|
250
250
|
|
|
251
251
|
```tsx
|
|
252
|
-
// Sidebar v2
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
<
|
|
256
|
-
<
|
|
257
|
-
|
|
252
|
+
// Sidebar v2 — note the rename: v1 `Sidebar` maps to `BitkitPageSidebar`.
|
|
253
|
+
// It stands at least viewport-tall; an embedded panel opts out with `minHeight="auto"`.
|
|
254
|
+
<BitkitPageSidebar>
|
|
255
|
+
<BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>
|
|
256
|
+
<BitkitPageSidebar.Body>
|
|
257
|
+
<BitkitPageSidebar.GroupHeading label="Group" />
|
|
258
|
+
<BitkitPageSidebar.Item icon={IconName} selected={...}>Label</BitkitPageSidebar.Item>
|
|
259
|
+
</BitkitPageSidebar.Body>
|
|
260
|
+
</BitkitPageSidebar>
|
|
258
261
|
|
|
259
262
|
// Breadcrumb v2
|
|
260
263
|
<BitkitBreadcrumb>
|
package/package.json
CHANGED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
-
import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
|
|
3
|
-
import { ReactNode } from 'react';
|
|
4
|
-
import { BitkitIconComponent } from '../../icons';
|
|
5
|
-
import { BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';
|
|
6
|
-
export interface BitkitSidebarProps extends BoxProps {
|
|
7
|
-
children: ReactNode;
|
|
8
|
-
}
|
|
9
|
-
interface BitkitSidebarItemCommonProps {
|
|
10
|
-
badge?: ReactNode;
|
|
11
|
-
children: ReactNode;
|
|
12
|
-
icon?: BitkitIconComponent;
|
|
13
|
-
selected?: boolean;
|
|
14
|
-
suffixIcon?: BitkitIconComponent;
|
|
15
|
-
}
|
|
16
|
-
interface BitkitSidebarItemLinkProps extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitSidebarItemCommonProps {
|
|
17
|
-
href: string;
|
|
18
|
-
}
|
|
19
|
-
interface BitkitSidebarItemButtonProps extends Omit<HTMLChakraProps<'button'>, 'children'>, BitkitSidebarItemCommonProps {
|
|
20
|
-
href?: never;
|
|
21
|
-
}
|
|
22
|
-
export type BitkitSidebarItemProps = BitkitSidebarItemButtonProps | BitkitSidebarItemLinkProps;
|
|
23
|
-
export interface BitkitSidebarTitleProps extends BoxProps {
|
|
24
|
-
backHref?: string;
|
|
25
|
-
backLabel?: string;
|
|
26
|
-
children: ReactNode;
|
|
27
|
-
onBackClick?: () => void;
|
|
28
|
-
}
|
|
29
|
-
export interface BitkitSidebarFooterProps extends BoxProps {
|
|
30
|
-
children: ReactNode;
|
|
31
|
-
}
|
|
32
|
-
export interface BitkitSidebarProjectProps extends BoxProps {
|
|
33
|
-
label: string;
|
|
34
|
-
value: string;
|
|
35
|
-
}
|
|
36
|
-
export type BitkitSidebarGroupHeadingProps = BitkitGroupHeadingProps;
|
|
37
|
-
declare const _default: import('react').ForwardRefExoticComponent<BitkitSidebarProps & import('react').RefAttributes<HTMLElement>> & {
|
|
38
|
-
Divider: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
|
|
39
|
-
Footer: import('react').ForwardRefExoticComponent<BitkitSidebarFooterProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
40
|
-
GroupHeading: import('react').ForwardRefExoticComponent<BitkitGroupHeadingProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
41
|
-
Item: import('react').ForwardRefExoticComponent<BitkitSidebarItemProps & import('react').RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
|
|
42
|
-
Project: import('react').ForwardRefExoticComponent<BitkitSidebarProjectProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
43
|
-
Title: import('react').ForwardRefExoticComponent<BitkitSidebarTitleProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
44
|
-
};
|
|
45
|
-
export default _default;
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
import IconChevronLeft from "../../icons/IconChevronLeft.js";
|
|
2
|
-
import BitkitLabelTooltip from "../BitkitLabelTooltip/BitkitLabelTooltip.js";
|
|
3
|
-
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
4
|
-
import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
|
|
5
|
-
import { Box } from "@chakra-ui/react/box";
|
|
6
|
-
import { chakra, useRecipe, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
7
|
-
import { forwardRef } from "react";
|
|
8
|
-
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import { Separator } from "@chakra-ui/react/separator";
|
|
10
|
-
//#region lib/components/BitkitSidebar/BitkitSidebar.tsx
|
|
11
|
-
var BitkitSidebar = forwardRef((props, ref) => {
|
|
12
|
-
const { children, ...rest } = props;
|
|
13
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
14
|
-
return /* @__PURE__ */ jsx(Box, {
|
|
15
|
-
ref,
|
|
16
|
-
asChild: true,
|
|
17
|
-
css: styles.root,
|
|
18
|
-
...rest,
|
|
19
|
-
children: /* @__PURE__ */ jsx("nav", { children })
|
|
20
|
-
});
|
|
21
|
-
});
|
|
22
|
-
BitkitSidebar.displayName = "BitkitSidebar";
|
|
23
|
-
var BitkitSidebarItem = forwardRef((props, ref) => {
|
|
24
|
-
const { badge, children, icon: Icon, selected, suffixIcon: SuffixIcon, ...rest } = props;
|
|
25
|
-
const styles = useSlotRecipe({ key: "sidebar" })({ selected });
|
|
26
|
-
const itemContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
27
|
-
Icon && /* @__PURE__ */ jsx(Icon, {
|
|
28
|
-
css: styles.itemIcon,
|
|
29
|
-
size: "24"
|
|
30
|
-
}),
|
|
31
|
-
/* @__PURE__ */ jsx(chakra.span, {
|
|
32
|
-
css: styles.itemLabel,
|
|
33
|
-
children
|
|
34
|
-
}),
|
|
35
|
-
badge,
|
|
36
|
-
SuffixIcon && /* @__PURE__ */ jsx(SuffixIcon, {
|
|
37
|
-
css: styles.suffixIcon,
|
|
38
|
-
size: "24"
|
|
39
|
-
}),
|
|
40
|
-
/* @__PURE__ */ jsx(chakra.div, { css: styles.selectionMarker })
|
|
41
|
-
] });
|
|
42
|
-
if (rest.href !== void 0) {
|
|
43
|
-
const { className, ...linkRest } = rest;
|
|
44
|
-
return /* @__PURE__ */ jsx(chakra.a, {
|
|
45
|
-
ref,
|
|
46
|
-
...linkRest,
|
|
47
|
-
"aria-current": selected ? "page" : void 0,
|
|
48
|
-
className: className ? `group ${className}` : "group",
|
|
49
|
-
css: styles.item,
|
|
50
|
-
children: itemContent
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
const { className, href: _, ...buttonRest } = rest;
|
|
54
|
-
return /* @__PURE__ */ jsx(chakra.button, {
|
|
55
|
-
ref,
|
|
56
|
-
...buttonRest,
|
|
57
|
-
"aria-pressed": selected,
|
|
58
|
-
className: className ? `group ${className}` : "group",
|
|
59
|
-
css: styles.item,
|
|
60
|
-
type: "button",
|
|
61
|
-
children: itemContent
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
BitkitSidebarItem.displayName = "BitkitSidebarItem";
|
|
65
|
-
var BitkitSidebarTitle = forwardRef((props, ref) => {
|
|
66
|
-
const { backHref, backLabel = "Back", children, onBackClick, ...rest } = props;
|
|
67
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
68
|
-
const controlButtonRecipe = useRecipe({ key: "controlButton" });
|
|
69
|
-
const hasBack = !!backHref || !!onBackClick;
|
|
70
|
-
const BackElement = onBackClick ? chakra.button : chakra.a;
|
|
71
|
-
return /* @__PURE__ */ jsxs(Box, {
|
|
72
|
-
ref,
|
|
73
|
-
css: hasBack ? styles.titleWithBack : styles.title,
|
|
74
|
-
...rest,
|
|
75
|
-
children: [hasBack && /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
76
|
-
text: backLabel,
|
|
77
|
-
children: /* @__PURE__ */ jsx(BackElement, {
|
|
78
|
-
"aria-label": backLabel,
|
|
79
|
-
css: controlButtonRecipe({ size: "sm" }),
|
|
80
|
-
...onBackClick ? {
|
|
81
|
-
onClick: onBackClick,
|
|
82
|
-
type: "button"
|
|
83
|
-
} : { href: backHref },
|
|
84
|
-
children: /* @__PURE__ */ jsx(IconChevronLeft, { size: "24" })
|
|
85
|
-
})
|
|
86
|
-
}), children]
|
|
87
|
-
});
|
|
88
|
-
});
|
|
89
|
-
BitkitSidebarTitle.displayName = "BitkitSidebarTitle";
|
|
90
|
-
var BitkitSidebarFooter = forwardRef((props, ref) => {
|
|
91
|
-
const { children, ...rest } = props;
|
|
92
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
93
|
-
return /* @__PURE__ */ jsx(Box, {
|
|
94
|
-
ref,
|
|
95
|
-
css: styles.footer,
|
|
96
|
-
...rest,
|
|
97
|
-
children
|
|
98
|
-
});
|
|
99
|
-
});
|
|
100
|
-
BitkitSidebarFooter.displayName = "BitkitSidebarFooter";
|
|
101
|
-
var BitkitSidebarProject = forwardRef((props, ref) => {
|
|
102
|
-
const { label, value, ...rest } = props;
|
|
103
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
104
|
-
return /* @__PURE__ */ jsxs(Box, {
|
|
105
|
-
ref,
|
|
106
|
-
css: styles.project,
|
|
107
|
-
...rest,
|
|
108
|
-
children: [/* @__PURE__ */ jsx(chakra.span, {
|
|
109
|
-
css: styles.projectLabel,
|
|
110
|
-
children: label
|
|
111
|
-
}), /* @__PURE__ */ jsx(chakra.span, {
|
|
112
|
-
css: styles.projectValue,
|
|
113
|
-
children: value
|
|
114
|
-
})]
|
|
115
|
-
});
|
|
116
|
-
});
|
|
117
|
-
BitkitSidebarProject.displayName = "BitkitSidebarProject";
|
|
118
|
-
var BitkitSidebarGroupHeading = forwardRef((props, ref) => {
|
|
119
|
-
return /* @__PURE__ */ jsx(BitkitGroupHeading, {
|
|
120
|
-
ref,
|
|
121
|
-
paddingBlockEnd: "12",
|
|
122
|
-
paddingBlockStart: "24",
|
|
123
|
-
paddingInline: "32",
|
|
124
|
-
...props
|
|
125
|
-
});
|
|
126
|
-
});
|
|
127
|
-
BitkitSidebarGroupHeading.displayName = "BitkitSidebarGroupHeading";
|
|
128
|
-
var BitkitSidebarDivider = forwardRef((_, ref) => {
|
|
129
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
130
|
-
return /* @__PURE__ */ jsx(Separator, {
|
|
131
|
-
ref,
|
|
132
|
-
css: styles.divider
|
|
133
|
-
});
|
|
134
|
-
});
|
|
135
|
-
BitkitSidebarDivider.displayName = "BitkitSidebarDivider";
|
|
136
|
-
var BitkitSidebar_default = withSubComponents(BitkitSidebar, {
|
|
137
|
-
Divider: BitkitSidebarDivider,
|
|
138
|
-
Footer: BitkitSidebarFooter,
|
|
139
|
-
GroupHeading: BitkitSidebarGroupHeading,
|
|
140
|
-
Item: BitkitSidebarItem,
|
|
141
|
-
Project: BitkitSidebarProject,
|
|
142
|
-
Title: BitkitSidebarTitle
|
|
143
|
-
});
|
|
144
|
-
//#endregion
|
|
145
|
-
export { BitkitSidebar_default as default };
|
|
146
|
-
|
|
147
|
-
//# sourceMappingURL=BitkitSidebar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSidebar.js","names":[],"sources":["../../../lib/components/BitkitSidebar/BitkitSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useRecipe, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\n// ----- BitkitSidebar (Root) -----\n\nexport interface BitkitSidebarProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitSidebar = forwardRef<HTMLElement, BitkitSidebarProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} asChild css={styles.root} {...rest}>\n <nav>{children}</nav>\n </Box>\n );\n});\n\nBitkitSidebar.displayName = 'BitkitSidebar';\n\n// ----- BitkitSidebar.Item -----\n\ninterface BitkitSidebarItemCommonProps {\n badge?: ReactNode;\n children: ReactNode;\n icon?: BitkitIconComponent;\n selected?: boolean;\n suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitSidebarItemLinkProps extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitSidebarItemCommonProps {\n href: string;\n}\n\ninterface BitkitSidebarItemButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'children'>, BitkitSidebarItemCommonProps {\n href?: never;\n}\n\nexport type BitkitSidebarItemProps = BitkitSidebarItemButtonProps | BitkitSidebarItemLinkProps;\n\nconst BitkitSidebarItem = forwardRef<HTMLButtonElement & HTMLAnchorElement, BitkitSidebarItemProps>((props, ref) => {\n const { badge, children, icon: Icon, selected, suffixIcon: SuffixIcon, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe({ selected });\n\n const itemContent = (\n <>\n {Icon && <Icon css={styles.itemIcon} size=\"24\" />}\n <chakra.span css={styles.itemLabel}>{children}</chakra.span>\n {badge}\n {SuffixIcon && <SuffixIcon css={styles.suffixIcon} size=\"24\" />}\n <chakra.div css={styles.selectionMarker} />\n </>\n );\n\n if (rest.href !== undefined) {\n const { className, ...linkRest } = rest;\n return (\n <chakra.a\n ref={ref}\n {...linkRest}\n aria-current={selected ? 'page' : undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n >\n {itemContent}\n </chakra.a>\n );\n }\n\n const { className, href: _, ...buttonRest } = rest;\n return (\n <chakra.button\n ref={ref}\n {...buttonRest}\n aria-pressed={selected}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n type=\"button\"\n >\n {itemContent}\n </chakra.button>\n );\n});\n\nBitkitSidebarItem.displayName = 'BitkitSidebarItem';\n\n// ----- BitkitSidebar.Title -----\n\nexport interface BitkitSidebarTitleProps extends BoxProps {\n backHref?: string;\n backLabel?: string;\n children: ReactNode;\n onBackClick?: () => void;\n}\n\nconst BitkitSidebarTitle = forwardRef<HTMLDivElement, BitkitSidebarTitleProps>((props, ref) => {\n const { backHref, backLabel = 'Back', children, onBackClick, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n const controlButtonRecipe = useRecipe({ key: 'controlButton' });\n\n const hasBack = !!backHref || !!onBackClick;\n\n const BackElement = onBackClick ? chakra.button : chakra.a;\n\n return (\n <Box ref={ref} css={hasBack ? styles.titleWithBack : styles.title} {...rest}>\n {hasBack && (\n <BitkitLabelTooltip text={backLabel}>\n <BackElement\n aria-label={backLabel}\n css={controlButtonRecipe({ size: 'sm' })}\n {...(onBackClick ? { onClick: onBackClick, type: 'button' as const } : { href: backHref })}\n >\n <IconChevronLeft size=\"24\" />\n </BackElement>\n </BitkitLabelTooltip>\n )}\n {children}\n </Box>\n );\n});\n\nBitkitSidebarTitle.displayName = 'BitkitSidebarTitle';\n\n// ----- BitkitSidebar.Footer -----\n\nexport interface BitkitSidebarFooterProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitSidebarFooter = forwardRef<HTMLDivElement, BitkitSidebarFooterProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={styles.footer} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitSidebarFooter.displayName = 'BitkitSidebarFooter';\n\n// ----- BitkitSidebar.Project -----\n\nexport interface BitkitSidebarProjectProps extends BoxProps {\n label: string;\n value: string;\n}\n\nconst BitkitSidebarProject = forwardRef<HTMLDivElement, BitkitSidebarProjectProps>((props, ref) => {\n const { label, value, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={styles.project} {...rest}>\n <chakra.span css={styles.projectLabel}>{label}</chakra.span>\n <chakra.span css={styles.projectValue}>{value}</chakra.span>\n </Box>\n );\n});\n\nBitkitSidebarProject.displayName = 'BitkitSidebarProject';\n\n// ----- BitkitSidebar.GroupHeading -----\n\nexport type BitkitSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitSidebarGroupHeadingProps>((props, ref) => {\n return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"12\" paddingBlockStart=\"24\" paddingInline=\"32\" {...props} />;\n});\n\nBitkitSidebarGroupHeading.displayName = 'BitkitSidebarGroupHeading';\n\n// ----- BitkitSidebar.Divider -----\n\nconst BitkitSidebarDivider = forwardRef<HTMLDivElement>((_, ref) => {\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return <Separator ref={ref} css={styles.divider} />;\n});\n\nBitkitSidebarDivider.displayName = 'BitkitSidebarDivider';\n\nexport default withSubComponents(BitkitSidebar, {\n Divider: BitkitSidebarDivider,\n Footer: BitkitSidebarFooter,\n GroupHeading: BitkitSidebarGroupHeading,\n Item: BitkitSidebarItem,\n Project: BitkitSidebarProject,\n Title: BitkitSidebarTitle,\n});\n"],"mappings":"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"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
declare const sidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "itemIcon" | "divider" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
|
|
2
|
-
selected: {
|
|
3
|
-
true: {
|
|
4
|
-
item: {
|
|
5
|
-
background: "background/selected";
|
|
6
|
-
_hover: {
|
|
7
|
-
background: "background/selected-hover";
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
itemIcon: {
|
|
11
|
-
color: "icon/interactive";
|
|
12
|
-
};
|
|
13
|
-
itemLabel: {
|
|
14
|
-
textStyle: "body/lg/semibold";
|
|
15
|
-
};
|
|
16
|
-
selectionMarker: {
|
|
17
|
-
display: "block";
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
}>;
|
|
22
|
-
export default sidebarSlotRecipe;
|