@bitrise/bitkit-v2 0.3.358 → 0.3.359
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitControlButton/BitkitControlButton.js +1 -0
- package/dist/components/BitkitControlButton/BitkitControlButton.js.map +1 -1
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts +2 -0
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js +15 -11
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts +74 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +244 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/main.js +2 -2
- package/dist/theme/slot-recipes/GroupHeading.recipe.js +4 -1
- package/dist/theme/slot-recipes/GroupHeading.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts +82 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js +230 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/index.d.ts +81 -21
- package/dist/theme/slot-recipes/index.js +2 -2
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/utilities/useIsTruncated.d.ts +27 -0
- package/dist/utilities/useIsTruncated.js +51 -0
- package/dist/utilities/useIsTruncated.js.map +1 -0
- package/docs/v1-to-v2-migration-guide.md +9 -6
- package/package.json +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.d.ts +0 -45
- package/dist/components/BitkitSidebar/BitkitSidebar.js +0 -147
- package/dist/components/BitkitSidebar/BitkitSidebar.js.map +0 -1
- package/dist/theme/slot-recipes/Sidebar.recipe.d.ts +0 -22
- package/dist/theme/slot-recipes/Sidebar.recipe.js +0 -143
- package/dist/theme/slot-recipes/Sidebar.recipe.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitControlButton.js","names":[],"sources":["../../../lib/components/BitkitControlButton/BitkitControlButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype ControlButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';\n\ninterface BitkitControlButtonCommonProps {\n icon: BitkitIconComponent;\n isDanger?: boolean;\n label: string;\n size?: ControlButtonSize;\n state?: 'disabled' | 'skeleton';\n tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\n// Exported so dependent declarations can name it: `BitkitTabs.AddButton`'s props derive from\n// `Extract<BitkitControlButtonProps, { href?: undefined }>` (this type), and the .d.ts emit\n// fails with TS4023 (\"cannot be named\") if it isn't exported.\nexport interface BitkitControlButtonAsButtonProps\n extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n href?: undefined;\n isExternal?: undefined;\n}\n\nexport interface BitkitControlButtonAsAnchorProps\n extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'a'>, 'children' | 'size'> {\n href: string;\n isExternal?: boolean;\n}\n\nexport type BitkitControlButtonProps = BitkitControlButtonAsButtonProps | BitkitControlButtonAsAnchorProps;\n\nconst BitkitControlButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitControlButtonProps>(\n (props, ref) => {\n const Icon = props.icon;\n const size = props.size ?? 'sm';\n const recipe = useRecipe({ key: 'controlButton' });\n const iconSize = size === 'xxs' || size === 'xs' ? '16' : '24';\n const isDisabled = props.state === 'disabled';\n const isSkeleton = props.state === 'skeleton';\n const inertOnClick = isDisabled || isSkeleton;\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n href,\n icon: _icon,\n isDanger,\n isExternal,\n label,\n onClick,\n onKeyDown,\n rel,\n size: _size,\n state: _state,\n target,\n tooltipProps,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = inertOnClick\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n const handleKeyDown = inertOnClick\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n aria-disabled={inertOnClick || undefined}\n aria-label={label}\n {...anchorRest}\n css={recipe({ isDanger, size })}\n href={inertOnClick ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n <Skeleton loading={isSkeleton}>\n <Icon size={iconSize} />\n </Skeleton>\n </chakra.a>\n </BitkitLabelTooltip>\n );\n }\n\n // --- Button mode (default) ---\n const { icon: _icon, isDanger, label, size: _size, state, tooltipProps, ...buttonRest } = props;\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n <chakra.button\n ref={ref as Ref<HTMLButtonElement>}\n aria-label={label}\n disabled={state === 'disabled' || state === 'skeleton'}\n {...buttonRest}\n css={recipe({ isDanger, size })}\n >\n <Skeleton loading={isSkeleton}>\n <Icon size={iconSize} />\n </Skeleton>\n </chakra.button>\n </BitkitLabelTooltip>\n );\n },\n);\n\nBitkitControlButton.displayName = 'BitkitControlButton';\n\nexport default BitkitControlButton;\n"],"mappings":";;;;;;AAmCA,IAAM,sBAAsB,YACzB,OAAO,QAAQ;CACd,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,SAAS,UAAU,EAAE,KAAK,gBAAgB,CAAC;CACjD,MAAM,WAAW,SAAS,SAAS,SAAS,OAAO,OAAO;CAC1D,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,eAAe,cAAc;CAGnC,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,MACA,MAAM,OACN,UACA,YACA,OACA,SACA,WACA,KACA,MAAM,OACN,OAAO,QACP,QACA,cACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,gBACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,gBACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,GAAI;GACnC,UAAA,oBAAC,OAAO,GAAR;IACO;IACL,iBAAe,gBAAgB,KAAA;IAC/B,cAAY;IACZ,GAAI;IACJ,KAAK,OAAO;KAAE;KAAU;IAAK,CAAC;IAC9B,MAAM,eAAe,KAAA,IAAY;IACjC,SAAS;IACT,WAAW;IACX,KAAK;IACL,QAAQ;IAER,UAAA,oBAAC,UAAD;KAAU,SAAS;KACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACf,CAAA;GACF,CAAA;EACQ,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,MAAM,OAAO,OAAO,cAAc,GAAG,eAAe;CAC1F,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,GAAI;EACnC,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,UAAU,UAAU,cAAc,UAAU;
|
|
1
|
+
{"version":3,"file":"BitkitControlButton.js","names":[],"sources":["../../../lib/components/BitkitControlButton/BitkitControlButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype ControlButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';\n\ninterface BitkitControlButtonCommonProps {\n icon: BitkitIconComponent;\n isDanger?: boolean;\n label: string;\n size?: ControlButtonSize;\n state?: 'disabled' | 'skeleton';\n tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\n// Exported so dependent declarations can name it: `BitkitTabs.AddButton`'s props derive from\n// `Extract<BitkitControlButtonProps, { href?: undefined }>` (this type), and the .d.ts emit\n// fails with TS4023 (\"cannot be named\") if it isn't exported.\nexport interface BitkitControlButtonAsButtonProps\n extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n href?: undefined;\n isExternal?: undefined;\n}\n\nexport interface BitkitControlButtonAsAnchorProps\n extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'a'>, 'children' | 'size'> {\n href: string;\n isExternal?: boolean;\n}\n\nexport type BitkitControlButtonProps = BitkitControlButtonAsButtonProps | BitkitControlButtonAsAnchorProps;\n\nconst BitkitControlButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitControlButtonProps>(\n (props, ref) => {\n const Icon = props.icon;\n const size = props.size ?? 'sm';\n const recipe = useRecipe({ key: 'controlButton' });\n const iconSize = size === 'xxs' || size === 'xs' ? '16' : '24';\n const isDisabled = props.state === 'disabled';\n const isSkeleton = props.state === 'skeleton';\n const inertOnClick = isDisabled || isSkeleton;\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n href,\n icon: _icon,\n isDanger,\n isExternal,\n label,\n onClick,\n onKeyDown,\n rel,\n size: _size,\n state: _state,\n target,\n tooltipProps,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = inertOnClick\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n const handleKeyDown = inertOnClick\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n aria-disabled={inertOnClick || undefined}\n aria-label={label}\n {...anchorRest}\n css={recipe({ isDanger, size })}\n href={inertOnClick ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n <Skeleton loading={isSkeleton}>\n <Icon size={iconSize} />\n </Skeleton>\n </chakra.a>\n </BitkitLabelTooltip>\n );\n }\n\n // --- Button mode (default) ---\n const { icon: _icon, isDanger, label, size: _size, state, tooltipProps, ...buttonRest } = props;\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n <chakra.button\n ref={ref as Ref<HTMLButtonElement>}\n aria-label={label}\n disabled={state === 'disabled' || state === 'skeleton'}\n // A control button is an action, not a form submit — without this it would submit any\n // form it happens to sit inside. Before the spread, so a consumer can still opt into\n // `type=\"submit\"`.\n type=\"button\"\n {...buttonRest}\n css={recipe({ isDanger, size })}\n >\n <Skeleton loading={isSkeleton}>\n <Icon size={iconSize} />\n </Skeleton>\n </chakra.button>\n </BitkitLabelTooltip>\n );\n },\n);\n\nBitkitControlButton.displayName = 'BitkitControlButton';\n\nexport default BitkitControlButton;\n"],"mappings":";;;;;;AAmCA,IAAM,sBAAsB,YACzB,OAAO,QAAQ;CACd,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,SAAS,UAAU,EAAE,KAAK,gBAAgB,CAAC;CACjD,MAAM,WAAW,SAAS,SAAS,SAAS,OAAO,OAAO;CAC1D,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,eAAe,cAAc;CAGnC,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,MACA,MAAM,OACN,UACA,YACA,OACA,SACA,WACA,KACA,MAAM,OACN,OAAO,QACP,QACA,cACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,gBACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,gBACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,GAAI;GACnC,UAAA,oBAAC,OAAO,GAAR;IACO;IACL,iBAAe,gBAAgB,KAAA;IAC/B,cAAY;IACZ,GAAI;IACJ,KAAK,OAAO;KAAE;KAAU;IAAK,CAAC;IAC9B,MAAM,eAAe,KAAA,IAAY;IACjC,SAAS;IACT,WAAW;IACX,KAAK;IACL,QAAQ;IAER,UAAA,oBAAC,UAAD;KAAU,SAAS;KACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACf,CAAA;GACF,CAAA;EACQ,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,MAAM,OAAO,OAAO,cAAc,GAAG,eAAe;CAC1F,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,GAAI;EACnC,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,UAAU,UAAU,cAAc,UAAU;GAI5C,MAAK;GACL,GAAI;GACJ,KAAK,OAAO;IAAE;IAAU;GAAK,CAAC;GAE9B,UAAA,oBAAC,UAAD;IAAU,SAAS;IACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACf,CAAA;EACG,CAAA;CACG,CAAA;AAExB,CACF;AAEA,oBAAoB,cAAc"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
import { BitkitIconComponent } from '../../icons';
|
|
3
4
|
export interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {
|
|
5
|
+
badge?: ReactNode;
|
|
4
6
|
icon?: BitkitIconComponent;
|
|
5
7
|
label: string;
|
|
6
8
|
}
|
|
@@ -5,22 +5,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
5
5
|
import { Separator } from "@chakra-ui/react/separator";
|
|
6
6
|
//#region lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx
|
|
7
7
|
var BitkitGroupHeading = forwardRef((props, ref) => {
|
|
8
|
-
const { icon: Icon, label, ...rest } = props;
|
|
8
|
+
const { badge, icon: Icon, label, ...rest } = props;
|
|
9
9
|
const styles = useSlotRecipe({ key: "groupHeading" })();
|
|
10
10
|
return /* @__PURE__ */ jsxs(Box, {
|
|
11
11
|
css: styles.root,
|
|
12
12
|
ref,
|
|
13
13
|
...rest,
|
|
14
|
-
children: [
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ jsxs(chakra.div, {
|
|
16
|
+
css: styles.titleBlock,
|
|
17
|
+
children: [Icon && /* @__PURE__ */ jsx(Icon, {
|
|
18
|
+
css: styles.icon,
|
|
19
|
+
size: "16"
|
|
20
|
+
}), /* @__PURE__ */ jsx(chakra.span, {
|
|
21
|
+
css: styles.label,
|
|
22
|
+
children: label
|
|
23
|
+
})]
|
|
24
|
+
}),
|
|
25
|
+
/* @__PURE__ */ jsx(Separator, { css: styles.separator }),
|
|
26
|
+
badge
|
|
27
|
+
]
|
|
24
28
|
});
|
|
25
29
|
});
|
|
26
30
|
BitkitGroupHeading.displayName = "BitkitGroupHeading";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n icon?: BitkitIconComponent;\n label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n const { icon: Icon, label, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'groupHeading' });\n const styles = recipe();\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n <chakra.div css={styles.titleBlock}>\n {Icon && <Icon css={styles.icon} size=\"16\" />}\n <chakra.span css={styles.label}>{label}</chakra.span>\n </chakra.div>\n <Separator css={styles.separator} />\n </Box>\n );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n badge?: ReactNode;\n icon?: BitkitIconComponent;\n label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n const { badge, icon: Icon, label, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'groupHeading' });\n const styles = recipe();\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n <chakra.div css={styles.titleBlock}>\n {Icon && <Icon css={styles.icon} size=\"16\" />}\n <chakra.span css={styles.label}>{label}</chakra.span>\n </chakra.div>\n <Separator css={styles.separator} />\n {badge}\n </Box>\n );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAaA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,OAAO,MAAM,MAAM,OAAO,GAAG,SAAS;CAG9C,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;EAArC,UAAA;GACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAQ,UAAA;IAAmB,CAAA,CAC1C;;GACZ,oBAAC,WAAD,EAAW,KAAK,OAAO,UAAY,CAAA;GAClC;EACE;;AAET,CAAC;AAED,mBAAmB,cAAc"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
+
import { SeparatorProps } from '@chakra-ui/react/separator';
|
|
3
|
+
import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
|
|
4
|
+
import { ReactNode } from 'react';
|
|
5
|
+
import { BitkitIconComponent } from '../../icons';
|
|
6
|
+
import { BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';
|
|
7
|
+
export interface BitkitPageSidebarProps extends BoxProps {
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
interface BitkitPageSidebarItemCommonProps {
|
|
11
|
+
badge?: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* The item's label. Typed as a string rather than `ReactNode` because the row truncates it with
|
|
14
|
+
* an ellipsis, and the overflow tooltip needs the full text to reveal.
|
|
15
|
+
*/
|
|
16
|
+
children: string;
|
|
17
|
+
icon?: BitkitIconComponent;
|
|
18
|
+
/**
|
|
19
|
+
* Marks the item as the current page. Mutually exclusive with `state="disabled"` — you cannot be
|
|
20
|
+
* on a page whose nav item is unavailable — but the two are not type-checked against each other:
|
|
21
|
+
* the combination only ever arrives from a computed `selected`, which no union can catch, and
|
|
22
|
+
* checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do
|
|
23
|
+
* turn up, disabled wins, since that is the one of the two the design actually defines.
|
|
24
|
+
*/
|
|
25
|
+
selected?: boolean;
|
|
26
|
+
state?: 'disabled';
|
|
27
|
+
suffixIcon?: BitkitIconComponent;
|
|
28
|
+
}
|
|
29
|
+
interface BitkitPageSidebarItemLinkProps extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {
|
|
30
|
+
href: string;
|
|
31
|
+
}
|
|
32
|
+
interface BitkitPageSidebarItemButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {
|
|
33
|
+
href?: never;
|
|
34
|
+
}
|
|
35
|
+
export type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;
|
|
36
|
+
interface BitkitPageSidebarTitleCommonProps extends BoxProps {
|
|
37
|
+
backLabel?: string;
|
|
38
|
+
children: ReactNode;
|
|
39
|
+
}
|
|
40
|
+
interface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {
|
|
41
|
+
backHref: string;
|
|
42
|
+
onBackClick?: never;
|
|
43
|
+
}
|
|
44
|
+
interface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {
|
|
45
|
+
backHref?: never;
|
|
46
|
+
onBackClick: () => void;
|
|
47
|
+
}
|
|
48
|
+
interface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {
|
|
49
|
+
backHref?: never;
|
|
50
|
+
onBackClick?: never;
|
|
51
|
+
}
|
|
52
|
+
export type BitkitPageSidebarTitleProps = BitkitPageSidebarTitleButtonProps | BitkitPageSidebarTitleLinkProps | BitkitPageSidebarTitlePlainProps;
|
|
53
|
+
export interface BitkitPageSidebarBodyProps extends BoxProps {
|
|
54
|
+
children: ReactNode;
|
|
55
|
+
}
|
|
56
|
+
export interface BitkitPageSidebarFooterProps extends BoxProps {
|
|
57
|
+
children: ReactNode;
|
|
58
|
+
}
|
|
59
|
+
export interface BitkitPageSidebarProjectProps extends BoxProps {
|
|
60
|
+
label: string;
|
|
61
|
+
value: string;
|
|
62
|
+
}
|
|
63
|
+
export type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;
|
|
64
|
+
export type BitkitPageSidebarDividerProps = SeparatorProps;
|
|
65
|
+
declare const _default: import('react').ForwardRefExoticComponent<BitkitPageSidebarProps & import('react').RefAttributes<HTMLElement>> & {
|
|
66
|
+
Body: import('react').ForwardRefExoticComponent<BitkitPageSidebarBodyProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
67
|
+
Divider: import('react').ForwardRefExoticComponent<SeparatorProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
68
|
+
Footer: import('react').ForwardRefExoticComponent<BitkitPageSidebarFooterProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
69
|
+
GroupHeading: import('react').ForwardRefExoticComponent<BitkitGroupHeadingProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
70
|
+
Item: import('react').ForwardRefExoticComponent<BitkitPageSidebarItemProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
71
|
+
Project: import('react').ForwardRefExoticComponent<BitkitPageSidebarProjectProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
72
|
+
Title: import('react').ForwardRefExoticComponent<BitkitPageSidebarTitleProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
73
|
+
};
|
|
74
|
+
export default _default;
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
import IconChevronLeft from "../../icons/IconChevronLeft.js";
|
|
2
|
+
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
3
|
+
import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
|
|
4
|
+
import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
|
|
5
|
+
import BitkitOverflowTooltip from "../BitkitOverflowTooltip/BitkitOverflowTooltip.js";
|
|
6
|
+
import useIsTruncated from "../../utilities/useIsTruncated.js";
|
|
7
|
+
import { Box } from "@chakra-ui/react/box";
|
|
8
|
+
import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
9
|
+
import { forwardRef } from "react";
|
|
10
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { Separator } from "@chakra-ui/react/separator";
|
|
12
|
+
import { Text } from "@chakra-ui/react/text";
|
|
13
|
+
//#region lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx
|
|
14
|
+
/**
|
|
15
|
+
* Page-level navigation sidebar. It expects three children, in this order:
|
|
16
|
+
*
|
|
17
|
+
* ```tsx
|
|
18
|
+
* <BitkitPageSidebar>
|
|
19
|
+
* <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>
|
|
20
|
+
* <BitkitPageSidebar.Body>
|
|
21
|
+
* <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>
|
|
22
|
+
* </BitkitPageSidebar.Body>
|
|
23
|
+
* <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>
|
|
24
|
+
* </BitkitPageSidebar>
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is
|
|
28
|
+
* taller than the viewport the whole thing — footer included — grows and scrolls with the page,
|
|
29
|
+
* which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.
|
|
30
|
+
*
|
|
31
|
+
* The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page
|
|
32
|
+
* with more than one sidebar should name each one — pass your own `aria-label` (or
|
|
33
|
+
* `aria-labelledby`), which overrides the default.
|
|
34
|
+
*
|
|
35
|
+
* It stands at least viewport-tall by default. An embedded panel that should size to its content
|
|
36
|
+
* opts out with `minHeight="auto"`.
|
|
37
|
+
*/
|
|
38
|
+
var BitkitPageSidebar = forwardRef((props, ref) => {
|
|
39
|
+
const { children, ...rest } = props;
|
|
40
|
+
const styles = useSlotRecipe({ key: "pageSidebar" })();
|
|
41
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
42
|
+
ref,
|
|
43
|
+
"aria-label": "Page navigation",
|
|
44
|
+
asChild: true,
|
|
45
|
+
css: styles.root,
|
|
46
|
+
...rest,
|
|
47
|
+
children: /* @__PURE__ */ jsx("nav", { children })
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
BitkitPageSidebar.displayName = "BitkitPageSidebar";
|
|
51
|
+
var BitkitPageSidebarItem = forwardRef((props, ref) => {
|
|
52
|
+
const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;
|
|
53
|
+
const isDisabled = state === "disabled";
|
|
54
|
+
const isSelected = selected === true && !isDisabled;
|
|
55
|
+
const styles = useSlotRecipe({ key: "pageSidebar" })({
|
|
56
|
+
isDisabled,
|
|
57
|
+
selected: isSelected
|
|
58
|
+
});
|
|
59
|
+
const { isTruncated, ref: labelRef } = useIsTruncated(children);
|
|
60
|
+
const itemContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
61
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
62
|
+
as: "span",
|
|
63
|
+
css: styles.contentBlock,
|
|
64
|
+
children: [Icon && /* @__PURE__ */ jsx(Icon, {
|
|
65
|
+
css: styles.itemIcon,
|
|
66
|
+
size: "16"
|
|
67
|
+
}), /* @__PURE__ */ jsx(Text, {
|
|
68
|
+
as: "span",
|
|
69
|
+
css: styles.itemLabel,
|
|
70
|
+
ref: labelRef,
|
|
71
|
+
children
|
|
72
|
+
})]
|
|
73
|
+
}),
|
|
74
|
+
badge,
|
|
75
|
+
SuffixIcon && /* @__PURE__ */ jsx(SuffixIcon, {
|
|
76
|
+
css: styles.suffixIcon,
|
|
77
|
+
size: "16"
|
|
78
|
+
}),
|
|
79
|
+
isSelected && /* @__PURE__ */ jsx(Box, {
|
|
80
|
+
as: "span",
|
|
81
|
+
css: styles.selectionMarker
|
|
82
|
+
})
|
|
83
|
+
] });
|
|
84
|
+
const withTooltip = (row) => /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
|
|
85
|
+
disabled: !isTruncated,
|
|
86
|
+
text: children,
|
|
87
|
+
children: row
|
|
88
|
+
});
|
|
89
|
+
if (rest.href !== void 0) {
|
|
90
|
+
const { className, href, onClick, onKeyDown, ...linkRest } = rest;
|
|
91
|
+
const handleClick = isDisabled ? (event) => {
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
event.stopPropagation();
|
|
94
|
+
} : onClick;
|
|
95
|
+
const handleKeyDown = isDisabled ? (event) => {
|
|
96
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
97
|
+
event.preventDefault();
|
|
98
|
+
event.stopPropagation();
|
|
99
|
+
}
|
|
100
|
+
} : onKeyDown;
|
|
101
|
+
return withTooltip(/* @__PURE__ */ jsx(chakra.a, {
|
|
102
|
+
ref,
|
|
103
|
+
...linkRest,
|
|
104
|
+
"aria-current": isSelected ? "page" : void 0,
|
|
105
|
+
"aria-disabled": isDisabled || void 0,
|
|
106
|
+
className: className ? `group ${className}` : "group",
|
|
107
|
+
css: styles.item,
|
|
108
|
+
href: isDisabled ? void 0 : href,
|
|
109
|
+
onClick: handleClick,
|
|
110
|
+
onKeyDown: handleKeyDown,
|
|
111
|
+
children: itemContent
|
|
112
|
+
}));
|
|
113
|
+
}
|
|
114
|
+
const { className, href: _href, ...buttonRest } = rest;
|
|
115
|
+
return withTooltip(/* @__PURE__ */ jsx(chakra.button, {
|
|
116
|
+
ref,
|
|
117
|
+
...buttonRest,
|
|
118
|
+
"aria-current": isSelected ? "page" : void 0,
|
|
119
|
+
className: className ? `group ${className}` : "group",
|
|
120
|
+
css: styles.item,
|
|
121
|
+
disabled: isDisabled,
|
|
122
|
+
type: "button",
|
|
123
|
+
children: itemContent
|
|
124
|
+
}));
|
|
125
|
+
});
|
|
126
|
+
BitkitPageSidebarItem.displayName = "BitkitPageSidebarItem";
|
|
127
|
+
var BitkitPageSidebarTitle = forwardRef((props, ref) => {
|
|
128
|
+
const { backHref, backLabel = "Back", children, onBackClick, ...rest } = props;
|
|
129
|
+
const hasBack = backHref !== void 0 || onBackClick !== void 0;
|
|
130
|
+
const styles = useSlotRecipe({ key: "pageSidebar" })({ hasBack });
|
|
131
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
132
|
+
ref,
|
|
133
|
+
css: styles.title,
|
|
134
|
+
...rest,
|
|
135
|
+
children: /* @__PURE__ */ jsxs(Box, {
|
|
136
|
+
css: styles.titleBlock,
|
|
137
|
+
children: [hasBack && (backHref !== void 0 ? /* @__PURE__ */ jsx(BitkitControlButton, {
|
|
138
|
+
href: backHref,
|
|
139
|
+
icon: IconChevronLeft,
|
|
140
|
+
label: backLabel,
|
|
141
|
+
size: "xs",
|
|
142
|
+
tooltipProps: { placement: "right" }
|
|
143
|
+
}) : /* @__PURE__ */ jsx(BitkitControlButton, {
|
|
144
|
+
icon: IconChevronLeft,
|
|
145
|
+
label: backLabel,
|
|
146
|
+
onClick: onBackClick,
|
|
147
|
+
size: "xs",
|
|
148
|
+
tooltipProps: { placement: "right" }
|
|
149
|
+
})), /* @__PURE__ */ jsx(Text, {
|
|
150
|
+
as: "span",
|
|
151
|
+
css: styles.titleText,
|
|
152
|
+
children
|
|
153
|
+
})]
|
|
154
|
+
})
|
|
155
|
+
});
|
|
156
|
+
});
|
|
157
|
+
BitkitPageSidebarTitle.displayName = "BitkitPageSidebarTitle";
|
|
158
|
+
/**
|
|
159
|
+
* Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer
|
|
160
|
+
* sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the
|
|
161
|
+
* footer so the two blocks stay visually separate however long the list gets.
|
|
162
|
+
*/
|
|
163
|
+
var BitkitPageSidebarBody = forwardRef((props, ref) => {
|
|
164
|
+
const { children, ...rest } = props;
|
|
165
|
+
const styles = useSlotRecipe({ key: "pageSidebar" })();
|
|
166
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
167
|
+
ref,
|
|
168
|
+
css: styles.body,
|
|
169
|
+
...rest,
|
|
170
|
+
children
|
|
171
|
+
});
|
|
172
|
+
});
|
|
173
|
+
BitkitPageSidebarBody.displayName = "BitkitPageSidebarBody";
|
|
174
|
+
var BitkitPageSidebarFooter = forwardRef((props, ref) => {
|
|
175
|
+
const { children, ...rest } = props;
|
|
176
|
+
const styles = useSlotRecipe({ key: "pageSidebar" })();
|
|
177
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
178
|
+
ref,
|
|
179
|
+
css: styles.footer,
|
|
180
|
+
...rest,
|
|
181
|
+
children
|
|
182
|
+
});
|
|
183
|
+
});
|
|
184
|
+
BitkitPageSidebarFooter.displayName = "BitkitPageSidebarFooter";
|
|
185
|
+
var BitkitPageSidebarProject = forwardRef((props, ref) => {
|
|
186
|
+
const { label, value, ...rest } = props;
|
|
187
|
+
const styles = useSlotRecipe({ key: "pageSidebar" })();
|
|
188
|
+
const { isTruncated, ref: valueRef } = useIsTruncated(value);
|
|
189
|
+
return /* @__PURE__ */ jsxs(Box, {
|
|
190
|
+
ref,
|
|
191
|
+
css: styles.project,
|
|
192
|
+
...rest,
|
|
193
|
+
children: [/* @__PURE__ */ jsx(Text, {
|
|
194
|
+
as: "span",
|
|
195
|
+
css: styles.projectLabel,
|
|
196
|
+
children: label
|
|
197
|
+
}), /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
|
|
198
|
+
disabled: !isTruncated,
|
|
199
|
+
text: value,
|
|
200
|
+
children: /* @__PURE__ */ jsx(Box, {
|
|
201
|
+
css: styles.projectValueWrapper,
|
|
202
|
+
children: /* @__PURE__ */ jsx(Text, {
|
|
203
|
+
as: "span",
|
|
204
|
+
css: styles.projectValue,
|
|
205
|
+
ref: valueRef,
|
|
206
|
+
children: value
|
|
207
|
+
})
|
|
208
|
+
})
|
|
209
|
+
})]
|
|
210
|
+
});
|
|
211
|
+
});
|
|
212
|
+
BitkitPageSidebarProject.displayName = "BitkitPageSidebarProject";
|
|
213
|
+
var BitkitPageSidebarGroupHeading = forwardRef((props, ref) => {
|
|
214
|
+
return /* @__PURE__ */ jsx(BitkitGroupHeading, {
|
|
215
|
+
ref,
|
|
216
|
+
paddingBlockEnd: "8",
|
|
217
|
+
paddingBlockStart: "16",
|
|
218
|
+
paddingInline: "24",
|
|
219
|
+
...props
|
|
220
|
+
});
|
|
221
|
+
});
|
|
222
|
+
BitkitPageSidebarGroupHeading.displayName = "BitkitPageSidebarGroupHeading";
|
|
223
|
+
var BitkitPageSidebarDivider = forwardRef((props, ref) => {
|
|
224
|
+
const styles = useSlotRecipe({ key: "pageSidebar" })();
|
|
225
|
+
return /* @__PURE__ */ jsx(Separator, {
|
|
226
|
+
ref,
|
|
227
|
+
css: styles.divider,
|
|
228
|
+
...props
|
|
229
|
+
});
|
|
230
|
+
});
|
|
231
|
+
BitkitPageSidebarDivider.displayName = "BitkitPageSidebarDivider";
|
|
232
|
+
var BitkitPageSidebar_default = withSubComponents(BitkitPageSidebar, {
|
|
233
|
+
Body: BitkitPageSidebarBody,
|
|
234
|
+
Divider: BitkitPageSidebarDivider,
|
|
235
|
+
Footer: BitkitPageSidebarFooter,
|
|
236
|
+
GroupHeading: BitkitPageSidebarGroupHeading,
|
|
237
|
+
Item: BitkitPageSidebarItem,
|
|
238
|
+
Project: BitkitPageSidebarProject,
|
|
239
|
+
Title: BitkitPageSidebarTitle
|
|
240
|
+
});
|
|
241
|
+
//#endregion
|
|
242
|
+
export { BitkitPageSidebar_default as default };
|
|
243
|
+
|
|
244
|
+
//# sourceMappingURL=BitkitPageSidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitPageSidebar.js","names":[],"sources":["../../../lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator, type SeparatorProps } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\n// ----- BitkitPageSidebar (Root) -----\n\nexport interface BitkitPageSidebarProps extends BoxProps {\n children: ReactNode;\n}\n\n/**\n * Page-level navigation sidebar. It expects three children, in this order:\n *\n * ```tsx\n * <BitkitPageSidebar>\n * <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>\n * <BitkitPageSidebar.Body>\n * <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>\n * </BitkitPageSidebar.Body>\n * <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>\n * </BitkitPageSidebar>\n * ```\n *\n * `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is\n * taller than the viewport the whole thing — footer included — grows and scrolls with the page,\n * which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.\n *\n * The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page\n * with more than one sidebar should name each one — pass your own `aria-label` (or\n * `aria-labelledby`), which overrides the default.\n *\n * It stands at least viewport-tall by default. An embedded panel that should size to its content\n * opts out with `minHeight=\"auto\"`.\n */\nconst BitkitPageSidebar = forwardRef<HTMLElement, BitkitPageSidebarProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} aria-label=\"Page navigation\" asChild css={styles.root} {...rest}>\n <nav>{children}</nav>\n </Box>\n );\n});\n\nBitkitPageSidebar.displayName = 'BitkitPageSidebar';\n\n// ----- BitkitPageSidebar.Item -----\n\ninterface BitkitPageSidebarItemCommonProps {\n badge?: ReactNode;\n /**\n * The item's label. Typed as a string rather than `ReactNode` because the row truncates it with\n * an ellipsis, and the overflow tooltip needs the full text to reveal.\n */\n children: string;\n icon?: BitkitIconComponent;\n /**\n * Marks the item as the current page. Mutually exclusive with `state=\"disabled\"` — you cannot be\n * on a page whose nav item is unavailable — but the two are not type-checked against each other:\n * the combination only ever arrives from a computed `selected`, which no union can catch, and\n * checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do\n * turn up, disabled wins, since that is the one of the two the design actually defines.\n */\n selected?: boolean;\n state?: 'disabled';\n suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitPageSidebarItemLinkProps\n extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {\n href: string;\n}\n\ninterface BitkitPageSidebarItemButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {\n href?: never;\n}\n\nexport type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;\n\nconst BitkitPageSidebarItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitPageSidebarItemProps>(\n (props, ref) => {\n const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;\n\n const isDisabled = state === 'disabled';\n // `selected` and `state=\"disabled\"` are not checked against each other in the types, so this is\n // the single place the overlap is resolved: disabled wins, and the two recipe variants can never\n // both claim the same slot.\n const isSelected = selected === true && !isDisabled;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe({ isDisabled, selected: isSelected });\n\n const { isTruncated, ref: labelRef } = useIsTruncated<HTMLParagraphElement>(children);\n\n const itemContent = (\n <>\n {/* `span`, not the default `div`: in button mode these sit inside a `<button>`, whose\n content model allows phrasing content only. */}\n <Box as=\"span\" css={styles.contentBlock}>\n {Icon && <Icon css={styles.itemIcon} size=\"16\" />}\n <Text as=\"span\" css={styles.itemLabel} ref={labelRef}>\n {children}\n </Text>\n </Box>\n {badge}\n {SuffixIcon && <SuffixIcon css={styles.suffixIcon} size=\"16\" />}\n {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n </>\n );\n\n // The overflow tooltip anchors to the row itself, which is the focusable element: anchored to an\n // inner node it would only ever open on hover, leaving keyboard users unable to read a truncated\n // label. `Tooltip.Trigger` renders `asChild` and composes refs, so the consumer's forwarded ref\n // survives, and the ref measuring the truncation sits on the label further in.\n const withTooltip = (row: ReactNode) => (\n <BitkitOverflowTooltip disabled={!isTruncated} text={children}>\n {row}\n </BitkitOverflowTooltip>\n );\n\n // `chakra.a` / `chakra.button` rather than a named primitive: the item carries its own slot recipe,\n // and Chakra's `Button`/`Link` would layer their own recipe styles on top of it.\n if (rest.href !== undefined) {\n const { className, href, onClick, onKeyDown, ...linkRest } = rest;\n const handleClick = isDisabled\n ? (event: MouseEvent<HTMLAnchorElement>) => {\n event.preventDefault();\n event.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (event: KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n : onKeyDown;\n\n return withTooltip(\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...linkRest}\n aria-current={isSelected ? 'page' : undefined}\n aria-disabled={isDisabled || undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {itemContent}\n </chakra.a>,\n );\n }\n\n const { className, href: _href, ...buttonRest } = rest;\n\n return withTooltip(\n <chakra.button\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n aria-current={isSelected ? 'page' : undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n disabled={isDisabled}\n type=\"button\"\n >\n {itemContent}\n </chakra.button>,\n );\n },\n);\n\nBitkitPageSidebarItem.displayName = 'BitkitPageSidebarItem';\n\n// ----- BitkitPageSidebar.Title -----\n\ninterface BitkitPageSidebarTitleCommonProps extends BoxProps {\n backLabel?: string;\n children: ReactNode;\n}\n\ninterface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {\n backHref: string;\n onBackClick?: never;\n}\n\ninterface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {\n backHref?: never;\n onBackClick: () => void;\n}\n\ninterface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {\n backHref?: never;\n onBackClick?: never;\n}\n\nexport type BitkitPageSidebarTitleProps =\n | BitkitPageSidebarTitleButtonProps\n | BitkitPageSidebarTitleLinkProps\n | BitkitPageSidebarTitlePlainProps;\n\nconst BitkitPageSidebarTitle = forwardRef<HTMLDivElement, BitkitPageSidebarTitleProps>((props, ref) => {\n const { backHref, backLabel = 'Back', children, onBackClick, ...rest } = props;\n\n const hasBack = backHref !== undefined || onBackClick !== undefined;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe({ hasBack });\n\n return (\n <Box ref={ref} css={styles.title} {...rest}>\n <Box css={styles.titleBlock}>\n {/* The label tooltip opens to the right. Its default `top` has nowhere to go here — the\n button sits at the very top of the sidebar, so the tooltip jams against the viewport\n edge and covers the header instead of flipping. */}\n {hasBack &&\n (backHref !== undefined ? (\n <BitkitControlButton\n href={backHref}\n icon={IconChevronLeft}\n label={backLabel}\n size=\"xs\"\n tooltipProps={{ placement: 'right' }}\n />\n ) : (\n <BitkitControlButton\n icon={IconChevronLeft}\n label={backLabel}\n onClick={onBackClick}\n size=\"xs\"\n tooltipProps={{ placement: 'right' }}\n />\n ))}\n <Text as=\"span\" css={styles.titleText}>\n {children}\n </Text>\n </Box>\n </Box>\n );\n});\n\nBitkitPageSidebarTitle.displayName = 'BitkitPageSidebarTitle';\n\n// ----- BitkitPageSidebar.Body -----\n\nexport interface BitkitPageSidebarBodyProps extends BoxProps {\n children: ReactNode;\n}\n\n/**\n * Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer\n * sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the\n * footer so the two blocks stay visually separate however long the list gets.\n */\nconst BitkitPageSidebarBody = forwardRef<HTMLDivElement, BitkitPageSidebarBodyProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={styles.body} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitPageSidebarBody.displayName = 'BitkitPageSidebarBody';\n\n// ----- BitkitPageSidebar.Footer -----\n\nexport interface BitkitPageSidebarFooterProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitPageSidebarFooter = forwardRef<HTMLDivElement, BitkitPageSidebarFooterProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={styles.footer} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitPageSidebarFooter.displayName = 'BitkitPageSidebarFooter';\n\n// ----- BitkitPageSidebar.Project -----\n\nexport interface BitkitPageSidebarProjectProps extends BoxProps {\n label: string;\n value: string;\n}\n\nconst BitkitPageSidebarProject = forwardRef<HTMLDivElement, BitkitPageSidebarProjectProps>((props, ref) => {\n const { label, value, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n const { isTruncated, ref: valueRef } = useIsTruncated<HTMLParagraphElement>(value);\n\n return (\n <Box ref={ref} css={styles.project} {...rest}>\n <Text as=\"span\" css={styles.projectLabel}>\n {label}\n </Text>\n {/* Wrapper for the same reason as in Item: the trigger cannot be the element being measured. */}\n <BitkitOverflowTooltip disabled={!isTruncated} text={value}>\n <Box css={styles.projectValueWrapper}>\n <Text as=\"span\" css={styles.projectValue} ref={valueRef}>\n {value}\n </Text>\n </Box>\n </BitkitOverflowTooltip>\n </Box>\n );\n});\n\nBitkitPageSidebarProject.displayName = 'BitkitPageSidebarProject';\n\n// ----- BitkitPageSidebar.GroupHeading -----\n\nexport type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitPageSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitPageSidebarGroupHeadingProps>((props, ref) => {\n return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"8\" paddingBlockStart=\"16\" paddingInline=\"24\" {...props} />;\n});\n\nBitkitPageSidebarGroupHeading.displayName = 'BitkitPageSidebarGroupHeading';\n\n// ----- BitkitPageSidebar.Divider -----\n\nexport type BitkitPageSidebarDividerProps = SeparatorProps;\n\nconst BitkitPageSidebarDivider = forwardRef<HTMLDivElement, BitkitPageSidebarDividerProps>((props, ref) => {\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return <Separator ref={ref} css={styles.divider} {...props} />;\n});\n\nBitkitPageSidebarDivider.displayName = 'BitkitPageSidebarDivider';\n\nexport default withSubComponents(BitkitPageSidebar, {\n Body: BitkitPageSidebarBody,\n Divider: BitkitPageSidebarDivider,\n Footer: BitkitPageSidebarFooter,\n GroupHeading: BitkitPageSidebarGroupHeading,\n Item: BitkitPageSidebarItem,\n Project: BitkitPageSidebarProject,\n Title: BitkitPageSidebarTitle,\n});\n"],"mappings":"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"}
|
|
@@ -49,6 +49,7 @@ export { default as BitkitNumberInput, type BitkitNumberInputProps } from './Bit
|
|
|
49
49
|
export { default as BitkitOverflowContent, type BitkitOverflowContentProps, } from './BitkitOverflowContent/BitkitOverflowContent';
|
|
50
50
|
export { default as BitkitOverflowTooltip, type BitkitOverflowTooltipProps, } from './BitkitOverflowTooltip/BitkitOverflowTooltip';
|
|
51
51
|
export { default as BitkitPageFooter, type BitkitPageFooterItemProps, type BitkitPageFooterProps, } from './BitkitPageFooter/BitkitPageFooter';
|
|
52
|
+
export { default as BitkitPageSidebar, type BitkitPageSidebarBodyProps, type BitkitPageSidebarDividerProps, type BitkitPageSidebarFooterProps, type BitkitPageSidebarGroupHeadingProps, type BitkitPageSidebarItemProps, type BitkitPageSidebarProjectProps, type BitkitPageSidebarProps, type BitkitPageSidebarTitleProps, } from './BitkitPageSidebar/BitkitPageSidebar';
|
|
52
53
|
export { default as BitkitPagination, type BitkitPaginationLabels, type BitkitPaginationProps, } from './BitkitPagination/BitkitPagination';
|
|
53
54
|
export { default as BitkitPaginationLoadMore, type BitkitPaginationLoadMoreProps, } from './BitkitPaginationLoadMore/BitkitPaginationLoadMore';
|
|
54
55
|
export { default as BitkitPopover, type BitkitPopoverProps } from './BitkitPopover/BitkitPopover';
|
|
@@ -66,7 +67,6 @@ export { default as BitkitSelectableTag, type BitkitSelectableTagItemProps, type
|
|
|
66
67
|
export { default as BitkitSelectMenu, type BitkitSelectMenuProps } from './BitkitSelectMenu/BitkitSelectMenu';
|
|
67
68
|
export { default as BitkitSelectMenuAction, type BitkitSelectMenuActionProps, } from './BitkitSelectMenu/BitkitSelectMenuAction';
|
|
68
69
|
export { default as BitkitSettingsCard, type BitkitSettingsCardContentProps, type BitkitSettingsCardProps, type BitkitSettingsCardStatusProps, } from './BitkitSettingsCard/BitkitSettingsCard';
|
|
69
|
-
export { default as BitkitSidebar, type BitkitSidebarFooterProps, type BitkitSidebarGroupHeadingProps, type BitkitSidebarItemProps, type BitkitSidebarProjectProps, type BitkitSidebarProps, type BitkitSidebarTitleProps, } from './BitkitSidebar/BitkitSidebar';
|
|
70
70
|
export { default as BitkitSkeletonGroup, type BitkitSkeletonGroupProps, } from './BitkitSkeletonGroup/BitkitSkeletonGroup';
|
|
71
71
|
export { default as BitkitSpinner, type BitkitSpinnerProps } from './BitkitSpinner/BitkitSpinner';
|
|
72
72
|
export { default as BitkitSplitButton, type BitkitSplitButtonProps } from './BitkitSplitButton/BitkitSplitButton';
|
package/dist/main.js
CHANGED
|
@@ -339,6 +339,7 @@ import BitkitNumberInput from "./components/BitkitNumberInput/BitkitNumberInput.
|
|
|
339
339
|
import BitkitOverflowContent from "./components/BitkitOverflowContent/BitkitOverflowContent.js";
|
|
340
340
|
import BitkitOverflowTooltip from "./components/BitkitOverflowTooltip/BitkitOverflowTooltip.js";
|
|
341
341
|
import BitkitPageFooter_default from "./components/BitkitPageFooter/BitkitPageFooter.js";
|
|
342
|
+
import BitkitPageSidebar_default from "./components/BitkitPageSidebar/BitkitPageSidebar.js";
|
|
342
343
|
import BitkitPagination from "./components/BitkitPagination/BitkitPagination.js";
|
|
343
344
|
import BitkitPaginationLoadMore from "./components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js";
|
|
344
345
|
import BitkitPopover from "./components/BitkitPopover/BitkitPopover.js";
|
|
@@ -355,7 +356,6 @@ import BitkitSegmentedControl_default from "./components/BitkitSegmentedControl/
|
|
|
355
356
|
import BitkitSelect_default from "./components/BitkitSelect/BitkitSelect.js";
|
|
356
357
|
import BitkitSelectableTag_default from "./components/BitkitSelectableTag/BitkitSelectableTag.js";
|
|
357
358
|
import BitkitSettingsCard_default from "./components/BitkitSettingsCard/BitkitSettingsCard.js";
|
|
358
|
-
import BitkitSidebar_default from "./components/BitkitSidebar/BitkitSidebar.js";
|
|
359
359
|
import BitkitSkeletonGroup from "./components/BitkitSkeletonGroup/BitkitSkeletonGroup.js";
|
|
360
360
|
import BitkitSpinner from "./components/BitkitSpinner/BitkitSpinner.js";
|
|
361
361
|
import BitkitSplitButton_default from "./components/BitkitSplitButton/BitkitSplitButton.js";
|
|
@@ -374,4 +374,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
|
|
|
374
374
|
import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
|
|
375
375
|
import bitkitTheme from "./theme/index.js";
|
|
376
376
|
import Provider from "./providers/BitkitProvider.js";
|
|
377
|
-
export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRadioItem, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard,
|
|
377
|
+
export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRadioItem, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, 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, IconBuildHub, IconBuildHubFilled, 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, IconFileYml, 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, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupHeading.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/GroupHeading.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst groupHeadingRecipe = defineSlotRecipe({\n className: 'group-heading',\n slots: ['root', 'titleBlock', 'icon', 'label', 'separator'],\n base: {\n root: {\n alignItems: 'center',\n display: 'flex',\n gap: '16',\n overflow: 'clip',\n paddingBlockEnd: '4',\n paddingBlockStart: '8',\n paddingInlineEnd: '8',\n },\n titleBlock: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n gap: '4',\n },\n icon: {\n color: 'icon/tertiary',\n flexShrink: 0,\n },\n label: {\n color: 'text/tertiary',\n flexShrink: 0,\n textStyle: 'heading/h6',\n },\n separator: {\n flex: 1,\n },\n },\n});\n\nexport default groupHeadingRecipe;\n"],"mappings":";;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAc;EAAQ;EAAS;CAAW;CAC1D,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,OAAO;GACP,YAAY;EACd;EACA,OAAO;GACL,OAAO;GACP,YAAY;GACZ,WAAW;EACb;EACA,WAAW,
|
|
1
|
+
{"version":3,"file":"GroupHeading.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/GroupHeading.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst groupHeadingRecipe = defineSlotRecipe({\n className: 'group-heading',\n slots: ['root', 'titleBlock', 'icon', 'label', 'separator'],\n base: {\n root: {\n alignItems: 'center',\n display: 'flex',\n gap: '16',\n overflow: 'clip',\n paddingBlockEnd: '4',\n paddingBlockStart: '8',\n paddingInlineEnd: '8',\n },\n titleBlock: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n gap: '4',\n },\n icon: {\n color: 'icon/tertiary',\n flexShrink: 0,\n },\n label: {\n color: 'text/tertiary',\n flexShrink: 0,\n textStyle: 'heading/h6',\n },\n separator: {\n // Lighter than the shared `Separator` recipe's `border/regular`, and that difference is in the\n // design: Figma's general Separator component (`62:701`) is `border/regular` #dfdae1, while the\n // Page sidebar's group header (`20014:6508`) draws its rule in `border/minimal` #efebef. A rule\n // that trails a label is quieter than one that stands alone.\n //\n // It sits here rather than in the sidebar so every group heading matches — the select menu's\n // group labels included. They render this same component, so a heading looks the same wherever\n // it appears instead of the sidebar owning a private variant.\n borderColor: 'border/minimal',\n flex: 1,\n },\n },\n});\n\nexport default groupHeadingRecipe;\n"],"mappings":";;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAc;EAAQ;EAAS;CAAW;CAC1D,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,OAAO;GACP,YAAY;EACd;EACA,OAAO;GACL,OAAO;GACP,YAAY;GACZ,WAAW;EACb;EACA,WAAW;GAST,aAAa;GACb,MAAM;EACR;CACF;AACF,CAAC"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
declare const pageSidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
|
|
2
|
+
hasBack: {
|
|
3
|
+
true: {
|
|
4
|
+
title: {
|
|
5
|
+
paddingBlockEnd: "8";
|
|
6
|
+
paddingInlineStart: "16";
|
|
7
|
+
};
|
|
8
|
+
titleBlock: {
|
|
9
|
+
gap: "4";
|
|
10
|
+
paddingBlock: "4";
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
false: {
|
|
14
|
+
title: {
|
|
15
|
+
paddingBlockEnd: "16";
|
|
16
|
+
paddingInlineStart: "24";
|
|
17
|
+
};
|
|
18
|
+
titleBlock: {
|
|
19
|
+
paddingBlock: "6";
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
isDisabled: {
|
|
24
|
+
true: {
|
|
25
|
+
item: {
|
|
26
|
+
cursor: "not-allowed";
|
|
27
|
+
_hover: {
|
|
28
|
+
background: "transparent";
|
|
29
|
+
_active: {
|
|
30
|
+
background: "transparent";
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
_active: {
|
|
34
|
+
background: "transparent";
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
itemIcon: {
|
|
38
|
+
color: "icon/disabled";
|
|
39
|
+
_groupHover: {
|
|
40
|
+
color: "icon/disabled";
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
itemLabel: {
|
|
44
|
+
color: "text/disabled";
|
|
45
|
+
};
|
|
46
|
+
suffixIcon: {
|
|
47
|
+
display: "none";
|
|
48
|
+
_groupHover: {
|
|
49
|
+
display: "none";
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
false: {};
|
|
54
|
+
};
|
|
55
|
+
selected: {
|
|
56
|
+
true: {
|
|
57
|
+
item: {
|
|
58
|
+
background: "background/selected";
|
|
59
|
+
_hover: {
|
|
60
|
+
background: "background/selected-hover";
|
|
61
|
+
_active: {
|
|
62
|
+
background: "background/selected-active";
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
_active: {
|
|
66
|
+
background: "background/selected-active";
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
itemIcon: {
|
|
70
|
+
color: "icon/interactive";
|
|
71
|
+
_groupHover: {
|
|
72
|
+
color: "icon/interactive-hover";
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
itemLabel: {
|
|
76
|
+
textStyle: "body/md/semibold";
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
false: {};
|
|
80
|
+
};
|
|
81
|
+
}>;
|
|
82
|
+
export default pageSidebarSlotRecipe;
|