@bitrise/bitkit-v2 0.3.218 → 0.3.219
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/AGENTS.md +23 -1
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.d.ts +5 -2
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js +3 -1
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js.map +1 -1
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.d.ts +8 -6
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js +24 -13
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js.map +1 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.d.ts +3 -2
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js +2 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js.map +1 -1
- package/dist/components/BitkitSteps/BitkitSteps.d.ts +2 -1
- package/dist/components/BitkitSteps/BitkitSteps.js +2 -1
- package/dist/components/BitkitSteps/BitkitSteps.js.map +1 -1
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -104,7 +104,29 @@ Bitkit components use consistent prop names across the library:
|
|
|
104
104
|
- **Omit default prop values** — `<IconCross />`, not `<IconCross size="24" />` when 24 is the default.
|
|
105
105
|
- **No shorthand props** — use full names: `marginInline`, `paddingBlockEnd`, `width`, `background`, `padding`. Never `mx`, `pb`, `w`, `bg`, `p`, `mt`.
|
|
106
106
|
- **Prefer logical over physical properties** — `marginInline`, `paddingBlock`, `insetInlineStart` over `marginLeft`/`marginRight`, `paddingTop`/`paddingBottom`, `left`.
|
|
107
|
-
- **
|
|
107
|
+
- **Never wrap a Bitkit component in `<Box>` for styling** — most Bitkit components accept Chakra style props (`width`, `flex`, `flexShrink`, `marginInline`, `padding`, `display`, etc.) directly on themselves. Set them on the component, never on a wrapper:
|
|
108
|
+
```tsx
|
|
109
|
+
// Bad — pointless wrapper
|
|
110
|
+
<Box width="128" flexShrink="0">
|
|
111
|
+
<BitkitTextInput ... />
|
|
112
|
+
</Box>
|
|
113
|
+
|
|
114
|
+
// Good — props on the component itself
|
|
115
|
+
<BitkitTextInput width="128" flexShrink="0" ... />
|
|
116
|
+
```
|
|
117
|
+
This holds for form fields (`BitkitTextInput`, `BitkitSelect`, `BitkitNativeSelect`, `BitkitCombobox`, etc.), buttons (`BitkitButton`, `BitkitIconButton`, etc.), and most other components — they all forward Chakra style props through to the rendered root element.
|
|
118
|
+
|
|
119
|
+
**Exceptions** — a few component groups intentionally own their own layout and don't accept arbitrary style props from outside:
|
|
120
|
+
- Page-level overlays: `BitkitDialog`, `BitkitDrawer`, `BitkitCalendar` — use the component's own sizing API (`size`, `maxHeight`, etc.).
|
|
121
|
+
- Floating positioned components: `BitkitTooltip`, `BitkitLabelTooltip`, `BitkitDefinitionTooltip`, `BitkitOverflowTooltip`, `BitkitToast`, `BitkitSelectMenu`, `BitkitMultiselectMenu` — their layout is positioned automatically; pass styling via the component's own props instead of a wrapper.
|
|
122
|
+
|
|
123
|
+
> **For everything else, if a style prop doesn't take effect on a Bitkit component, that's a bug in the component, not a styling task.** Stop, tell the user something looks off in Bitkit so they can flag it to the Bitkit team — don't quietly add a `<Box>` workaround. Each silent workaround hides a regression and bakes the wrapper pattern into the codebase.
|
|
124
|
+
|
|
125
|
+
Use `<Box>` only when:
|
|
126
|
+
- The wrapper holds multiple children that need a layout container (flex/grid parent for several siblings)
|
|
127
|
+
- You need a wrapper element for purely structural reasons (CSS Grid placement, sibling selectors, etc.)
|
|
128
|
+
|
|
129
|
+
For grouping a single child or a few siblings without styling, use a fragment (`<>...</>`).
|
|
108
130
|
- **Use `Text` for text content, not `Box`** — when rendering string content, use `<Text>` from `@chakra-ui/react/text`. Choose semantic tag via `as`: `<Text as="strong">`, `<Text as="span">`, `<Text as="label">`, plain `<Text>` for paragraphs.
|
|
109
131
|
- **Import from Chakra subpaths** — `import { Button } from '@chakra-ui/react/button'`, not `from '@chakra-ui/react'`.
|
|
110
132
|
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
+
import { Breadcrumb, BreadcrumbRootProps } from '@chakra-ui/react/breadcrumb';
|
|
1
2
|
import { ReactElement } from 'react';
|
|
2
3
|
import { CurrentItemProps } from './components/BreadcrumbCurrentItem.tsx';
|
|
3
4
|
import { OverflowMenuProps } from './components/OverflowMenu.tsx';
|
|
4
5
|
import { ItemProps } from './types.ts';
|
|
5
6
|
type BitkitBreadcrumbChild = ReactElement<ItemProps> | ReactElement<CurrentItemProps> | ReactElement<OverflowMenuProps>;
|
|
6
|
-
export type BitkitBreadcrumbProps = {
|
|
7
|
+
export type BitkitBreadcrumbProps = Omit<BreadcrumbRootProps, 'children'> & {
|
|
7
8
|
children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];
|
|
8
9
|
};
|
|
9
|
-
declare const BitkitBreadcrumb: import('react').ForwardRefExoticComponent<
|
|
10
|
+
declare const BitkitBreadcrumb: import('react').ForwardRefExoticComponent<Omit<Breadcrumb.RootProps, "children"> & {
|
|
11
|
+
children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];
|
|
12
|
+
} & import('react').RefAttributes<HTMLElement>> & {
|
|
10
13
|
CurrentItem: import('react').ForwardRefExoticComponent<CurrentItemProps & import('react').RefAttributes<HTMLElement>>;
|
|
11
14
|
Item: import('react').ForwardRefExoticComponent<ItemProps & import('react').RefAttributes<HTMLAnchorElement>>;
|
|
12
15
|
OverflowMenu: {
|
|
@@ -33,7 +33,7 @@ var flattenItemProps = (elements) => {
|
|
|
33
33
|
}
|
|
34
34
|
return props;
|
|
35
35
|
};
|
|
36
|
-
var BitkitBreadcrumbRoot = forwardRef(({ children }, ref) => {
|
|
36
|
+
var BitkitBreadcrumbRoot = forwardRef(({ children, ...rest }, ref) => {
|
|
37
37
|
const isMobile = useBreakpointValue({
|
|
38
38
|
base: true,
|
|
39
39
|
tablet: false
|
|
@@ -47,6 +47,7 @@ var BitkitBreadcrumbRoot = forwardRef(({ children }, ref) => {
|
|
|
47
47
|
const overflowLinks = links.slice(0, -1).reverse();
|
|
48
48
|
return /* @__PURE__ */ jsx(Breadcrumb.Root, {
|
|
49
49
|
ref,
|
|
50
|
+
...rest,
|
|
50
51
|
children: /* @__PURE__ */ jsxs(Breadcrumb.List, { children: [
|
|
51
52
|
/* @__PURE__ */ jsxs(Show, {
|
|
52
53
|
when: overflowLinks.length > 0,
|
|
@@ -69,6 +70,7 @@ var BitkitBreadcrumbRoot = forwardRef(({ children }, ref) => {
|
|
|
69
70
|
}
|
|
70
71
|
return /* @__PURE__ */ jsx(Breadcrumb.Root, {
|
|
71
72
|
ref,
|
|
73
|
+
...rest,
|
|
72
74
|
children: /* @__PURE__ */ jsx(Breadcrumb.List, { children: childArray.map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [child, /* @__PURE__ */ jsx(Show, {
|
|
73
75
|
when: index < childArray.length - 1,
|
|
74
76
|
children: /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
|
|
@@ -1 +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,CAAC;CAE5B,KAAK,MAAM,SAAS,UAClB,IAAI,MAAM,SAAS,gBAAgB;EACjC,MAAM,EAAE,MAAM,aAAa,MAAM;EACjC,MAAM,KAAK;GAAE;GAAM;EAAS,CAAC;CAC/B,OAAO,IAAI,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,SAAS,QAAQ,YAAY,EAAE,OAAO,cAAc;EAC3E,KAAK,MAAM,aAAa,gBACtB,IAAI,UAAU,SAAS,kBAAkB;GACvC,MAAM,EAAE,MAAM,aAAa,UAAU;GACrC,MAAM,KAAK;IAAE;IAAM;GAAS,CAAC;EAC/B;CAEJ;CAGF,OAAO;AACT;AAEA,IAAM,uBAAuB,YAAgD,EAAE,
|
|
1
|
+
{"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb, type BreadcrumbRootProps } 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 = Omit<BreadcrumbRootProps, 'children'> & {\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, ...rest }, 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} {...rest}>\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} {...rest}>\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,CAAC;CAE5B,KAAK,MAAM,SAAS,UAClB,IAAI,MAAM,SAAS,gBAAgB;EACjC,MAAM,EAAE,MAAM,aAAa,MAAM;EACjC,MAAM,KAAK;GAAE;GAAM;EAAS,CAAC;CAC/B,OAAO,IAAI,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,SAAS,QAAQ,YAAY,EAAE,OAAO,cAAc;EAC3E,KAAK,MAAM,aAAa,gBACtB,IAAI,UAAU,SAAS,kBAAkB;GACvC,MAAM,EAAE,MAAM,aAAa,UAAU;GACrC,MAAM,KAAK;IAAE;IAAM;GAAS,CAAC;EAC/B;CAEJ;CAGF,OAAO;AACT;AAEA,IAAM,uBAAuB,YAAgD,EAAE,UAAU,GAAG,QAAQ,QAAQ;CAC1G,MAAM,WAAW,mBAAmB;EAAE,MAAM;EAAM,QAAQ;CAAM,GAAG,EAAE,UAAU,SAAS,CAAC;CACzF,MAAM,aAAa,SAAS,QAAQ,QAAQ,EAAE,OAAO,cAAc;CAEnE,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,IAAI,UAAU;EACZ,MAAM,QAAQ,iBAAiB,UAAU;EACzC,IAAI,MAAM,WAAW,GACnB,OAAO;EAGT,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,gBAAgB,MAAM,MAAM,GAAG,EAAE,EAAE,QAAQ;EAEjD,OACE,oBAAC,WAAW,MAAZ;GAAsB;GAAK,GAAI;aAC7B,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;KAAM,CAAA,EAChE,CAAA,GACpB,cAAc,KAAK,SAClB,oBAAC,kBAAD;MAAkC,MAAM,KAAK;gBAC1C,KAAK;KACU,GAFK,KAAK,IAEV,CACnB,CACW,EAAA,CAAA,GACd,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA,CAClB;;IACN,oBAAC,gBAAD;KAAgB,MAAM,SAAS;eAAO,SAAS;IAAyB,CAAA;IACxE,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;GACP,EAAA,CAAA;EACF,CAAA;CAErB;CAEA,OACE,oBAAC,WAAW,MAAZ;EAAsB;EAAK,GAAI;YAC7B,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,CAAmB,CAAA,EACC,CAAA;EAClB,CAAA,CACE,EAAA,GAPK,MAAM,GAOX,CACX,EACc,CAAA;CACF,CAAA;AAErB,CAAC;AAED,qBAAqB,cAAc;AAEnC,IAAM,mBAAmB,OAAO,OAAO,sBAAsB;CAC3D,aAAa;CACb,MAAM;CACN;CACA;AACF,CAAC"}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
|
|
2
|
+
interface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {
|
|
2
3
|
children: string;
|
|
3
|
-
size?: 'md' | 'lg';
|
|
4
|
-
textToCopy?: string;
|
|
5
|
-
}
|
|
6
|
-
interface InlineProps extends BaseProps {
|
|
7
4
|
interactive?: boolean;
|
|
5
|
+
size?: 'md' | 'lg';
|
|
8
6
|
startingHeight?: never;
|
|
7
|
+
textToCopy?: string;
|
|
9
8
|
variant: 'inline';
|
|
10
9
|
}
|
|
11
|
-
interface BlockProps extends
|
|
10
|
+
interface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {
|
|
11
|
+
children: string;
|
|
12
12
|
interactive?: never;
|
|
13
|
+
size?: 'md' | 'lg';
|
|
13
14
|
startingHeight?: number;
|
|
15
|
+
textToCopy?: string;
|
|
14
16
|
variant: 'multi' | 'single';
|
|
15
17
|
}
|
|
16
18
|
export type BitkitCodeSnippetProps = InlineProps | BlockProps;
|
|
@@ -9,19 +9,18 @@ import { useClipboard } from "@ark-ui/react/clipboard";
|
|
|
9
9
|
//#region lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx
|
|
10
10
|
var COPY_TOOLTIP = "Copy to clipboard";
|
|
11
11
|
var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
12
|
-
const
|
|
13
|
-
const hasShowMore = startingHeight !== void 0;
|
|
12
|
+
const hasShowMore = props.startingHeight !== void 0;
|
|
14
13
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
15
14
|
const { copied, copy } = useClipboard({
|
|
16
15
|
timeout: 2e3,
|
|
17
|
-
value: textToCopy ?? children
|
|
16
|
+
value: props.textToCopy ?? props.children
|
|
18
17
|
});
|
|
19
18
|
const styles = useSlotRecipe({ key: "codeSnippet" })({
|
|
20
|
-
size,
|
|
21
|
-
variant,
|
|
22
19
|
hasShowMore,
|
|
20
|
+
interactive: props.interactive,
|
|
23
21
|
isExpanded,
|
|
24
|
-
|
|
22
|
+
size: props.size ?? "lg",
|
|
23
|
+
variant: props.variant
|
|
25
24
|
});
|
|
26
25
|
const handleToggleExpand = () => {
|
|
27
26
|
setIsExpanded((prev) => !prev);
|
|
@@ -39,28 +38,39 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
39
38
|
type: "button",
|
|
40
39
|
children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: "16" }) : /* @__PURE__ */ jsx(IconCopy, { size: "16" })
|
|
41
40
|
});
|
|
42
|
-
if (variant === "inline") {
|
|
41
|
+
if (props.variant === "inline") {
|
|
42
|
+
const { children, interactive, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;
|
|
43
43
|
if (!interactive) return /* @__PURE__ */ jsx(chakra.code, {
|
|
44
44
|
ref,
|
|
45
|
-
|
|
45
|
+
...rest,
|
|
46
|
+
css: [styles.root, rest.css],
|
|
46
47
|
children
|
|
47
48
|
});
|
|
48
49
|
return /* @__PURE__ */ jsx(BitkitTooltip, {
|
|
49
50
|
text: COPY_TOOLTIP,
|
|
50
51
|
children: /* @__PURE__ */ jsx(chakra.code, {
|
|
51
52
|
ref,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
...rest,
|
|
54
|
+
css: [styles.root, rest.css],
|
|
55
|
+
onClick: (e) => {
|
|
56
|
+
rest.onClick?.(e);
|
|
57
|
+
if (!e.defaultPrevented) copy();
|
|
58
|
+
},
|
|
59
|
+
onKeyDown: (e) => {
|
|
60
|
+
rest.onKeyDown?.(e);
|
|
61
|
+
if (!e.defaultPrevented) handleKeyDown(e);
|
|
62
|
+
},
|
|
55
63
|
role: "button",
|
|
56
64
|
tabIndex: 0,
|
|
57
65
|
children
|
|
58
66
|
})
|
|
59
67
|
});
|
|
60
68
|
}
|
|
69
|
+
const { children, size: _size, startingHeight, textToCopy: _textToCopy, variant, ...rest } = props;
|
|
61
70
|
if (variant === "single") return /* @__PURE__ */ jsxs(chakra.div, {
|
|
62
71
|
ref,
|
|
63
|
-
|
|
72
|
+
...rest,
|
|
73
|
+
css: [styles.root, rest.css],
|
|
64
74
|
children: [/* @__PURE__ */ jsx(chakra.code, {
|
|
65
75
|
css: styles.content,
|
|
66
76
|
tabIndex: -1,
|
|
@@ -73,7 +83,8 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
73
83
|
const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : void 0;
|
|
74
84
|
return /* @__PURE__ */ jsxs(chakra.div, {
|
|
75
85
|
ref,
|
|
76
|
-
|
|
86
|
+
...rest,
|
|
87
|
+
css: [styles.root, rest.css],
|
|
77
88
|
children: [
|
|
78
89
|
/* @__PURE__ */ jsx(chakra.code, {
|
|
79
90
|
css: styles.content,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface
|
|
1
|
+
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n children: string;\n interactive?: boolean;\n size?: 'md' | 'lg';\n startingHeight?: never;\n textToCopy?: string;\n variant: 'inline';\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n children: string;\n interactive?: never;\n size?: 'md' | 'lg';\n startingHeight?: number;\n textToCopy?: string;\n variant: 'multi' | 'single';\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | BlockProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const hasShowMore = props.startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy } = useClipboard({ timeout: 2000, value: props.textToCopy ?? props.children });\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({\n hasShowMore,\n interactive: props.interactive,\n isExpanded,\n size: props.size ?? 'lg',\n variant: props.variant,\n });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n copy();\n }\n };\n\n const copyButton = (\n <chakra.button aria-label={COPY_TOOLTIP} css={styles.copyButton} onClick={copy} type=\"button\">\n {copied ? <IconCheck size=\"16\" /> : <IconCopy size=\"16\" />}\n </chakra.button>\n );\n\n if (props.variant === 'inline') {\n const { children, interactive, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;\n\n if (!interactive) {\n return (\n <chakra.code ref={ref} {...rest} css={[styles.root, rest.css]}>\n {children}\n </chakra.code>\n );\n }\n\n return (\n <BitkitTooltip text={COPY_TOOLTIP}>\n <chakra.code\n ref={ref}\n {...rest}\n css={[styles.root, rest.css]}\n onClick={(e) => {\n rest.onClick?.(e);\n if (!e.defaultPrevented) copy();\n }}\n onKeyDown={(e) => {\n rest.onKeyDown?.(e);\n if (!e.defaultPrevented) handleKeyDown(e);\n }}\n role=\"button\"\n tabIndex={0}\n >\n {children}\n </chakra.code>\n </BitkitTooltip>\n );\n }\n\n const { children, size: _size, startingHeight, textToCopy: _textToCopy, variant, ...rest } = props;\n\n if (variant === 'single') {\n return (\n <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n <chakra.code css={styles.content} tabIndex={-1}>\n {children}\n </chakra.code>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n </chakra.div>\n );\n }\n\n const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : undefined;\n\n return (\n <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n {children}\n </chakra.code>\n <chakra.div css={styles.copyButtonWrapper}>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n </chakra.div>\n {hasShowMore && (\n <chakra.div css={styles.showMoreContainer}>\n {!isExpanded && <chakra.div css={styles.showMoreGradient} />}\n <chakra.button onClick={handleToggleExpand} css={styles.showMoreButton}>\n {isExpanded ? 'Show less' : 'Show more'}\n <AssetSelectChevron data-state={isExpanded ? 'open' : 'closed'} height=\"16\" width=\"16\" />\n </chakra.button>\n </chakra.div>\n )}\n </chakra.div>\n );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":";;;;;;;;;AAQA,IAAM,eAAe;AAsBrB,IAAM,oBAAoB,YAAiD,OAAO,QAAQ;CACxF,MAAM,cAAc,MAAM,mBAAmB,KAAA;CAC7C,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,EAAE,QAAQ,SAAS,aAAa;EAAE,SAAS;EAAM,OAAO,MAAM,cAAc,MAAM;CAAS,CAAC;CAGlG,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,EAAO;EACpB;EACA,aAAa,MAAM;EACnB;EACA,MAAM,MAAM,QAAQ;EACpB,SAAS,MAAM;CACjB,CAAC;CAED,MAAM,2BAA2B;EAC/B,eAAe,SAAS,CAAC,IAAI;CAC/B;CAEA,MAAM,iBAAiB,MAAkC;EACvD,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACtC,EAAE,eAAe;GACjB,KAAK;EACP;CACF;CAEA,MAAM,aACJ,oBAAC,OAAO,QAAR;EAAe,cAAY;EAAc,KAAK,OAAO;EAAY,SAAS;EAAM,MAAK;YAClF,SAAS,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA,IAAI,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAC5C,CAAA;CAGjB,IAAI,MAAM,YAAY,UAAU;EAC9B,MAAM,EAAE,UAAU,aAAa,MAAM,OAAO,YAAY,aAAa,SAAS,UAAU,GAAG,SAAS;EAEpG,IAAI,CAAC,aACH,OACE,oBAAC,OAAO,MAAR;GAAkB;GAAK,GAAI;GAAM,KAAK,CAAC,OAAO,MAAM,KAAK,GAAG;GACzD;EACU,CAAA;EAIjB,OACE,oBAAC,eAAD;GAAe,MAAM;aACnB,oBAAC,OAAO,MAAR;IACO;IACL,GAAI;IACJ,KAAK,CAAC,OAAO,MAAM,KAAK,GAAG;IAC3B,UAAU,MAAM;KACd,KAAK,UAAU,CAAC;KAChB,IAAI,CAAC,EAAE,kBAAkB,KAAK;IAChC;IACA,YAAY,MAAM;KAChB,KAAK,YAAY,CAAC;KAClB,IAAI,CAAC,EAAE,kBAAkB,cAAc,CAAC;IAC1C;IACA,MAAK;IACL,UAAU;IAET;GACU,CAAA;EACA,CAAA;CAEnB;CAEA,MAAM,EAAE,UAAU,MAAM,OAAO,gBAAgB,YAAY,aAAa,SAAS,GAAG,SAAS;CAE7F,IAAI,YAAY,UACd,OACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,GAAI;EAAM,KAAK,CAAC,OAAO,MAAM,KAAK,GAAG;YAA3D,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAS,UAAU;GACzC;EACU,CAAA,GACb,oBAAC,eAAD;GAAe,MAAM;aAAe;EAA0B,CAAA,CACpD;;CAIhB,MAAM,mBAAmB,eAAe,CAAC,aAAa,iBAAiB,KAAA;CAEvE,OACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,GAAI;EAAM,KAAK,CAAC,OAAO,MAAM,KAAK,GAAG;YAA3D;GACE,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAS,WAAW;IAAkB,UAAU;IACtE;GACU,CAAA;GACb,oBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cACtB,oBAAC,eAAD;KAAe,MAAM;eAAe;IAA0B,CAAA;GACpD,CAAA;GACX,eACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB,CACG,CAAC,cAAc,oBAAC,OAAO,KAAR,EAAY,KAAK,OAAO,iBAAmB,CAAA,GAC3D,qBAAC,OAAO,QAAR;KAAe,SAAS;KAAoB,KAAK,OAAO;eAAxD,CACG,aAAa,cAAc,aAC5B,oBAAC,oBAAD;MAAoB,cAAY,aAAa,SAAS;MAAU,QAAO;MAAK,OAAM;KAAM,CAAA,CAC3E;MACL;;EAEJ;;AAEhB,CAAC;AAED,kBAAkB,cAAc"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
+
import { GroupProps } from '@chakra-ui/react/group';
|
|
1
2
|
import { PropsWithChildren, ReactNode } from 'react';
|
|
2
3
|
import { BitkitButtonProps } from '../BitkitButton/BitkitButton';
|
|
3
4
|
type Size = 'lg' | 'md' | 'sm';
|
|
4
5
|
type Variant = 'primary' | 'secondary';
|
|
5
6
|
type State = 'disabled' | 'loading' | 'skeleton';
|
|
6
7
|
type BitkitSplitButtonActionProps = Omit<BitkitButtonProps, 'size' | 'variant' | 'state'>;
|
|
7
|
-
export type BitkitSplitButtonProps = PropsWithChildren<{
|
|
8
|
+
export type BitkitSplitButtonProps = PropsWithChildren<Omit<GroupProps, 'attached' | 'children' | 'display'> & {
|
|
8
9
|
size?: Size;
|
|
9
10
|
variant?: Variant;
|
|
10
11
|
state?: State;
|
|
11
12
|
}>;
|
|
12
|
-
declare const _default: import('react').ForwardRefExoticComponent<{
|
|
13
|
+
declare const _default: import('react').ForwardRefExoticComponent<Omit<GroupProps, "display" | "children" | "attached"> & {
|
|
13
14
|
size?: Size;
|
|
14
15
|
variant?: Variant;
|
|
15
16
|
state?: State;
|
|
@@ -33,7 +33,7 @@ var BitkitSplitButtonAction = forwardRef((props, ref) => {
|
|
|
33
33
|
});
|
|
34
34
|
BitkitSplitButtonAction.displayName = "BitkitSplitButtonAction";
|
|
35
35
|
var BitkitSplitButton = forwardRef((props, ref) => {
|
|
36
|
-
const { children, size = "lg", state, variant = "primary" } = props;
|
|
36
|
+
const { children, size = "lg", state, variant = "primary", ...rest } = props;
|
|
37
37
|
const childArray = Children.toArray(children);
|
|
38
38
|
const actionChild = childArray.find(isValidActionItem);
|
|
39
39
|
const menuItems = childArray.filter(isValidMenuItem);
|
|
@@ -51,6 +51,7 @@ var BitkitSplitButton = forwardRef((props, ref) => {
|
|
|
51
51
|
loading: state === "skeleton",
|
|
52
52
|
children: /* @__PURE__ */ jsxs(Group, {
|
|
53
53
|
ref,
|
|
54
|
+
...rest,
|
|
54
55
|
attached: true,
|
|
55
56
|
display: "inline-flex",
|
|
56
57
|
children: [actionChild, /* @__PURE__ */ jsx(BitkitActionMenu.Root, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSplitButton.js","names":[],"sources":["../../../lib/components/BitkitSplitButton/BitkitSplitButton.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Group } from '@chakra-ui/react/group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, forwardRef, isValidElement, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitButton, { type BitkitButtonProps } from '../BitkitButton/BitkitButton';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\n\ntype Size = 'lg' | 'md' | 'sm';\ntype Variant = 'primary' | 'secondary';\ntype State = 'disabled' | 'loading' | 'skeleton';\n\nconst isValidActionItem = (child: ReactNode): child is ReactElement => {\n return isValidElement(child) && child.type === BitkitSplitButtonAction;\n};\n\nconst isValidMenuItem = (child: ReactNode): child is ReactElement => {\n return (\n isValidElement(child) &&\n (child.type === BitkitActionMenu.Group ||\n child.type === BitkitActionMenu.Item ||\n child.type === BitkitActionMenu.Separator)\n );\n};\n\n// --- Context ---\ninterface SplitButtonContext {\n size: Size;\n variant: Variant;\n state: State | undefined;\n styles: Record<string, SystemStyleObject>;\n}\n\nconst [SplitButtonProvider, useSplitButtonContext] = createContext<SplitButtonContext>({\n name: 'SplitButtonContext',\n hookName: 'useSplitButtonContext',\n providerName: '<BitkitSplitButton />',\n});\n\n// --- Action ---\ntype BitkitSplitButtonActionProps = Omit<BitkitButtonProps, 'size' | 'variant' | 'state'>;\n\nconst BitkitSplitButtonAction = forwardRef<HTMLButtonElement, BitkitSplitButtonActionProps>((props, ref) => {\n const { size, state, styles, variant } = useSplitButtonContext();\n\n return <BitkitButton ref={ref} css={styles.action} size={size} variant={variant} state={state} {...props} />;\n});\n\nBitkitSplitButtonAction.displayName = 'BitkitSplitButtonAction';\n\n// --- Root ---\nexport type BitkitSplitButtonProps = PropsWithChildren<{\n
|
|
1
|
+
{"version":3,"file":"BitkitSplitButton.js","names":[],"sources":["../../../lib/components/BitkitSplitButton/BitkitSplitButton.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Group, type GroupProps } from '@chakra-ui/react/group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, forwardRef, isValidElement, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitButton, { type BitkitButtonProps } from '../BitkitButton/BitkitButton';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\n\ntype Size = 'lg' | 'md' | 'sm';\ntype Variant = 'primary' | 'secondary';\ntype State = 'disabled' | 'loading' | 'skeleton';\n\nconst isValidActionItem = (child: ReactNode): child is ReactElement => {\n return isValidElement(child) && child.type === BitkitSplitButtonAction;\n};\n\nconst isValidMenuItem = (child: ReactNode): child is ReactElement => {\n return (\n isValidElement(child) &&\n (child.type === BitkitActionMenu.Group ||\n child.type === BitkitActionMenu.Item ||\n child.type === BitkitActionMenu.Separator)\n );\n};\n\n// --- Context ---\ninterface SplitButtonContext {\n size: Size;\n variant: Variant;\n state: State | undefined;\n styles: Record<string, SystemStyleObject>;\n}\n\nconst [SplitButtonProvider, useSplitButtonContext] = createContext<SplitButtonContext>({\n name: 'SplitButtonContext',\n hookName: 'useSplitButtonContext',\n providerName: '<BitkitSplitButton />',\n});\n\n// --- Action ---\ntype BitkitSplitButtonActionProps = Omit<BitkitButtonProps, 'size' | 'variant' | 'state'>;\n\nconst BitkitSplitButtonAction = forwardRef<HTMLButtonElement, BitkitSplitButtonActionProps>((props, ref) => {\n const { size, state, styles, variant } = useSplitButtonContext();\n\n return <BitkitButton ref={ref} css={styles.action} size={size} variant={variant} state={state} {...props} />;\n});\n\nBitkitSplitButtonAction.displayName = 'BitkitSplitButtonAction';\n\n// --- Root ---\nexport type BitkitSplitButtonProps = PropsWithChildren<\n Omit<GroupProps, 'attached' | 'children' | 'display'> & {\n size?: Size;\n variant?: Variant;\n state?: State;\n }\n>;\n\nconst BitkitSplitButton = forwardRef<HTMLDivElement, BitkitSplitButtonProps>((props, ref) => {\n const { children, size = 'lg', state, variant = 'primary', ...rest } = props;\n\n const childArray = Children.toArray(children);\n const actionChild = childArray.find(isValidActionItem);\n const menuItems = childArray.filter(isValidMenuItem);\n\n const menuSize = size === 'lg' ? 'lg' : 'md';\n const recipe = useSlotRecipe({ key: 'splitButton' });\n const styles = recipe({ variant });\n\n return (\n <SplitButtonProvider value={{ size, state, styles, variant }}>\n <Skeleton asChild loading={state === 'skeleton'}>\n <Group ref={ref} {...rest} attached display=\"inline-flex\">\n {actionChild}\n <BitkitActionMenu.Root\n size={menuSize}\n trigger={\n <BitkitIconButton\n css={styles.trigger}\n icon={IconChevronDown}\n label=\"Toggle menu\"\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n variant={variant}\n />\n }\n positioning={{ placement: 'bottom-end' }}\n >\n {menuItems}\n </BitkitActionMenu.Root>\n </Group>\n </Skeleton>\n </SplitButtonProvider>\n );\n});\nBitkitSplitButton.displayName = 'BitkitSplitButton';\n\nexport default Object.assign(BitkitSplitButton, {\n Action: BitkitSplitButtonAction,\n Group: BitkitActionMenu.Group,\n Item: BitkitActionMenu.Item,\n Separator: BitkitActionMenu.Separator,\n});\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,qBAAqB,UAA4C;CACrE,OAAO,eAAe,KAAK,KAAK,MAAM,SAAS;AACjD;AAEA,IAAM,mBAAmB,UAA4C;CACnE,OACE,eAAe,KAAK,MACnB,MAAM,SAAS,iBAAiB,SAC/B,MAAM,SAAS,iBAAiB,QAChC,MAAM,SAAS,iBAAiB;AAEtC;AAUA,IAAM,CAAC,qBAAqB,yBAAyB,gBAAkC;CACrF,MAAM;CACN,UAAU;CACV,cAAc;AAChB,CAAC;AAKD,IAAM,0BAA0B,YAA6D,OAAO,QAAQ;CAC1G,MAAM,EAAE,MAAM,OAAO,QAAQ,YAAY,sBAAsB;CAE/D,OAAO,oBAAC,cAAD;EAAmB;EAAK,KAAK,OAAO;EAAc;EAAe;EAAgB;EAAO,GAAI;CAAQ,CAAA;AAC7G,CAAC;AAED,wBAAwB,cAAc;AAWtC,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EAAE,UAAU,OAAO,MAAM,OAAO,UAAU,WAAW,GAAG,SAAS;CAEvE,MAAM,aAAa,SAAS,QAAQ,QAAQ;CAC5C,MAAM,cAAc,WAAW,KAAK,iBAAiB;CACrD,MAAM,YAAY,WAAW,OAAO,eAAe;CAEnD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,EAAO,EAAE,QAAQ,CAAC;CAEjC,OACE,oBAAC,qBAAD;EAAqB,OAAO;GAAE;GAAM;GAAO;GAAQ;EAAQ;YACzD,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAS,UAAU;aACnC,qBAAC,OAAD;IAAY;IAAK,GAAI;IAAM,UAAA;IAAS,SAAQ;cAA5C,CACG,aACD,oBAAC,iBAAiB,MAAlB;KACE,MAAM;KACN,SACE,oBAAC,kBAAD;MACE,KAAK,OAAO;MACZ,MAAM;MACN,OAAM;MACA;MACN,OAAO,UAAU,YAAY,aAAa;MACjC;KACV,CAAA;KAEH,aAAa,EAAE,WAAW,aAAa;eAEtC;IACoB,CAAA,CAClB;;EACC,CAAA;CACS,CAAA;AAEzB,CAAC;AACD,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,OAAO,OAAO,mBAAmB;CAC9C,QAAQ;CACR,OAAO,iBAAiB;CACxB,MAAM,iBAAiB;CACvB,WAAW,iBAAiB;AAC9B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { StepsRootProps } from '@chakra-ui/react/steps';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
3
|
export type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';
|
|
3
|
-
export interface BitkitStepsProps {
|
|
4
|
+
export interface BitkitStepsProps extends Omit<StepsRootProps, 'children' | 'count' | 'linear' | 'orientation' | 'step'> {
|
|
4
5
|
children: ReactNode;
|
|
5
6
|
orientation?: 'horizontal' | 'vertical';
|
|
6
7
|
step?: number;
|
|
@@ -40,12 +40,13 @@ var renderLabel = (label, action) => {
|
|
|
40
40
|
});
|
|
41
41
|
};
|
|
42
42
|
var BitkitSteps = forwardRef((props, ref) => {
|
|
43
|
-
const { children, orientation = "horizontal", step: stepProp } = props;
|
|
43
|
+
const { children, orientation = "horizontal", step: stepProp, ...rest } = props;
|
|
44
44
|
const stepCardCtx = useStepCardContext();
|
|
45
45
|
const step = stepProp ?? stepCardCtx?.step ?? 0;
|
|
46
46
|
const count = Children.count(children);
|
|
47
47
|
return /* @__PURE__ */ jsx(Steps.Root, {
|
|
48
48
|
ref,
|
|
49
|
+
...rest,
|
|
49
50
|
count,
|
|
50
51
|
linear: false,
|
|
51
52
|
orientation,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n itemState: BitkitStepsItemState | undefined,\n index: number,\n step: number,\n): EffectiveStatus => {\n if (itemState === 'disabled') return 'disabled';\n if (itemState === 'invalid') return 'invalid';\n if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n if (index < step) return 'completed';\n if (index === step) return 'inProgress';\n return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n if (status === 'completed') return <IconCheck size=\"16\" />;\n if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n if (status === 'invalid') return '!';\n return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n if (!action) return label;\n\n // Links don't look like links at rest — only the underline + purple color on hover reveals\n // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n // already adds the underline on hover; we only need to swap the color.\n if (action.href) {\n return (\n <Link\n _hover={{ color: 'text/link' }}\n href={action.href}\n onClick={action.onClick}\n rel={action.isExternal ? 'noopener noreferrer' : undefined}\n target={action.isExternal ? '_blank' : undefined}\n >\n {label}\n </Link>\n );\n }\n\n return (\n <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n {label}\n </Link>\n );\n};\n\nexport interface BitkitStepsProps {\n children: ReactNode;\n orientation?: 'horizontal' | 'vertical';\n step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n const { children, orientation = 'horizontal', step: stepProp } = props;\n const stepCardCtx = useStepCardContext();\n const step = stepProp ?? stepCardCtx?.step ?? 0;\n const count = Children.count(children);\n\n return (\n <Steps.Root ref={ref} count={count} linear={false} orientation={orientation} step={step}>\n <Steps.List>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, {\n _index: index,\n _orientation: orientation,\n });\n }\n return child;\n })}\n </Steps.List>\n </Steps.Root>\n );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n action?: {\n href?: string;\n isExternal?: boolean;\n onClick?: () => void;\n };\n helperText?: string;\n label: string;\n state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n _index?: number;\n _orientation?: 'horizontal' | 'vertical';\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n const {\n _index = 0,\n _orientation = 'horizontal',\n action,\n helperText,\n label,\n state,\n } = props as BitkitStepsItemInternalProps;\n\n const styles = useStepsStyles();\n const stepsCtx = useStepsContext();\n const status = getEffectiveStatus(state, _index, stepsCtx.value);\n const resolvedAction = status === 'completed' ? action : undefined;\n const statusAttr = { 'data-step-status': status };\n\n return (\n <Steps.Item {...statusAttr} index={_index} ref={ref}>\n <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n <Box css={styles.trigger}>\n <Steps.Title {...statusAttr}>{renderLabel(label, resolvedAction)}</Steps.Title>\n {_orientation === 'vertical' && helperText && (\n <Steps.Description {...statusAttr}>{helperText}</Steps.Description>\n )}\n </Box>\n <Steps.Separator />\n </Steps.Item>\n );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default Object.assign(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;AAaA,IAAM,sBACJ,WACA,OACA,SACoB;CACpB,IAAI,cAAc,YAAY,OAAO;CACrC,IAAI,cAAc,WAAW,OAAO;CACpC,IAAI,cAAc,aAAa,OAAO,QAAQ,OAAO,YAAY;CACjE,IAAI,QAAQ,MAAM,OAAO;CACzB,IAAI,UAAU,MAAM,OAAO;CAC3B,OAAO;AACT;AAEA,IAAM,0BAA0B,OAAe,WAA4B;CACzE,IAAI,WAAW,aAAa,OAAO,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CACzD,IAAI,WAAW,eAAe,WAAW,WAAW,OAAO,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAChF,IAAI,WAAW,WAAW,OAAO;CACjC,OAAO,QAAQ;AACjB;AAEA,IAAM,eAAe,OAAe,WAA2C;CAC7E,IAAI,CAAC,QAAQ,OAAO;CAKpB,IAAI,OAAO,MACT,OACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,YAAY;EAC7B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;YAEtC;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,YAAY;EAAG,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;YAC7E;CACG,CAAA;AAEV;
|
|
1
|
+
{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n itemState: BitkitStepsItemState | undefined,\n index: number,\n step: number,\n): EffectiveStatus => {\n if (itemState === 'disabled') return 'disabled';\n if (itemState === 'invalid') return 'invalid';\n if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n if (index < step) return 'completed';\n if (index === step) return 'inProgress';\n return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n if (status === 'completed') return <IconCheck size=\"16\" />;\n if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n if (status === 'invalid') return '!';\n return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n if (!action) return label;\n\n // Links don't look like links at rest — only the underline + purple color on hover reveals\n // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n // already adds the underline on hover; we only need to swap the color.\n if (action.href) {\n return (\n <Link\n _hover={{ color: 'text/link' }}\n href={action.href}\n onClick={action.onClick}\n rel={action.isExternal ? 'noopener noreferrer' : undefined}\n target={action.isExternal ? '_blank' : undefined}\n >\n {label}\n </Link>\n );\n }\n\n return (\n <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n {label}\n </Link>\n );\n};\n\nexport interface BitkitStepsProps extends Omit<\n StepsRootProps,\n 'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n children: ReactNode;\n orientation?: 'horizontal' | 'vertical';\n step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n const { children, orientation = 'horizontal', step: stepProp, ...rest } = props;\n const stepCardCtx = useStepCardContext();\n const step = stepProp ?? stepCardCtx?.step ?? 0;\n const count = Children.count(children);\n\n return (\n <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n <Steps.List>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, {\n _index: index,\n _orientation: orientation,\n });\n }\n return child;\n })}\n </Steps.List>\n </Steps.Root>\n );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n action?: {\n href?: string;\n isExternal?: boolean;\n onClick?: () => void;\n };\n helperText?: string;\n label: string;\n state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n _index?: number;\n _orientation?: 'horizontal' | 'vertical';\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n const {\n _index = 0,\n _orientation = 'horizontal',\n action,\n helperText,\n label,\n state,\n } = props as BitkitStepsItemInternalProps;\n\n const styles = useStepsStyles();\n const stepsCtx = useStepsContext();\n const status = getEffectiveStatus(state, _index, stepsCtx.value);\n const resolvedAction = status === 'completed' ? action : undefined;\n const statusAttr = { 'data-step-status': status };\n\n return (\n <Steps.Item {...statusAttr} index={_index} ref={ref}>\n <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n <Box css={styles.trigger}>\n <Steps.Title {...statusAttr}>{renderLabel(label, resolvedAction)}</Steps.Title>\n {_orientation === 'vertical' && helperText && (\n <Steps.Description {...statusAttr}>{helperText}</Steps.Description>\n )}\n </Box>\n <Steps.Separator />\n </Steps.Item>\n );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default Object.assign(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;AAaA,IAAM,sBACJ,WACA,OACA,SACoB;CACpB,IAAI,cAAc,YAAY,OAAO;CACrC,IAAI,cAAc,WAAW,OAAO;CACpC,IAAI,cAAc,aAAa,OAAO,QAAQ,OAAO,YAAY;CACjE,IAAI,QAAQ,MAAM,OAAO;CACzB,IAAI,UAAU,MAAM,OAAO;CAC3B,OAAO;AACT;AAEA,IAAM,0BAA0B,OAAe,WAA4B;CACzE,IAAI,WAAW,aAAa,OAAO,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CACzD,IAAI,WAAW,eAAe,WAAW,WAAW,OAAO,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAChF,IAAI,WAAW,WAAW,OAAO;CACjC,OAAO,QAAQ;AACjB;AAEA,IAAM,eAAe,OAAe,WAA2C;CAC7E,IAAI,CAAC,QAAQ,OAAO;CAKpB,IAAI,OAAO,MACT,OACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,YAAY;EAC7B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;YAEtC;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,YAAY;EAAG,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;YAC7E;CACG,CAAA;AAEV;AAWA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EAAE,UAAU,cAAc,cAAc,MAAM,UAAU,GAAG,SAAS;CAC1E,MAAM,cAAc,mBAAmB;CACvC,MAAM,OAAO,YAAY,aAAa,QAAQ;CAC9C,MAAM,QAAQ,SAAS,MAAM,QAAQ;CAErC,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EAAa;EAAO,QAAQ;EAAoB;EAAmB;YAC3F,oBAAC,MAAM,MAAP,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAqD;IACvE,QAAQ;IACR,cAAc;GAChB,CAAC;GAEH,OAAO;EACT,CAAC,EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,YAAY,cAAc;AAkB1B,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,SAAS,GACT,eAAe,cACf,QACA,YACA,OACA,UACE;CAEJ,MAAM,SAAS,eAAe;CAE9B,MAAM,SAAS,mBAAmB,OAAO,QADxB,gBACgC,EAAS,KAAK;CAC/D,MAAM,iBAAiB,WAAW,cAAc,SAAS,KAAA;CACzD,MAAM,aAAa,EAAE,oBAAoB,OAAO;CAEhD,OACE,qBAAC,MAAM,MAAP;EAAY,GAAI;EAAY,OAAO;EAAa;YAAhD;GACE,oBAAC,MAAM,WAAP;IAAiB,GAAI;cAAa,uBAAuB,QAAQ,MAAM;GAAmB,CAAA;GAC1F,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB,CACE,oBAAC,MAAM,OAAP;KAAa,GAAI;eAAa,YAAY,OAAO,cAAc;IAAe,CAAA,GAC7E,iBAAiB,cAAc,cAC9B,oBAAC,MAAM,aAAP;KAAmB,GAAI;eAAa;IAA8B,CAAA,CAEjE;;GACL,oBAAC,MAAM,WAAP,CAAkB,CAAA;EACR;;AAEhB,CAAC;AAED,gBAAgB,cAAc;AAE9B,IAAA,sBAAe,OAAO,OAAO,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
|