@bitrise/bitkit-v2 0.3.209 → 0.3.211
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/BitkitActionMenu/BitkitActionMenu.js +1 -1
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js +88 -0
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js.map +1 -0
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.js +15 -0
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.js.map +1 -0
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbItem.js +16 -0
- package/dist/components/BitkitBreadcrumb/components/BreadcrumbItem.js.map +1 -0
- package/dist/components/BitkitBreadcrumb/components/OverflowMenu.js +21 -0
- package/dist/components/BitkitBreadcrumb/components/OverflowMenu.js.map +1 -0
- package/dist/components/BitkitBreadcrumb/components/OverflowMenuItem.js +21 -0
- package/dist/components/BitkitBreadcrumb/components/OverflowMenuItem.js.map +1 -0
- package/dist/components/BitkitBreadcrumb/components/OverflowMenuTrigger.js +20 -0
- package/dist/components/BitkitBreadcrumb/components/OverflowMenuTrigger.js.map +1 -0
- package/dist/components/BitkitButton/BitkitButton.js +1 -1
- package/dist/components/BitkitCombobox/BitkitCombobox.js +1 -1
- package/dist/components/BitkitIconButton/BitkitIconButton.js +1 -1
- package/dist/components/BitkitPagination/BitkitPagination.js +1 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.d.ts +2 -2
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js +1 -1
- package/dist/components/BitkitTable/BitkitExpandableRow.js +67 -0
- package/dist/components/BitkitTable/BitkitExpandableRow.js.map +1 -0
- package/dist/components/BitkitTable/BitkitSortableColumnHeader.js +81 -0
- package/dist/components/BitkitTable/BitkitSortableColumnHeader.js.map +1 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/main.js +6 -2
- package/dist/theme/slot-recipes/Alert.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/DatePicker.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/EmptyState.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js +2 -0
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/FileUpload.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/Menu.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/NumberInput.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/Steps.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/TagsInput.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/Toast.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/TreeView.recipe.d.ts +1 -1
- package/docs/v1-to-v2-migration-guide.md +295 -0
- package/package.json +2 -1
|
@@ -3,8 +3,8 @@ import { Text } from "@chakra-ui/react/text";
|
|
|
3
3
|
import { createContext, forwardRef, useContext } from "react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { Portal } from "@chakra-ui/react/portal";
|
|
6
|
-
import { Separator } from "@chakra-ui/react/separator";
|
|
7
6
|
import { Menu, useMenuStyles } from "@chakra-ui/react/menu";
|
|
7
|
+
import { Separator } from "@chakra-ui/react/separator";
|
|
8
8
|
//#region lib/components/BitkitActionMenu/BitkitActionMenu.tsx
|
|
9
9
|
var BitkitMenuContext = createContext("lg");
|
|
10
10
|
var Root = ({ trigger, children, ...props }) => {
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import IconChevronRight from "../../icons/IconChevronRight.js";
|
|
2
|
+
import IconMoreHorizontal from "../../icons/IconMoreHorizontal.js";
|
|
3
|
+
import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
|
|
4
|
+
import BreadcrumbCurrentItem from "./components/BreadcrumbCurrentItem.js";
|
|
5
|
+
import BreadcrumbItem from "./components/BreadcrumbItem.js";
|
|
6
|
+
import OverflowMenuTrigger from "./components/OverflowMenuTrigger.js";
|
|
7
|
+
import OverflowMenu from "./components/OverflowMenu.js";
|
|
8
|
+
import OverflowMenuItem from "./components/OverflowMenuItem.js";
|
|
9
|
+
import { Children, Fragment, forwardRef, isValidElement } from "react";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
|
|
12
|
+
import { useBreakpointValue } from "@chakra-ui/react/hooks";
|
|
13
|
+
import { Show } from "@chakra-ui/react/show";
|
|
14
|
+
//#region lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx
|
|
15
|
+
var flattenItemProps = (elements) => {
|
|
16
|
+
const props = [];
|
|
17
|
+
for (const child of elements) if (child.type === BreadcrumbItem) {
|
|
18
|
+
const { href, children } = child.props;
|
|
19
|
+
props.push({
|
|
20
|
+
href,
|
|
21
|
+
children
|
|
22
|
+
});
|
|
23
|
+
} else if (child.type === OverflowMenu) {
|
|
24
|
+
const { children: menuChildren } = child.props;
|
|
25
|
+
const menuChildArray = Children.toArray(menuChildren).filter(isValidElement);
|
|
26
|
+
for (const menuChild of menuChildArray) if (menuChild.type === OverflowMenuItem) {
|
|
27
|
+
const { href, children } = menuChild.props;
|
|
28
|
+
props.push({
|
|
29
|
+
href,
|
|
30
|
+
children
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return props;
|
|
35
|
+
};
|
|
36
|
+
var BitkitBreadcrumbRoot = forwardRef(({ children }, ref) => {
|
|
37
|
+
const isMobile = useBreakpointValue({
|
|
38
|
+
base: true,
|
|
39
|
+
tablet: false
|
|
40
|
+
}, { fallback: "tablet" });
|
|
41
|
+
const childArray = Children.toArray(children).filter(isValidElement);
|
|
42
|
+
if (childArray.length === 0) return null;
|
|
43
|
+
if (isMobile) {
|
|
44
|
+
const links = flattenItemProps(childArray);
|
|
45
|
+
if (links.length === 0) return null;
|
|
46
|
+
const lastLink = links[links.length - 1];
|
|
47
|
+
const overflowLinks = links.slice(0, -1).reverse();
|
|
48
|
+
return /* @__PURE__ */ jsx(Breadcrumb.Root, {
|
|
49
|
+
ref,
|
|
50
|
+
children: /* @__PURE__ */ jsxs(Breadcrumb.List, { children: [
|
|
51
|
+
/* @__PURE__ */ jsxs(Show, {
|
|
52
|
+
when: overflowLinks.length > 0,
|
|
53
|
+
children: [/* @__PURE__ */ jsxs(OverflowMenu, { children: [/* @__PURE__ */ jsx(OverflowMenuTrigger, { children: /* @__PURE__ */ jsx(BitkitControlButton, {
|
|
54
|
+
icon: IconMoreHorizontal,
|
|
55
|
+
label: "Open breadcrumbs",
|
|
56
|
+
size: "xs"
|
|
57
|
+
}) }), overflowLinks.map((link) => /* @__PURE__ */ jsx(OverflowMenuItem, {
|
|
58
|
+
href: link.href,
|
|
59
|
+
children: link.children
|
|
60
|
+
}, link.href))] }), /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })]
|
|
61
|
+
}),
|
|
62
|
+
/* @__PURE__ */ jsx(BreadcrumbItem, {
|
|
63
|
+
href: lastLink.href,
|
|
64
|
+
children: lastLink.children
|
|
65
|
+
}),
|
|
66
|
+
/* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
|
|
67
|
+
] })
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
return /* @__PURE__ */ jsx(Breadcrumb.Root, {
|
|
71
|
+
ref,
|
|
72
|
+
children: /* @__PURE__ */ jsx(Breadcrumb.List, { children: childArray.map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [child, /* @__PURE__ */ jsx(Show, {
|
|
73
|
+
when: index < childArray.length - 1,
|
|
74
|
+
children: /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
|
|
75
|
+
})] }, child.key)) })
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
BitkitBreadcrumbRoot.displayName = "BitkitBreadcrumb";
|
|
79
|
+
var BitkitBreadcrumb = Object.assign(BitkitBreadcrumbRoot, {
|
|
80
|
+
CurrentItem: BreadcrumbCurrentItem,
|
|
81
|
+
Item: BreadcrumbItem,
|
|
82
|
+
OverflowMenu,
|
|
83
|
+
OverflowMenuItem
|
|
84
|
+
});
|
|
85
|
+
//#endregion
|
|
86
|
+
export { BitkitBreadcrumb as default };
|
|
87
|
+
|
|
88
|
+
//# sourceMappingURL=BitkitBreadcrumb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { useBreakpointValue } from '@chakra-ui/react/hooks';\nimport { Show } from '@chakra-ui/react/show';\nimport { Children, forwardRef, Fragment, isValidElement, type ReactElement } from 'react';\n\nimport { IconChevronRight, IconMoreHorizontal } from '../../icons';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton.tsx';\nimport BreadcrumbCurrentItem, { type CurrentItemProps } from './components/BreadcrumbCurrentItem.tsx';\nimport BreadcrumbItem from './components/BreadcrumbItem.tsx';\nimport OverflowMenu, { type OverflowMenuProps } from './components/OverflowMenu.tsx';\nimport OverflowMenuItem from './components/OverflowMenuItem.tsx';\nimport OverflowMenuTrigger from './components/OverflowMenuTrigger.tsx';\nimport { type ItemProps } from './types.ts';\n\ntype BitkitBreadcrumbChild = ReactElement<ItemProps> | ReactElement<CurrentItemProps> | ReactElement<OverflowMenuProps>;\n\nexport type BitkitBreadcrumbProps = {\n children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];\n};\n\nconst flattenItemProps = (elements: ReactElement[]): ItemProps[] => {\n const props: ItemProps[] = [];\n\n for (const child of elements) {\n if (child.type === BreadcrumbItem) {\n const { href, children } = child.props as ItemProps;\n props.push({ href, children });\n } else if (child.type === OverflowMenu) {\n const { children: menuChildren } = child.props as OverflowMenuProps;\n const menuChildArray = Children.toArray(menuChildren).filter(isValidElement);\n for (const menuChild of menuChildArray) {\n if (menuChild.type === OverflowMenuItem) {\n const { href, children } = menuChild.props as ItemProps;\n props.push({ href, children });\n }\n }\n }\n }\n\n return props;\n};\n\nconst BitkitBreadcrumbRoot = forwardRef<HTMLElement, BitkitBreadcrumbProps>(({ children }, ref) => {\n const isMobile = useBreakpointValue({ base: true, tablet: false }, { fallback: 'tablet' });\n const childArray = Children.toArray(children).filter(isValidElement);\n\n if (childArray.length === 0) {\n return null;\n }\n\n if (isMobile) {\n const links = flattenItemProps(childArray);\n if (links.length === 0) {\n return null;\n }\n\n const lastLink = links[links.length - 1];\n const overflowLinks = links.slice(0, -1).reverse();\n\n return (\n <Breadcrumb.Root ref={ref}>\n <Breadcrumb.List>\n <Show when={overflowLinks.length > 0}>\n <OverflowMenu>\n <OverflowMenuTrigger>\n <BitkitControlButton icon={IconMoreHorizontal} label=\"Open breadcrumbs\" size=\"xs\" />\n </OverflowMenuTrigger>\n {overflowLinks.map((link) => (\n <OverflowMenuItem key={link.href} href={link.href}>\n {link.children}\n </OverflowMenuItem>\n ))}\n </OverflowMenu>\n <Breadcrumb.Separator>\n <IconChevronRight />\n </Breadcrumb.Separator>\n </Show>\n <BreadcrumbItem href={lastLink.href}>{lastLink.children}</BreadcrumbItem>\n <Breadcrumb.Separator>\n <IconChevronRight />\n </Breadcrumb.Separator>\n </Breadcrumb.List>\n </Breadcrumb.Root>\n );\n }\n\n return (\n <Breadcrumb.Root ref={ref}>\n <Breadcrumb.List>\n {childArray.map((child, index) => (\n <Fragment key={child.key}>\n {child}\n <Show when={index < childArray.length - 1}>\n <Breadcrumb.Separator>\n <IconChevronRight />\n </Breadcrumb.Separator>\n </Show>\n </Fragment>\n ))}\n </Breadcrumb.List>\n </Breadcrumb.Root>\n );\n});\n\nBitkitBreadcrumbRoot.displayName = 'BitkitBreadcrumb';\n\nconst BitkitBreadcrumb = Object.assign(BitkitBreadcrumbRoot, {\n CurrentItem: BreadcrumbCurrentItem,\n Item: BreadcrumbItem,\n OverflowMenu,\n OverflowMenuItem,\n});\n\nexport default BitkitBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,IAAM,oBAAoB,aAA0C;CAClE,MAAM,QAAqB,EAAE;AAE7B,MAAK,MAAM,SAAS,SAClB,KAAI,MAAM,SAAS,gBAAgB;EACjC,MAAM,EAAE,MAAM,aAAa,MAAM;AACjC,QAAM,KAAK;GAAE;GAAM;GAAU,CAAC;YACrB,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,SAAS,QAAQ,aAAa,CAAC,OAAO,eAAe;AAC5E,OAAK,MAAM,aAAa,eACtB,KAAI,UAAU,SAAS,kBAAkB;GACvC,MAAM,EAAE,MAAM,aAAa,UAAU;AACrC,SAAM,KAAK;IAAE;IAAM;IAAU,CAAC;;;AAMtC,QAAO;;AAGT,IAAM,uBAAuB,YAAgD,EAAE,YAAY,QAAQ;CACjG,MAAM,WAAW,mBAAmB;EAAE,MAAM;EAAM,QAAQ;EAAO,EAAE,EAAE,UAAU,UAAU,CAAC;CAC1F,MAAM,aAAa,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;AAEpE,KAAI,WAAW,WAAW,EACxB,QAAO;AAGT,KAAI,UAAU;EACZ,MAAM,QAAQ,iBAAiB,WAAW;AAC1C,MAAI,MAAM,WAAW,EACnB,QAAO;EAGT,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,gBAAgB,MAAM,MAAM,GAAG,GAAG,CAAC,SAAS;AAElD,SACE,oBAAC,WAAW,MAAZ;GAAsB;aACpB,qBAAC,WAAW,MAAZ,EAAA,UAAA;IACE,qBAAC,MAAD;KAAM,MAAM,cAAc,SAAS;eAAnC,CACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,qBAAD;MAAqB,MAAM;MAAoB,OAAM;MAAmB,MAAK;MAAO,CAAA,EAChE,CAAA,EACrB,cAAc,KAAK,SAClB,oBAAC,kBAAD;MAAkC,MAAM,KAAK;gBAC1C,KAAK;MACW,EAFI,KAAK,KAET,CACnB,CACW,EAAA,CAAA,EACf,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,EAAoB,CAAA,EACC,CAAA,CAClB;;IACP,oBAAC,gBAAD;KAAgB,MAAM,SAAS;eAAO,SAAS;KAA0B,CAAA;IACzE,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,EAAoB,CAAA,EACC,CAAA;IACP,EAAA,CAAA;GACF,CAAA;;AAItB,QACE,oBAAC,WAAW,MAAZ;EAAsB;YACpB,oBAAC,WAAW,MAAZ,EAAA,UACG,WAAW,KAAK,OAAO,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,OACD,oBAAC,MAAD;GAAM,MAAM,QAAQ,WAAW,SAAS;aACtC,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,EAAoB,CAAA,EACC,CAAA;GAClB,CAAA,CACE,EAAA,EAPI,MAAM,IAOV,CACX,EACc,CAAA;EACF,CAAA;EAEpB;AAEF,qBAAqB,cAAc;AAEnC,IAAM,mBAAmB,OAAO,OAAO,sBAAsB;CAC3D,aAAa;CACb,MAAM;CACN;CACA;CACD,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { forwardRef } from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
|
|
4
|
+
//#region lib/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.tsx
|
|
5
|
+
var BreadcrumbCurrentItem = forwardRef(({ children }, ref) => {
|
|
6
|
+
return /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.CurrentLink, {
|
|
7
|
+
ref,
|
|
8
|
+
children
|
|
9
|
+
}) });
|
|
10
|
+
});
|
|
11
|
+
BreadcrumbCurrentItem.displayName = "BitkitBreadcrumb.CurrentItem";
|
|
12
|
+
//#endregion
|
|
13
|
+
export { BreadcrumbCurrentItem as default };
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=BreadcrumbCurrentItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbCurrentItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/BreadcrumbCurrentItem.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport type CurrentItemProps = {\n children: ReactNode;\n};\n\nconst BreadcrumbCurrentItem = forwardRef<HTMLElement, CurrentItemProps>(({ children }, ref) => {\n return (\n <Breadcrumb.Item>\n <Breadcrumb.CurrentLink ref={ref}>{children}</Breadcrumb.CurrentLink>\n </Breadcrumb.Item>\n );\n});\n\nBreadcrumbCurrentItem.displayName = 'BitkitBreadcrumb.CurrentItem';\n\nexport default BreadcrumbCurrentItem;\n"],"mappings":";;;;AAOA,IAAM,wBAAwB,YAA2C,EAAE,YAAY,QAAQ;AAC7F,QACE,oBAAC,WAAW,MAAZ,EAAA,UACE,oBAAC,WAAW,aAAZ;EAA6B;EAAM;EAAkC,CAAA,EACrD,CAAA;EAEpB;AAEF,sBAAsB,cAAc"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { forwardRef } from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
|
|
4
|
+
//#region lib/components/BitkitBreadcrumb/components/BreadcrumbItem.tsx
|
|
5
|
+
var BreadcrumbItem = forwardRef(({ href, children }, ref) => {
|
|
6
|
+
return /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, {
|
|
7
|
+
ref,
|
|
8
|
+
href,
|
|
9
|
+
children
|
|
10
|
+
}) });
|
|
11
|
+
});
|
|
12
|
+
BreadcrumbItem.displayName = "BitkitBreadcrumb.Item";
|
|
13
|
+
//#endregion
|
|
14
|
+
export { BreadcrumbItem as default };
|
|
15
|
+
|
|
16
|
+
//# sourceMappingURL=BreadcrumbItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/BreadcrumbItem.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { forwardRef } from 'react';\n\nimport { type ItemProps } from '../types.ts';\n\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, ItemProps>(({ href, children }, ref) => {\n return (\n <Breadcrumb.Item>\n <Breadcrumb.Link ref={ref} href={href}>\n {children}\n </Breadcrumb.Link>\n </Breadcrumb.Item>\n );\n});\n\nBreadcrumbItem.displayName = 'BitkitBreadcrumb.Item';\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;AAKA,IAAM,iBAAiB,YAA0C,EAAE,MAAM,YAAY,QAAQ;AAC3F,QACE,oBAAC,WAAW,MAAZ,EAAA,UACE,oBAAC,WAAW,MAAZ;EAAsB;EAAW;EAC9B;EACe,CAAA,EACF,CAAA;EAEpB;AAEF,eAAe,cAAc"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import OverflowMenuTrigger from "./OverflowMenuTrigger.js";
|
|
2
|
+
import { Children, isValidElement } from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Portal } from "@chakra-ui/react/portal";
|
|
5
|
+
import { Menu } from "@chakra-ui/react/menu";
|
|
6
|
+
//#region lib/components/BitkitBreadcrumb/components/OverflowMenu.tsx
|
|
7
|
+
var OverflowMenu = ({ children }) => {
|
|
8
|
+
const childArray = Children.toArray(children).filter(isValidElement);
|
|
9
|
+
const trigger = childArray.find((child) => child.type === OverflowMenuTrigger);
|
|
10
|
+
const items = childArray.filter((child) => child.type !== OverflowMenuTrigger);
|
|
11
|
+
return /* @__PURE__ */ jsxs(Menu.Root, {
|
|
12
|
+
size: "md",
|
|
13
|
+
positioning: { offset: { crossAxis: -16 } },
|
|
14
|
+
children: [trigger ?? /* @__PURE__ */ jsx(OverflowMenuTrigger, {}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: items }) }) })]
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
OverflowMenu.displayName = "BitkitBreadcrumb.OverflowMenu";
|
|
18
|
+
//#endregion
|
|
19
|
+
export { OverflowMenu as default };
|
|
20
|
+
|
|
21
|
+
//# sourceMappingURL=OverflowMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OverflowMenu.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/OverflowMenu.tsx"],"sourcesContent":["import { Menu } from '@chakra-ui/react/menu';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Children, isValidElement, type ReactNode } from 'react';\n\nimport OverflowMenuTrigger from './OverflowMenuTrigger.tsx';\n\nexport type OverflowMenuProps = {\n children: ReactNode;\n};\n\nconst OverflowMenu = ({ children }: OverflowMenuProps) => {\n const childArray = Children.toArray(children).filter(isValidElement);\n const trigger = childArray.find((child) => child.type === OverflowMenuTrigger);\n const items = childArray.filter((child) => child.type !== OverflowMenuTrigger);\n\n return (\n <Menu.Root size=\"md\" positioning={{ offset: { crossAxis: -16 } }}>\n {trigger ?? <OverflowMenuTrigger />}\n <Portal>\n <Menu.Positioner>\n <Menu.Content>{items}</Menu.Content>\n </Menu.Positioner>\n </Portal>\n </Menu.Root>\n );\n};\n\nOverflowMenu.displayName = 'BitkitBreadcrumb.OverflowMenu';\n\nexport default OverflowMenu;\n"],"mappings":";;;;;;AAUA,IAAM,gBAAgB,EAAE,eAAkC;CACxD,MAAM,aAAa,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CACpE,MAAM,UAAU,WAAW,MAAM,UAAU,MAAM,SAAS,oBAAoB;CAC9E,MAAM,QAAQ,WAAW,QAAQ,UAAU,MAAM,SAAS,oBAAoB;AAE9E,QACE,qBAAC,KAAK,MAAN;EAAW,MAAK;EAAK,aAAa,EAAE,QAAQ,EAAE,WAAW,KAAK,EAAE;YAAhE,CACG,WAAW,oBAAC,qBAAD,EAAuB,CAAA,EACnC,oBAAC,QAAD,EAAA,UACE,oBAAC,KAAK,YAAN,EAAA,UACE,oBAAC,KAAK,SAAN,EAAA,UAAe,OAAqB,CAAA,EACpB,CAAA,EACX,CAAA,CACC;;;AAIhB,aAAa,cAAc"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { forwardRef, useId } from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Menu } from "@chakra-ui/react/menu";
|
|
4
|
+
//#region lib/components/BitkitBreadcrumb/components/OverflowMenuItem.tsx
|
|
5
|
+
var OverflowMenuItem = forwardRef(({ href, children }, ref) => {
|
|
6
|
+
const id = useId();
|
|
7
|
+
return /* @__PURE__ */ jsx(Menu.Item, {
|
|
8
|
+
value: id,
|
|
9
|
+
asChild: true,
|
|
10
|
+
children: /* @__PURE__ */ jsx("a", {
|
|
11
|
+
ref,
|
|
12
|
+
href,
|
|
13
|
+
children
|
|
14
|
+
})
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
OverflowMenuItem.displayName = "BitkitBreadcrumb.OverflowMenuItem";
|
|
18
|
+
//#endregion
|
|
19
|
+
export { OverflowMenuItem as default };
|
|
20
|
+
|
|
21
|
+
//# sourceMappingURL=OverflowMenuItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OverflowMenuItem.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/OverflowMenuItem.tsx"],"sourcesContent":["import { Menu } from '@chakra-ui/react/menu';\nimport { forwardRef, useId } from 'react';\n\nimport { type ItemProps } from '../types.ts';\n\nconst OverflowMenuItem = forwardRef<HTMLAnchorElement, ItemProps>(({ href, children }, ref) => {\n const id = useId();\n\n return (\n <Menu.Item value={id} asChild>\n <a ref={ref} href={href}>\n {children}\n </a>\n </Menu.Item>\n );\n});\n\nOverflowMenuItem.displayName = 'BitkitBreadcrumb.OverflowMenuItem';\n\nexport default OverflowMenuItem;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,YAA0C,EAAE,MAAM,YAAY,QAAQ;CAC7F,MAAM,KAAK,OAAO;AAElB,QACE,oBAAC,KAAK,MAAN;EAAW,OAAO;EAAI,SAAA;YACpB,oBAAC,KAAD;GAAQ;GAAW;GAChB;GACC,CAAA;EACM,CAAA;EAEd;AAEF,iBAAiB,cAAc"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Menu } from "@chakra-ui/react/menu";
|
|
3
|
+
import { Breadcrumb } from "@chakra-ui/react/breadcrumb";
|
|
4
|
+
//#region lib/components/BitkitBreadcrumb/components/OverflowMenuTrigger.tsx
|
|
5
|
+
var DEFAULT_TRIGGER = /* @__PURE__ */ jsx(Breadcrumb.Ellipsis, {
|
|
6
|
+
as: "span",
|
|
7
|
+
tabIndex: 0,
|
|
8
|
+
children: ". . ."
|
|
9
|
+
});
|
|
10
|
+
var OverflowMenuTrigger = ({ children = DEFAULT_TRIGGER }) => {
|
|
11
|
+
return /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Menu.Trigger, {
|
|
12
|
+
asChild: true,
|
|
13
|
+
children
|
|
14
|
+
}) });
|
|
15
|
+
};
|
|
16
|
+
OverflowMenuTrigger.displayName = "BitkitBreadcrumb.OverflowMenuTrigger";
|
|
17
|
+
//#endregion
|
|
18
|
+
export { OverflowMenuTrigger as default };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=OverflowMenuTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OverflowMenuTrigger.js","names":[],"sources":["../../../../lib/components/BitkitBreadcrumb/components/OverflowMenuTrigger.tsx"],"sourcesContent":["import { Breadcrumb } from '@chakra-ui/react/breadcrumb';\nimport { Menu } from '@chakra-ui/react/menu';\nimport { type ReactNode } from 'react';\n\ntype OverflowMenuTriggerProps = {\n children?: ReactNode;\n};\n\nconst DEFAULT_TRIGGER = (\n <Breadcrumb.Ellipsis as=\"span\" tabIndex={0}>\n . . .\n </Breadcrumb.Ellipsis>\n);\n\nconst OverflowMenuTrigger = ({ children = DEFAULT_TRIGGER }: OverflowMenuTriggerProps) => {\n return (\n <Breadcrumb.Item>\n <Menu.Trigger asChild>{children}</Menu.Trigger>\n </Breadcrumb.Item>\n );\n};\n\nOverflowMenuTrigger.displayName = 'BitkitBreadcrumb.OverflowMenuTrigger';\n\nexport default OverflowMenuTrigger;\n"],"mappings":";;;;AAQA,IAAM,kBACJ,oBAAC,WAAW,UAAZ;CAAqB,IAAG;CAAO,UAAU;WAAG;CAEtB,CAAA;AAGxB,IAAM,uBAAuB,EAAE,WAAW,sBAAgD;AACxF,QACE,oBAAC,WAAW,MAAZ,EAAA,UACE,oBAAC,KAAK,SAAN;EAAc,SAAA;EAAS;EAAwB,CAAA,EAC/B,CAAA;;AAItB,oBAAoB,cAAc"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { forwardRef } from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Button } from "@chakra-ui/react/button";
|
|
4
3
|
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
4
|
+
import { Button } from "@chakra-ui/react/button";
|
|
5
5
|
//#region lib/components/BitkitButton/BitkitButton.tsx
|
|
6
6
|
var BitkitButton = forwardRef((props, ref) => {
|
|
7
7
|
const { children, icon: Icon, size, state, suffixIcon: SuffixIcon, ...rest } = props;
|
|
@@ -7,8 +7,8 @@ import BitkitField from "../BitkitField/BitkitField.js";
|
|
|
7
7
|
import { forwardRef } from "react";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
import { Portal } from "@chakra-ui/react/portal";
|
|
10
|
-
import { Combobox } from "@chakra-ui/react/combobox";
|
|
11
10
|
import { useListCollection } from "@chakra-ui/react/hooks";
|
|
11
|
+
import { Combobox } from "@chakra-ui/react/combobox";
|
|
12
12
|
import { useFilter } from "@chakra-ui/react/locale";
|
|
13
13
|
//#region lib/components/BitkitCombobox/BitkitCombobox.tsx
|
|
14
14
|
var BitkitCombobox = forwardRef((props, ref) => {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import BitkitLabelTooltip from "../BitkitLabelTooltip/BitkitLabelTooltip.js";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
import { IconButton } from "@chakra-ui/react/button";
|
|
5
4
|
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
5
|
+
import { IconButton } from "@chakra-ui/react/button";
|
|
6
6
|
//#region lib/components/BitkitIconButton/BitkitIconButton.tsx
|
|
7
7
|
var BitkitIconButton = forwardRef((props, ref) => {
|
|
8
8
|
const { icon: Icon, label, size, state, tooltipProps, ...rest } = props;
|
|
@@ -6,8 +6,8 @@ import { Box } from "@chakra-ui/react/box";
|
|
|
6
6
|
import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
7
7
|
import { forwardRef, useMemo } from "react";
|
|
8
8
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
10
9
|
import { Separator } from "@chakra-ui/react/separator";
|
|
10
|
+
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
11
11
|
//#region lib/components/BitkitPagination/BitkitPagination.tsx
|
|
12
12
|
var DEFAULT_LABELS = {
|
|
13
13
|
items: "{start}–{end} of {total} items",
|
|
@@ -17,8 +17,8 @@ declare const _default: import('react').ForwardRefExoticComponent<{
|
|
|
17
17
|
children?: ReactNode | undefined;
|
|
18
18
|
} & import('react').RefAttributes<HTMLDivElement>> & {
|
|
19
19
|
Action: import('react').ForwardRefExoticComponent<BitkitSplitButtonActionProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
20
|
-
Group: import('react').ForwardRefExoticComponent<import('
|
|
21
|
-
Item: import('react').ForwardRefExoticComponent<import('
|
|
20
|
+
Group: import('react').ForwardRefExoticComponent<import('..').BitkitMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
21
|
+
Item: import('react').ForwardRefExoticComponent<import('..').BitkitMenuItemProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
22
22
|
Separator: {
|
|
23
23
|
(): import("react/jsx-runtime").JSX.Element;
|
|
24
24
|
displayName: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import IconChevronDown from "../../icons/IconChevronDown.js";
|
|
2
|
+
import BitkitActionMenu from "../BitkitActionMenu/BitkitActionMenu.js";
|
|
2
3
|
import BitkitButton from "../BitkitButton/BitkitButton.js";
|
|
3
4
|
import BitkitIconButton from "../BitkitIconButton/BitkitIconButton.js";
|
|
4
|
-
import BitkitActionMenu from "../BitkitActionMenu/BitkitActionMenu.js";
|
|
5
5
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
6
|
import { Children, forwardRef, isValidElement } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
|
|
2
|
+
import { Box } from "@chakra-ui/react/box";
|
|
3
|
+
import { chakra } from "@chakra-ui/react/styled-system";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { Collapsible } from "@chakra-ui/react/collapsible";
|
|
7
|
+
import { Table } from "@chakra-ui/react/table";
|
|
8
|
+
//#region lib/components/BitkitTable/BitkitExpandableRow.tsx
|
|
9
|
+
var expandCellCss = {
|
|
10
|
+
paddingBlock: 0,
|
|
11
|
+
paddingInline: 0,
|
|
12
|
+
verticalAlign: "middle",
|
|
13
|
+
width: "48"
|
|
14
|
+
};
|
|
15
|
+
var expandTriggerCss = {
|
|
16
|
+
alignItems: "center",
|
|
17
|
+
background: "none",
|
|
18
|
+
border: "none",
|
|
19
|
+
cursor: "pointer",
|
|
20
|
+
display: "flex",
|
|
21
|
+
justifyContent: "center",
|
|
22
|
+
padding: "12",
|
|
23
|
+
paddingInlineEnd: "4",
|
|
24
|
+
width: "full"
|
|
25
|
+
};
|
|
26
|
+
var expandedContentCss = {
|
|
27
|
+
paddingBlock: "16",
|
|
28
|
+
paddingInlineEnd: "16",
|
|
29
|
+
paddingInlineStart: "64"
|
|
30
|
+
};
|
|
31
|
+
var BitkitExpandableRow = forwardRef(({ children, colSpan, defaultOpen = false, expandedContent }, ref) => /* @__PURE__ */ jsx(Collapsible.Root, {
|
|
32
|
+
asChild: true,
|
|
33
|
+
defaultOpen,
|
|
34
|
+
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Table.Row, {
|
|
35
|
+
ref,
|
|
36
|
+
children: [/* @__PURE__ */ jsx(Table.Cell, {
|
|
37
|
+
css: expandCellCss,
|
|
38
|
+
children: /* @__PURE__ */ jsx(Collapsible.Trigger, {
|
|
39
|
+
asChild: true,
|
|
40
|
+
children: /* @__PURE__ */ jsx(chakra.button, {
|
|
41
|
+
"aria-label": "Toggle row details",
|
|
42
|
+
css: expandTriggerCss,
|
|
43
|
+
type: "button",
|
|
44
|
+
children: /* @__PURE__ */ jsx(AssetSelectChevron, { color: "button/secondary/fg/text" })
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
}), children]
|
|
48
|
+
}), /* @__PURE__ */ jsx(Table.Row, {
|
|
49
|
+
css: { _hover: { background: "none" } },
|
|
50
|
+
children: /* @__PURE__ */ jsx(Table.Cell, {
|
|
51
|
+
colSpan,
|
|
52
|
+
css: {
|
|
53
|
+
paddingBlock: 0,
|
|
54
|
+
paddingInline: 0
|
|
55
|
+
},
|
|
56
|
+
children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Box, {
|
|
57
|
+
css: expandedContentCss,
|
|
58
|
+
children: expandedContent
|
|
59
|
+
}) })
|
|
60
|
+
})
|
|
61
|
+
})] })
|
|
62
|
+
}));
|
|
63
|
+
BitkitExpandableRow.displayName = "BitkitExpandableRow";
|
|
64
|
+
//#endregion
|
|
65
|
+
export { BitkitExpandableRow as default };
|
|
66
|
+
|
|
67
|
+
//# sourceMappingURL=BitkitExpandableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitExpandableRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitExpandableRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\n\nexport interface BitkitExpandableRowProps {\n children: ReactNode;\n colSpan: number;\n defaultOpen?: boolean;\n expandedContent: ReactNode;\n}\n\nconst expandCellCss: SystemStyleObject = {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n};\n\nconst expandTriggerCss: SystemStyleObject = {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n padding: '12',\n paddingInlineEnd: '4',\n width: 'full',\n};\n\nconst expandedContentCss: SystemStyleObject = {\n paddingBlock: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '64',\n};\n\nconst BitkitExpandableRow = forwardRef<HTMLTableRowElement, BitkitExpandableRowProps>(\n ({ children, colSpan, defaultOpen = false, expandedContent }, ref) => (\n <Collapsible.Root asChild defaultOpen={defaultOpen}>\n <>\n <Table.Row ref={ref}>\n <Table.Cell css={expandCellCss}>\n <Collapsible.Trigger asChild>\n <chakra.button aria-label=\"Toggle row details\" css={expandTriggerCss} type=\"button\">\n <AssetSelectChevron color=\"button/secondary/fg/text\" />\n </chakra.button>\n </Collapsible.Trigger>\n </Table.Cell>\n {children}\n </Table.Row>\n <Table.Row css={{ _hover: { background: 'none' } }}>\n <Table.Cell colSpan={colSpan} css={{ paddingBlock: 0, paddingInline: 0 }}>\n <Collapsible.Content>\n <Box css={expandedContentCss}>{expandedContent}</Box>\n </Collapsible.Content>\n </Table.Cell>\n </Table.Row>\n </>\n </Collapsible.Root>\n ),\n);\n\nBitkitExpandableRow.displayName = 'BitkitExpandableRow';\n\nexport default BitkitExpandableRow;\n"],"mappings":";;;;;;;;AAeA,IAAM,gBAAmC;CACvC,cAAc;CACd,eAAe;CACf,eAAe;CACf,OAAO;CACR;AAED,IAAM,mBAAsC;CAC1C,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,gBAAgB;CAChB,SAAS;CACT,kBAAkB;CAClB,OAAO;CACR;AAED,IAAM,qBAAwC;CAC5C,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACrB;AAED,IAAM,sBAAsB,YACzB,EAAE,UAAU,SAAS,cAAc,OAAO,mBAAmB,QAC5D,oBAAC,YAAY,MAAb;CAAkB,SAAA;CAAqB;WACrC,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAM,KAAP;EAAgB;YAAhB,CACE,oBAAC,MAAM,MAAP;GAAY,KAAK;aACf,oBAAC,YAAY,SAAb;IAAqB,SAAA;cACnB,oBAAC,OAAO,QAAR;KAAe,cAAW;KAAqB,KAAK;KAAkB,MAAK;eACzE,oBAAC,oBAAD,EAAoB,OAAM,4BAA6B,CAAA;KACzC,CAAA;IACI,CAAA;GACX,CAAA,EACZ,SACS;KACZ,oBAAC,MAAM,KAAP;EAAW,KAAK,EAAE,QAAQ,EAAE,YAAY,QAAQ,EAAE;YAChD,oBAAC,MAAM,MAAP;GAAqB;GAAS,KAAK;IAAE,cAAc;IAAG,eAAe;IAAG;aACtE,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,KAAD;IAAK,KAAK;cAAqB;IAAsB,CAAA,EACjC,CAAA;GACX,CAAA;EACH,CAAA,CACX,EAAA,CAAA;CACc,CAAA,CAEtB;AAED,oBAAoB,cAAc"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { chakra } from "@chakra-ui/react/styled-system";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { Icon } from "@chakra-ui/react/icon";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { Table } from "@chakra-ui/react/table";
|
|
6
|
+
//#region lib/components/BitkitTable/BitkitSortableColumnHeader.tsx
|
|
7
|
+
var sortHeaderCss = {
|
|
8
|
+
paddingBlock: 0,
|
|
9
|
+
paddingInline: 0
|
|
10
|
+
};
|
|
11
|
+
var sortButtonCss = {
|
|
12
|
+
alignItems: "center",
|
|
13
|
+
appearance: "none",
|
|
14
|
+
background: "none",
|
|
15
|
+
border: "none",
|
|
16
|
+
color: "inherit",
|
|
17
|
+
cursor: "pointer",
|
|
18
|
+
display: "flex",
|
|
19
|
+
font: "inherit",
|
|
20
|
+
gap: "4",
|
|
21
|
+
height: "100%",
|
|
22
|
+
paddingBlock: "12",
|
|
23
|
+
paddingInline: "16",
|
|
24
|
+
userSelect: "none",
|
|
25
|
+
_focusVisible: { outlineOffset: "-3px" },
|
|
26
|
+
width: "100%",
|
|
27
|
+
_hover: { backgroundColor: "background/active" }
|
|
28
|
+
};
|
|
29
|
+
var SortIcon = forwardRef((props, ref) => {
|
|
30
|
+
const { direction, ...rest } = props;
|
|
31
|
+
const upFill = direction === "ascending" ? "currentColor" : "var(--sort-icon-inactive)";
|
|
32
|
+
const downFill = direction === "descending" ? "currentColor" : "var(--sort-icon-inactive)";
|
|
33
|
+
return /* @__PURE__ */ jsx(Icon, {
|
|
34
|
+
ref,
|
|
35
|
+
asChild: true,
|
|
36
|
+
css: {
|
|
37
|
+
"--sort-icon-inactive": "colors.icon.disabled",
|
|
38
|
+
color: "icon/primary",
|
|
39
|
+
display: "inline-block",
|
|
40
|
+
verticalAlign: "middle"
|
|
41
|
+
},
|
|
42
|
+
...rest,
|
|
43
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
44
|
+
fill: "none",
|
|
45
|
+
height: "24",
|
|
46
|
+
viewBox: "0 0 24 24",
|
|
47
|
+
width: "24",
|
|
48
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
49
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
50
|
+
d: "M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z",
|
|
51
|
+
fill: upFill
|
|
52
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
53
|
+
d: "M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z",
|
|
54
|
+
fill: downFill
|
|
55
|
+
})]
|
|
56
|
+
})
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
SortIcon.displayName = "SortIcon";
|
|
60
|
+
var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) => /* @__PURE__ */ jsx(Table.ColumnHeader, {
|
|
61
|
+
ref,
|
|
62
|
+
"aria-sort": direction === "none" ? void 0 : direction,
|
|
63
|
+
css: sortHeaderCss,
|
|
64
|
+
...rest,
|
|
65
|
+
children: /* @__PURE__ */ jsxs(chakra.button, {
|
|
66
|
+
css: sortButtonCss,
|
|
67
|
+
justifyContent: textAlign === "end" ? "flex-end" : void 0,
|
|
68
|
+
onClick: onSort,
|
|
69
|
+
type: "button",
|
|
70
|
+
children: [
|
|
71
|
+
children,
|
|
72
|
+
" ",
|
|
73
|
+
/* @__PURE__ */ jsx(SortIcon, { direction })
|
|
74
|
+
]
|
|
75
|
+
})
|
|
76
|
+
}));
|
|
77
|
+
BitkitSortableColumnHeader.displayName = "BitkitSortableColumnHeader";
|
|
78
|
+
//#endregion
|
|
79
|
+
export { BitkitSortableColumnHeader as default };
|
|
80
|
+
|
|
81
|
+
//# sourceMappingURL=BitkitSortableColumnHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitSortableColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitSortableColumnHeader.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type Ref } from 'react';\n\ntype SortDirection = 'ascending' | 'descending' | 'none';\n\nexport interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {\n direction: SortDirection;\n onSort: () => void;\n}\n\nconst sortHeaderCss = {\n paddingBlock: 0,\n paddingInline: 0,\n};\n\nconst sortButtonCss = {\n alignItems: 'center',\n appearance: 'none' as const,\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n font: 'inherit',\n gap: '4',\n height: '100%',\n paddingBlock: '12',\n paddingInline: '16',\n userSelect: 'none' as const,\n _focusVisible: {\n outlineOffset: '-3px',\n },\n width: '100%',\n _hover: { backgroundColor: 'background/active' },\n};\n\nconst SortIcon = forwardRef((props: IconProps & { direction: SortDirection }, ref: Ref<SVGSVGElement>) => {\n const { direction, ...rest } = props;\n const upFill = direction === 'ascending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n const downFill = direction === 'descending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n\n return (\n <Icon\n ref={ref}\n asChild\n css={{\n '--sort-icon-inactive': 'colors.icon.disabled',\n color: 'icon/primary',\n display: 'inline-block',\n verticalAlign: 'middle',\n }}\n {...rest}\n >\n <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z\"\n fill={upFill}\n />\n <path\n d=\"M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z\"\n fill={downFill}\n />\n </svg>\n </Icon>\n );\n});\n\nSortIcon.displayName = 'SortIcon';\n\nconst BitkitSortableColumnHeader = forwardRef<HTMLTableCellElement, BitkitSortableColumnHeaderProps>(\n ({ children, direction, onSort, textAlign, ...rest }, ref) => (\n <Table.ColumnHeader\n ref={ref}\n aria-sort={direction === 'none' ? undefined : direction}\n css={sortHeaderCss}\n {...rest}\n >\n <chakra.button\n css={sortButtonCss}\n justifyContent={textAlign === 'end' ? 'flex-end' : undefined}\n onClick={onSort}\n type=\"button\"\n >\n {children} <SortIcon direction={direction} />\n </chakra.button>\n </Table.ColumnHeader>\n ),\n);\n\nBitkitSortableColumnHeader.displayName = 'BitkitSortableColumnHeader';\n\nexport default BitkitSortableColumnHeader;\n"],"mappings":";;;;;;AAYA,IAAM,gBAAgB;CACpB,cAAc;CACd,eAAe;CAChB;AAED,IAAM,gBAAgB;CACpB,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,SAAS;CACT,MAAM;CACN,KAAK;CACL,QAAQ;CACR,cAAc;CACd,eAAe;CACf,YAAY;CACZ,eAAe,EACb,eAAe,QAChB;CACD,OAAO;CACP,QAAQ,EAAE,iBAAiB,qBAAqB;CACjD;AAED,IAAM,WAAW,YAAY,OAAiD,QAA4B;CACxG,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,cAAc,cAAc,iBAAiB;CAC5D,MAAM,WAAW,cAAc,eAAe,iBAAiB;AAE/D,QACE,oBAAC,MAAD;EACO;EACL,SAAA;EACA,KAAK;GACH,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,eAAe;GAChB;EACD,GAAI;YAEJ,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAO;GAAK,SAAQ;GAAY,OAAM;GAAK,OAAM;aAAlE,CACE,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;IACN,CAAA,EACF,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;IACN,CAAA,CACE;;EACD,CAAA;EAET;AAEF,SAAS,cAAc;AAEvB,IAAM,6BAA6B,YAChC,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,QAAQ,QACpD,oBAAC,MAAM,cAAP;CACO;CACL,aAAW,cAAc,SAAS,KAAA,IAAY;CAC9C,KAAK;CACL,GAAI;WAEJ,qBAAC,OAAO,QAAR;EACE,KAAK;EACL,gBAAgB,cAAc,QAAQ,aAAa,KAAA;EACnD,SAAS;EACT,MAAK;YAJP;GAMG;GAAS;GAAC,oBAAC,UAAD,EAAqB,WAAa,CAAA;GAC/B;;CACG,CAAA,CAExB;AAED,2BAA2B,cAAc"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
export { default as BitkitAccordion, type BitkitAccordionItemBodyProps, type BitkitAccordionItemProps, type BitkitAccordionItemTriggerProps, type BitkitAccordionProps, } from './BitkitAccordion/BitkitAccordion';
|
|
2
2
|
export { default as BitkitActionBar, type BitkitActionBarProps } from './BitkitActionBar/BitkitActionBar';
|
|
3
|
+
export { default as BitkitActionMenu, type BitkitMenuGroupProps, type BitkitMenuItemProps, } from './BitkitActionMenu/BitkitActionMenu';
|
|
3
4
|
export { default as BitkitAlert, type BitkitAlertProps } from './BitkitAlert/BitkitAlert';
|
|
4
5
|
export { default as BitkitAvatar, type BitkitAvatarProps } from './BitkitAvatar/BitkitAvatar';
|
|
5
6
|
export { default as BitkitBadge, type BitkitBadgeProps } from './BitkitBadge/BitkitBadge';
|
|
7
|
+
export { default as BitkitBreadcrumb, type BitkitBreadcrumbProps } from './BitkitBreadcrumb/BitkitBreadcrumb';
|
|
6
8
|
export { default as BitkitButton, type BitkitButtonProps } from './BitkitButton/BitkitButton';
|
|
7
9
|
export { default as BitkitCalendar, type BitkitCalendarProps } from './BitkitCalendar/BitkitCalendar';
|
|
8
10
|
export { default as BitkitCard } from './BitkitCard/BitkitCard';
|
|
@@ -67,6 +69,8 @@ export { default as BitkitStat, type BitkitStatProps, type TrendColor, type Tren
|
|
|
67
69
|
export { default as BitkitSteps, type BitkitStepsItemProps, type BitkitStepsItemState, type BitkitStepsProps, } from './BitkitSteps/BitkitSteps';
|
|
68
70
|
export { default as BitkitStepsCard, type BitkitStepsCardBodyProps, type BitkitStepsCardFooterProps, type BitkitStepsCardHeaderProps, type BitkitStepsCardProps, type BitkitStepsCardStepProps, } from './BitkitStepsCard/BitkitStepsCard';
|
|
69
71
|
export { default as BitkitSwitch, type BitkitSwitchProps } from './BitkitSwitch';
|
|
72
|
+
export { default as BitkitExpandableRow, type BitkitExpandableRowProps } from './BitkitTable/BitkitExpandableRow';
|
|
73
|
+
export { default as BitkitSortableColumnHeader, type BitkitSortableColumnHeaderProps, } from './BitkitTable/BitkitSortableColumnHeader';
|
|
70
74
|
export { default as BitkitTabs } from './BitkitTabs/BitkitTabs';
|
|
71
75
|
export { default as BitkitTag, type BitkitTagProps } from './BitkitTag/BitkitTag';
|
|
72
76
|
export { default as BitkitTagsInput, type BitkitTagsInputProps } from './BitkitTagsInput/BitkitTagsInput';
|
package/dist/main.js
CHANGED
|
@@ -283,10 +283,13 @@ import IconXTwitter from "./icons/IconXTwitter.js";
|
|
|
283
283
|
import BitkitLabelTooltip from "./components/BitkitLabelTooltip/BitkitLabelTooltip.js";
|
|
284
284
|
import BitkitCloseButton from "./components/BitkitCloseButton/BitkitCloseButton.js";
|
|
285
285
|
import BitkitActionBar from "./components/BitkitActionBar/BitkitActionBar.js";
|
|
286
|
+
import BitkitActionMenu from "./components/BitkitActionMenu/BitkitActionMenu.js";
|
|
286
287
|
import BitkitColorButton from "./components/BitkitColorButton/BitkitColorButton.js";
|
|
287
288
|
import BitkitAlert from "./components/BitkitAlert/BitkitAlert.js";
|
|
288
289
|
import BitkitAvatar from "./components/BitkitAvatar/BitkitAvatar.js";
|
|
289
290
|
import BitkitBadge from "./components/BitkitBadge/BitkitBadge.js";
|
|
291
|
+
import BitkitControlButton from "./components/BitkitControlButton/BitkitControlButton.js";
|
|
292
|
+
import BitkitBreadcrumb from "./components/BitkitBreadcrumb/BitkitBreadcrumb.js";
|
|
290
293
|
import BitkitButton from "./components/BitkitButton/BitkitButton.js";
|
|
291
294
|
import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
|
|
292
295
|
import BitkitSelectMenu from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
|
|
@@ -300,7 +303,6 @@ import BitkitLabel from "./components/BitkitLabel/BitkitLabel.js";
|
|
|
300
303
|
import BitkitCollapsible from "./components/BitkitCollapsible/BitkitCollapsible.js";
|
|
301
304
|
import BitkitField from "./components/BitkitField/BitkitField.js";
|
|
302
305
|
import BitkitCombobox from "./components/BitkitCombobox/BitkitCombobox.js";
|
|
303
|
-
import BitkitControlButton from "./components/BitkitControlButton/BitkitControlButton.js";
|
|
304
306
|
import BitkitDataWidget from "./components/BitkitDataWidget/BitkitDataWidget.js";
|
|
305
307
|
import BitkitDefinitionTooltip from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
|
|
306
308
|
import BitkitDialogStep from "./components/BitkitDialog/BitkitDialogStep.js";
|
|
@@ -350,6 +352,8 @@ import BitkitStat from "./components/BitkitStat/BitkitStat.js";
|
|
|
350
352
|
import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
|
|
351
353
|
import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
|
|
352
354
|
import BitkitSwitch from "./components/BitkitSwitch/BitkitSwitch.js";
|
|
355
|
+
import BitkitExpandableRow from "./components/BitkitTable/BitkitExpandableRow.js";
|
|
356
|
+
import BitkitSortableColumnHeader from "./components/BitkitTable/BitkitSortableColumnHeader.js";
|
|
353
357
|
import BitkitTabs from "./components/BitkitTabs/BitkitTabs.js";
|
|
354
358
|
import BitkitTagsInput from "./components/BitkitTagsInput/BitkitTagsInput.js";
|
|
355
359
|
import BitkitTextArea from "./components/BitkitTextArea/BitkitTextArea.js";
|
|
@@ -359,4 +363,4 @@ import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButt
|
|
|
359
363
|
import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
|
|
360
364
|
import bitkitTheme from "./theme/index.js";
|
|
361
365
|
import Provider from "./providers/BitkitProvider.js";
|
|
362
|
-
export { BitkitAccordion, BitkitActionBar, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogHeader, BitkitDialogRoot, BitkitDialogStep, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };
|
|
366
|
+
export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogHeader, BitkitDialogRoot, BitkitDialogStep, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "
|
|
1
|
+
declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
|
|
2
2
|
variant: {
|
|
3
3
|
[k: string]: {
|
|
4
4
|
indicator: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const datePickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "table" | "view" | "root" | "trigger" | "positioner" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "
|
|
1
|
+
declare const datePickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "table" | "view" | "root" | "trigger" | "positioner" | "valueText" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "months", {
|
|
2
2
|
layout: {
|
|
3
3
|
'1-month': {
|
|
4
4
|
content: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "
|
|
1
|
+
declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
|
|
2
2
|
colorScheme: {
|
|
3
3
|
white: {
|
|
4
4
|
root: {
|
|
@@ -21,8 +21,10 @@ var expandableCardSlotRecipe = defineSlotRecipe({
|
|
|
21
21
|
justifyContent: "space-between",
|
|
22
22
|
cursor: "pointer",
|
|
23
23
|
width: "100%",
|
|
24
|
+
color: "text/primary",
|
|
24
25
|
"&:active": { backgroundColor: "background/active" },
|
|
25
26
|
"&:hover:not(:active)": { backgroundColor: "background/hover" },
|
|
27
|
+
_hover: { color: "text/primary" },
|
|
26
28
|
_open: { backgroundColor: "background/secondary" }
|
|
27
29
|
},
|
|
28
30
|
collapsible: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n className: 'expandable-card',\n slots: [...cardAnatomy.keys(), 'collapsible', 'icon', 'secdText', 'suffix'],\n base: {\n root: {\n backgroundColor: 'background/primary',\n overflow: 'hidden',\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n width: '100%',\n '&:active': {\n backgroundColor: 'background/active',\n },\n '&:hover:not(:active)': {\n backgroundColor: 'background/hover',\n },\n _open: {\n backgroundColor: 'background/secondary',\n },\n },\n collapsible: {\n overflow: 'hidden',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n body: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n padding: '16',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\n color: 'text/secondary',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n size: {\n md: {\n header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n secdText: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n secdText: { textStyle: 'body/md/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,MAAM;EAAE;EAAe;EAAQ;EAAY;EAAS;CAC3E,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;GACX;EACD,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,YAAY,EACV,iBAAiB,qBAClB;GACD,wBAAwB,EACtB,iBAAiB,oBAClB;GACD,OAAO,EACL,iBAAiB,wBAClB;GACF;EACD,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;IACpB;GACD,SAAS;IACP,eAAe;IACf,mBAAmB;IACpB;GACF;EACD,MAAM;GACJ,WAAW;GACX,aAAa;GACb,SAAS;GACV;EACD,MAAM,EACJ,OAAO,kBACR;EACD,UAAU,EACR,OAAO,kBACR;EACD,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;GACZ;EACF;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;IAAM;GACxE,UAAU,EAAE,WAAW,mBAAmB;GAC3C;EACD,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;IAAM;GACvD,UAAU,EAAE,WAAW,mBAAmB;GAC3C;EACF,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n className: 'expandable-card',\n slots: [...cardAnatomy.keys(), 'collapsible', 'icon', 'secdText', 'suffix'],\n base: {\n root: {\n backgroundColor: 'background/primary',\n overflow: 'hidden',\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n width: '100%',\n color: 'text/primary',\n '&:active': {\n backgroundColor: 'background/active',\n },\n '&:hover:not(:active)': {\n backgroundColor: 'background/hover',\n },\n _hover: {\n color: 'text/primary',\n },\n _open: {\n backgroundColor: 'background/secondary',\n },\n },\n collapsible: {\n overflow: 'hidden',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n body: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n padding: '16',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\n color: 'text/secondary',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n size: {\n md: {\n header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n secdText: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n secdText: { textStyle: 'body/md/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,MAAM;EAAE;EAAe;EAAQ;EAAY;EAAS;CAC3E,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;GACX;EACD,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,qBAClB;GACD,wBAAwB,EACtB,iBAAiB,oBAClB;GACD,QAAQ,EACN,OAAO,gBACR;GACD,OAAO,EACL,iBAAiB,wBAClB;GACF;EACD,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;IACpB;GACD,SAAS;IACP,eAAe;IACf,mBAAmB;IACpB;GACF;EACD,MAAM;GACJ,WAAW;GACX,aAAa;GACb,SAAS;GACV;EACD,MAAM,EACJ,OAAO,kBACR;EACD,UAAU,EACR,OAAO,kBACR;EACD,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;GACZ;EACF;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;IAAM;GACxE,UAAU,EAAE,WAAW,mBAAmB;GAC3C;EACD,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;IAAM;GACvD,UAAU,EAAE,WAAW,mBAAmB;GAC3C;EACF,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const fileUploadSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "
|
|
1
|
+
declare const fileUploadSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "itemGroup" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText", {
|
|
2
2
|
variant: {
|
|
3
3
|
image: {
|
|
4
4
|
root: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const menuSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "item" | "itemIndicator" | "trigger" | "arrow" | "arrowTip" | "positioner" | "
|
|
1
|
+
declare const menuSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "item" | "itemIndicator" | "trigger" | "arrow" | "arrowTip" | "positioner" | "contextTrigger" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "triggerItem" | "itemCommand" | "itemHelper", {
|
|
2
2
|
size: {
|
|
3
3
|
lg: {
|
|
4
4
|
item: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const triggerSeparatorStyle: import('@chakra-ui/react').SystemStyleObject;
|
|
2
|
-
export declare const numberInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "
|
|
2
|
+
export declare const numberInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "valueText" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
|
|
3
3
|
size: {
|
|
4
4
|
md: {
|
|
5
5
|
input: import('@chakra-ui/react').SystemStyleObject | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const stepsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "progress" | "title" | "separator" | "list" | "root" | "item" | "trigger" | "
|
|
1
|
+
declare const stepsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "progress" | "title" | "separator" | "list" | "root" | "item" | "trigger" | "indicator" | "description" | "nextTrigger" | "prevTrigger", {
|
|
2
2
|
orientation: {
|
|
3
3
|
horizontal: {
|
|
4
4
|
list: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const tagsInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "
|
|
1
|
+
declare const tagsInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "itemText" | "clearTrigger" | "control" | "itemDeleteTrigger" | "itemPreview" | "tagsBlock" | "itemInput" | "suffixBlock", {
|
|
2
2
|
size: {
|
|
3
3
|
md: {
|
|
4
4
|
control: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const toastSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "icon" | "root" | "closeTrigger" | "
|
|
1
|
+
declare const toastSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "icon" | "root" | "closeTrigger" | "indicator" | "description" | "timestamp" | "actionTrigger", {
|
|
2
2
|
variant: {
|
|
3
3
|
[k: string]: {
|
|
4
4
|
icon: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "
|
|
1
|
+
declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "itemText" | "tree" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
|
|
2
2
|
variant: {
|
|
3
3
|
files: {
|
|
4
4
|
branchControl: {
|
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
# Bitkit v1 → v2 Migration Guide
|
|
2
|
+
|
|
3
|
+
Practical learnings from migrating a React frontend from `@bitrise/bitkit` (Chakra UI v2) to `@bitrise/bitkit-v2` (Chakra UI v3).
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Strategy: coexistence first, cutover last
|
|
8
|
+
|
|
9
|
+
Don't attempt a big-bang migration. Instead:
|
|
10
|
+
|
|
11
|
+
1. Install `@bitrise/bitkit-v2` alongside v1
|
|
12
|
+
2. Wrap `BitkitProvider` (v2) **inside** the existing v1 `<Provider>`. In practice, nesting them works without additional config.
|
|
13
|
+
3. Migrate file by file, component by component
|
|
14
|
+
4. Remove v1 `<Provider>` only when zero v1 imports remain
|
|
15
|
+
5. Remove `@bitrise/bitkit` from `package.json` last
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
// Transitional App.tsx
|
|
19
|
+
<Provider theme={customTheme}> {/* v1 — stays until all v1 imports gone */}
|
|
20
|
+
<BitkitProvider> {/* v2 */}
|
|
21
|
+
<App />
|
|
22
|
+
</BitkitProvider>
|
|
23
|
+
</Provider>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
> **Note on CSS conflicts**: If Chakra v3's preflight reset causes visual conflicts during coexistence, `BitkitProvider` can't help — it hardcodes its internal system with `preflight: true` and doesn't expose an override. The fallback is `ChakraProvider` with a custom system where `preflight: false`, but be aware that also drops Bitkit's bundled font imports and `BitkitToaster` — those would need to be re-added manually.
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Migration order
|
|
31
|
+
|
|
32
|
+
Migrate in this order to minimize blockers:
|
|
33
|
+
|
|
34
|
+
1. **Primitives**: `Box`, `Text`, `Divider` — these are used everywhere, get them out of the way first
|
|
35
|
+
2. **Atomic components**: `Button`, `Badge`, `Tag`, `Spinner`, `Toast`
|
|
36
|
+
3. **Form components**: `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`
|
|
37
|
+
4. **Layout & navigation**: `Sidebar`, `Breadcrumb`
|
|
38
|
+
5. **Composite components**: `Dialog`, `Tabs`, `Table`, `Card`, `Alert`
|
|
39
|
+
6. **Icons** (if migrating from `lucide-react` or similar)
|
|
40
|
+
7. **Dependency cleanup**: remove v1 and all now-unused peer deps
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Component mapping
|
|
45
|
+
|
|
46
|
+
### Primitives
|
|
47
|
+
|
|
48
|
+
| v1 | v2 |
|
|
49
|
+
|----|----|
|
|
50
|
+
| `Box` from `@bitrise/bitkit` | `Box` from `@chakra-ui/react/box` |
|
|
51
|
+
| `Text` from `@bitrise/bitkit` | `Text` from `@chakra-ui/react/text` |
|
|
52
|
+
| `Divider` | `Separator` from `@chakra-ui/react/separator` |
|
|
53
|
+
| `BoxProps`, `TextProps` | same, from `@chakra-ui/react/box` and `@chakra-ui/react/text` |
|
|
54
|
+
|
|
55
|
+
Chakra v2 → v3 prop changes on primitives:
|
|
56
|
+
- `noOfLines` → `lineClamp`
|
|
57
|
+
- `Box as="a" href="..."` doesn't work → use `chakra.a` from `@chakra-ui/react/styled-system`
|
|
58
|
+
- `Box as="button" onClick={...}` → use `chakra.button` from `@chakra-ui/react/styled-system`
|
|
59
|
+
|
|
60
|
+
### Buttons
|
|
61
|
+
|
|
62
|
+
| v1 | v2 |
|
|
63
|
+
|----|----|
|
|
64
|
+
| `Button` | `BitkitButton` |
|
|
65
|
+
| `IconButton` | `BitkitIconButton` |
|
|
66
|
+
| `leftIconName` | `icon` |
|
|
67
|
+
| `isDisabled` | `state="disabled"` |
|
|
68
|
+
| `isLoading` | `state="loading"` |
|
|
69
|
+
|
|
70
|
+
**Gotcha**: `BitkitButton` requires `children` to be a `string`. If a button contains complex layout (icon + text, conditional content, custom JSX), use `chakra.button` from `@chakra-ui/react/styled-system` instead of forcing it into `BitkitButton`.
|
|
71
|
+
|
|
72
|
+
### Badge / Tag
|
|
73
|
+
|
|
74
|
+
| v1 | v2 |
|
|
75
|
+
|----|----|
|
|
76
|
+
| `Badge colorScheme="positive"` | `BitkitBadge colorPalette="green"` |
|
|
77
|
+
| `Badge colorScheme="negative"` | `BitkitBadge colorPalette="red"` |
|
|
78
|
+
| `Badge colorScheme="warning"` | `BitkitBadge colorPalette="yellow"` |
|
|
79
|
+
| `Badge colorScheme="progress"` | `BitkitBadge colorPalette="purple"` |
|
|
80
|
+
| `Tag` | `BitkitTag` |
|
|
81
|
+
|
|
82
|
+
### Toast
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
// v1
|
|
86
|
+
const toast = useToast()
|
|
87
|
+
toast({ status: 'error', title: 'Oops', description: 'Something failed' })
|
|
88
|
+
|
|
89
|
+
// v2
|
|
90
|
+
createBitkitToast({ variant: 'critical', titleText: 'Oops', messageText: 'Something failed' })
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
`status` → `variant`, and `'error'` → `'critical'`. Note: `createBitkitToast` is called directly with props — it's not a factory that returns a function.
|
|
94
|
+
|
|
95
|
+
### Dialogs
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
// v1
|
|
99
|
+
<Dialog isOpen={open} onClose={() => setOpen(false)}>
|
|
100
|
+
<DialogBody>...</DialogBody>
|
|
101
|
+
<DialogFooter>...</DialogFooter>
|
|
102
|
+
</Dialog>
|
|
103
|
+
|
|
104
|
+
// v2
|
|
105
|
+
<BitkitDialog open={open} onOpenChange={({ open }) => setOpen(open)}>
|
|
106
|
+
<BitkitDialog.Body>...</BitkitDialog.Body>
|
|
107
|
+
<BitkitDialog.Footer>
|
|
108
|
+
<BitkitDialog.Buttons>...</BitkitDialog.Buttons>
|
|
109
|
+
</BitkitDialog.Footer>
|
|
110
|
+
</BitkitDialog>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Key changes: `isOpen` → `open`, `onClose` → `onOpenChange` (receives `{ open: boolean }`).
|
|
114
|
+
|
|
115
|
+
### Tabs
|
|
116
|
+
|
|
117
|
+
The API changed fundamentally — from index-based to value-based:
|
|
118
|
+
|
|
119
|
+
```tsx
|
|
120
|
+
// v1 (index-based)
|
|
121
|
+
<Tabs>
|
|
122
|
+
<TabList>
|
|
123
|
+
<Tab>First</Tab>
|
|
124
|
+
<Tab>Second</Tab>
|
|
125
|
+
</TabList>
|
|
126
|
+
<TabPanels>
|
|
127
|
+
<TabPanel>...</TabPanel>
|
|
128
|
+
<TabPanel>...</TabPanel>
|
|
129
|
+
</TabPanels>
|
|
130
|
+
</Tabs>
|
|
131
|
+
|
|
132
|
+
// v2 (value-based)
|
|
133
|
+
<BitkitTabs.Root defaultValue="first">
|
|
134
|
+
<BitkitTabs.List>
|
|
135
|
+
<BitkitTabs.Trigger value="first">First</BitkitTabs.Trigger>
|
|
136
|
+
<BitkitTabs.Trigger value="second">Second</BitkitTabs.Trigger>
|
|
137
|
+
</BitkitTabs.List>
|
|
138
|
+
<BitkitTabs.ContentGroup>
|
|
139
|
+
<BitkitTabs.Content value="first">...</BitkitTabs.Content>
|
|
140
|
+
<BitkitTabs.Content value="second">...</BitkitTabs.Content>
|
|
141
|
+
</BitkitTabs.ContentGroup>
|
|
142
|
+
</BitkitTabs.Root>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
This is one of the more involved migrations — every tab needs an explicit `value`.
|
|
146
|
+
|
|
147
|
+
### Table
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
// v1 — flat imports
|
|
151
|
+
import { Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@bitrise/bitkit'
|
|
152
|
+
|
|
153
|
+
// v2 — namespace
|
|
154
|
+
import { Table } from '@chakra-ui/react/table'
|
|
155
|
+
<Table.Root><Table.Header><Table.Row><Table.ColumnHeader>
|
|
156
|
+
<Table.Body><Table.Row><Table.Cell>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Forms
|
|
160
|
+
|
|
161
|
+
| v1 | v2 |
|
|
162
|
+
|----|----|
|
|
163
|
+
| `Input` | `BitkitTextInput` |
|
|
164
|
+
| `Textarea` | `BitkitTextArea` |
|
|
165
|
+
| `Select` | `BitkitNativeSelect` |
|
|
166
|
+
| `Checkbox` | `BitkitCheckbox` |
|
|
167
|
+
| `Toggle` (`Switch` in v1) | `BitkitSwitch` |
|
|
168
|
+
| `SearchInput` | `BitkitSearchInput` |
|
|
169
|
+
|
|
170
|
+
For password fields with an eye-toggle: use `BitkitField` + Chakra v3 `InputGroup` with `endElement`.
|
|
171
|
+
|
|
172
|
+
### Cards
|
|
173
|
+
|
|
174
|
+
| v1 | v2 |
|
|
175
|
+
|----|----|
|
|
176
|
+
| `Card` | `BitkitCard` |
|
|
177
|
+
| `ExpandableCard` | `BitkitExpandableCard` |
|
|
178
|
+
|
|
179
|
+
`BitkitCard` accepts `paddingSize` and `elevation` (boolean). Common `BitkitExpandableCard` props: `title`, `secdText`, `size`; use `defaultExpanded` for uncontrolled or `expanded`/`onChange` for controlled usage. It also supports `icon`, `suffix`, and other options — see the component API for the full list.
|
|
180
|
+
|
|
181
|
+
If your codebase has a local `card.tsx` wrapper around v1 Card (e.g. Shadcn-style `CardHeader`, `CardContent` etc.), remove the wrapper entirely and migrate to `BitkitCard` directly — keeping the wrapper layer just adds indirection you'll need to unwind later.
|
|
182
|
+
|
|
183
|
+
### Notifications / Alert
|
|
184
|
+
|
|
185
|
+
| v1 | v2 |
|
|
186
|
+
|----|----|
|
|
187
|
+
| `Notification` | `BitkitAlert` |
|
|
188
|
+
|
|
189
|
+
### Sidebar & Breadcrumb
|
|
190
|
+
|
|
191
|
+
```tsx
|
|
192
|
+
// Sidebar v2
|
|
193
|
+
<BitkitSidebar>
|
|
194
|
+
<BitkitSidebar.Title>Title</BitkitSidebar.Title>
|
|
195
|
+
<BitkitSidebar.GroupHeading>Group</BitkitSidebar.GroupHeading>
|
|
196
|
+
<BitkitSidebar.Item icon={IconName} selected={...}>Label</BitkitSidebar.Item>
|
|
197
|
+
</BitkitSidebar>
|
|
198
|
+
|
|
199
|
+
// Breadcrumb v2
|
|
200
|
+
<BitkitBreadcrumb>
|
|
201
|
+
<BitkitBreadcrumb.Item href="#/path">Label</BitkitBreadcrumb.Item>
|
|
202
|
+
<BitkitBreadcrumb.CurrentItem>Current</BitkitBreadcrumb.CurrentItem>
|
|
203
|
+
</BitkitBreadcrumb>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
**HashRouter gotcha**: `BitkitBreadcrumb` uses plain `href`. With HashRouter all links need the `#/` prefix (e.g. `href="#/sessions"`), otherwise navigation breaks silently.
|
|
207
|
+
|
|
208
|
+
**Version requirement**: `BitkitBreadcrumb` requires `@bitrise/bitkit-v2 >= 0.3.210`.
|
|
209
|
+
|
|
210
|
+
### textStyle tokens
|
|
211
|
+
|
|
212
|
+
Replace explicit `fontSize` / `fontWeight` / `lineHeight` props on `<Text>` with `textStyle` tokens:
|
|
213
|
+
|
|
214
|
+
```tsx
|
|
215
|
+
// Before
|
|
216
|
+
<Text fontSize="14px" fontWeight="600" lineHeight="20px">...</Text>
|
|
217
|
+
|
|
218
|
+
// After
|
|
219
|
+
<Text textStyle="body/md/semibold">...</Text>
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
Common tokens: `body/sm/regular`, `body/md/regular`, `body/md/semibold`, `body/lg/semibold`, `heading/h3` … `heading/h1`. Do this alongside the component migration per file — don't leave it for a separate pass at the end, it accumulates quickly.
|
|
223
|
+
|
|
224
|
+
---
|
|
225
|
+
|
|
226
|
+
## Action menus
|
|
227
|
+
|
|
228
|
+
If the codebase has a hand-rolled dropdown/action menu (state + ref + `useEffect` for click-outside), replace it with `BitkitActionMenu`:
|
|
229
|
+
|
|
230
|
+
```tsx
|
|
231
|
+
<BitkitActionMenu.Root trigger={<button>...</button>}>
|
|
232
|
+
<BitkitActionMenu.Item onClick={...}>Edit</BitkitActionMenu.Item>
|
|
233
|
+
<BitkitActionMenu.Separator />
|
|
234
|
+
<BitkitActionMenu.Item onClick={...} danger>Delete</BitkitActionMenu.Item>
|
|
235
|
+
</BitkitActionMenu.Root>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
## Color tokens: `text/*` vs `icon/*`
|
|
241
|
+
|
|
242
|
+
Use `text/*` tokens on `<Text>` (and other text elements), and `icon/*` tokens on `<Icon*>` components. Most pairs resolve to the same underlying color, so a mismatch won't be visible — but the semantics matter.
|
|
243
|
+
|
|
244
|
+
| `text/*` token | `icon/*` equivalent | Same color? |
|
|
245
|
+
|---|---|---|
|
|
246
|
+
| `text/secondary` | `icon/secondary` | ✓ |
|
|
247
|
+
| `text/tertiary` | `icon/tertiary` | ✓ |
|
|
248
|
+
| `text/link` | `icon/interactive` | ✓ (both → `sys.interactive`) |
|
|
249
|
+
|
|
250
|
+
**Gotcha**: `icon/link` does **not** exist. Use `icon/interactive` instead — it resolves to the same `sys.interactive` color as `text/link`.
|
|
251
|
+
|
|
252
|
+
---
|
|
253
|
+
|
|
254
|
+
## Dependency cleanup
|
|
255
|
+
|
|
256
|
+
After the migration, audit `package.json` carefully — v1 pulled in transitive deps that may still be listed:
|
|
257
|
+
|
|
258
|
+
- `@emotion/react` — you may no longer need to list it directly in your app's `package.json`; `@bitrise/bitkit-v2` brings it transitively
|
|
259
|
+
- `lucide-react` — if icons are now from `@bitrise/bitkit-v2`
|
|
260
|
+
- `zustand` — if Bitkit's sidebar hook was the only consumer
|
|
261
|
+
- `@types/luxon`, `patch-package`, `postcss` — check if still used
|
|
262
|
+
|
|
263
|
+
Also check `scripts` in `package.json` for any `postinstall` entries referencing removed packages (e.g. `"postinstall": "patch-package"`) — these will silently break CI.
|
|
264
|
+
|
|
265
|
+
---
|
|
266
|
+
|
|
267
|
+
## Working efficiently (token / context budget)
|
|
268
|
+
|
|
269
|
+
Migrating a large repo component-by-component is token-intensive. What works well:
|
|
270
|
+
|
|
271
|
+
- **Grep first, cheap**: `grep -r "@bitrise/bitkit" src --include="*.tsx" -l` gives you the full scope before touching anything
|
|
272
|
+
- **You navigate, AI executes**: identify the interesting/complex files yourself, hand them over one at a time. Avoid "replace all X with Y across the entire repo" — it requires reading every file even for trivial changes
|
|
273
|
+
- **Codemods for mechanical swaps**: simple renames across many files (`Box` → `chakra.Box`, import path changes) are better done with `sed` or a codemod script; use AI for the cases that need judgment
|
|
274
|
+
- **Identify custom components early**: look for any local wrappers around v1 components or hand-rolled alternatives to v2 components (dropdowns, cards, dialogs). Plan to replace these, not wrap them again
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
## Pre-migration checklist
|
|
279
|
+
|
|
280
|
+
- [ ] `grep -r "@bitrise/bitkit" src` — inventory of files and components
|
|
281
|
+
- [ ] Identify local wrapper components around v1 Bitkit components
|
|
282
|
+
- [ ] Identify hand-rolled alternatives to v2 components (dropdowns, modals, etc.)
|
|
283
|
+
- [ ] Check `@bitrise/bitkit-v2` changelog for version requirements per component
|
|
284
|
+
- [ ] Check if HashRouter is in use (affects Breadcrumb `href`)
|
|
285
|
+
- [ ] Note any buttons with complex children (non-string) — these need `chakra.button`
|
|
286
|
+
|
|
287
|
+
## Post-migration checklist
|
|
288
|
+
|
|
289
|
+
- [ ] Zero `@bitrise/bitkit` imports in source
|
|
290
|
+
- [ ] `npm run build` passes
|
|
291
|
+
- [ ] `npm run lint` clean
|
|
292
|
+
- [ ] Remove `@bitrise/bitkit` from `package.json`
|
|
293
|
+
- [ ] Remove transitively-pulled peer deps that are no longer needed
|
|
294
|
+
- [ ] Check all `scripts` entries in `package.json` for references to removed packages
|
|
295
|
+
- [ ] Visual walkthrough: all pages, dialogs, tabs, forms, toasts, tables
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bitrise/bitkit-v2",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.211",
|
|
5
5
|
"description": "Bitrise Design System Components built with Chakra UI V3",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react",
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"type": "module",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist",
|
|
16
|
+
"docs",
|
|
16
17
|
"scripts/postinstall.cjs",
|
|
17
18
|
"README.md",
|
|
18
19
|
"package.json"
|