@bitrise/bitkit-v2 0.3.395 → 0.3.397-beta.2552
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.d.ts +5 -0
- package/dist/components/BitkitControlButton/BitkitControlButton.js +4 -0
- package/dist/components/BitkitControlButton/BitkitControlButton.js.map +1 -1
- package/dist/components/BitkitIconButton/BitkitIconButton.d.ts +5 -0
- package/dist/components/BitkitIconButton/BitkitIconButton.js +5 -0
- package/dist/components/BitkitIconButton/BitkitIconButton.js.map +1 -1
- package/dist/components/BitkitPagination/BitkitPagination.js +1 -1
- package/dist/components/BitkitPagination/BitkitPagination.js.map +1 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js +0 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js.map +1 -1
- package/dist/components/BitkitToggleButton/BitkitToggleButton.d.ts +5 -0
- package/dist/components/BitkitToggleButton/BitkitToggleButton.js +3 -0
- package/dist/components/BitkitToggleButton/BitkitToggleButton.js.map +1 -1
- package/dist/utilities/opensPopup.d.ts +12 -0
- package/dist/utilities/opensPopup.js +17 -0
- package/dist/utilities/opensPopup.js.map +1 -0
- package/package.json +1 -1
|
@@ -8,6 +8,11 @@ interface BitkitControlButtonCommonProps {
|
|
|
8
8
|
label: string;
|
|
9
9
|
size?: ControlButtonSize;
|
|
10
10
|
state?: 'disabled' | 'skeleton';
|
|
11
|
+
/**
|
|
12
|
+
* Overrides for the label tooltip. It is off by default when this control opens a popup — a menu,
|
|
13
|
+
* select or popover trigger — where the panel is the affordance and a tooltip would hover over it.
|
|
14
|
+
* Pass `{ disabled: false }` to bring it back. The accessible name comes from `label` either way.
|
|
15
|
+
*/
|
|
11
16
|
tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;
|
|
12
17
|
}
|
|
13
18
|
export interface BitkitControlButtonAsButtonProps extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import BitkitLabelTooltip from "../BitkitLabelTooltip/BitkitLabelTooltip.js";
|
|
2
|
+
import opensPopup from "../../utilities/opensPopup.js";
|
|
2
3
|
import { chakra, useRecipe } from "@chakra-ui/react/styled-system";
|
|
3
4
|
import { forwardRef } from "react";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -11,6 +12,7 @@ var BitkitControlButton = forwardRef((props, ref) => {
|
|
|
11
12
|
const iconSize = size === "xxs" || size === "xs" ? "16" : "24";
|
|
12
13
|
const isDisabled = props.state === "disabled";
|
|
13
14
|
const isSkeleton = props.state === "skeleton";
|
|
15
|
+
const isPopupTrigger = opensPopup(props);
|
|
14
16
|
const inertOnClick = isDisabled || isSkeleton;
|
|
15
17
|
if (props.href !== void 0) {
|
|
16
18
|
const { href, icon: _icon, isDanger, isExternal, label, onClick, onKeyDown, rel, size: _size, state: _state, target, tooltipProps, ...anchorRest } = props;
|
|
@@ -28,6 +30,7 @@ var BitkitControlButton = forwardRef((props, ref) => {
|
|
|
28
30
|
} : onKeyDown;
|
|
29
31
|
return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
30
32
|
text: label,
|
|
33
|
+
disabled: isPopupTrigger,
|
|
31
34
|
...tooltipProps,
|
|
32
35
|
children: /* @__PURE__ */ jsx(chakra.a, {
|
|
33
36
|
ref,
|
|
@@ -53,6 +56,7 @@ var BitkitControlButton = forwardRef((props, ref) => {
|
|
|
53
56
|
const { icon: _icon, isDanger, label, size: _size, state, tooltipProps, ...buttonRest } = props;
|
|
54
57
|
return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
55
58
|
text: label,
|
|
59
|
+
disabled: isPopupTrigger,
|
|
56
60
|
...tooltipProps,
|
|
57
61
|
children: /* @__PURE__ */ jsx(chakra.button, {
|
|
58
62
|
ref,
|
|
@@ -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":"
|
|
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 opensPopup from '../../utilities/opensPopup';\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 /**\n * Overrides for the label tooltip. It is off by default when this control opens a popup — a menu,\n * select or popover trigger — where the panel is the affordance and a tooltip would hover over it.\n * Pass `{ disabled: false }` to bring it back. The accessible name comes from `label` either way.\n */\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 isPopupTrigger = opensPopup(props);\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} disabled={isPopupTrigger} {...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} disabled={isPopupTrigger} {...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":";;;;;;;AAyCA,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,iBAAiB,WAAW,KAAK;CACvC,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,UAAU;GAAgB,GAAI;GAC7D,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,UAAU;EAAgB,GAAI;EAC7D,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,UAAU,UAAU,cAAc,UAAU;GAC5C,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"}
|
|
@@ -7,6 +7,11 @@ type BitkitIconButtonOmittedFromButton = 'aria-label' | 'asChild' | 'children' |
|
|
|
7
7
|
interface BitkitIconButtonCommonProps {
|
|
8
8
|
icon: BitkitIconComponent;
|
|
9
9
|
label: string;
|
|
10
|
+
/**
|
|
11
|
+
* Overrides for the label tooltip. It is off by default when this control opens a popup — a menu,
|
|
12
|
+
* select or popover trigger — where the panel is the affordance and a tooltip would hover over it.
|
|
13
|
+
* Pass `{ disabled: false }` to bring it back. The accessible name comes from `label` either way.
|
|
14
|
+
*/
|
|
10
15
|
tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;
|
|
11
16
|
}
|
|
12
17
|
interface BitkitIconButtonAsButtonProps extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import BitkitLabelTooltip from "../BitkitLabelTooltip/BitkitLabelTooltip.js";
|
|
2
|
+
import opensPopup from "../../utilities/opensPopup.js";
|
|
2
3
|
import { chakra, useRecipe } from "@chakra-ui/react/styled-system";
|
|
3
4
|
import { Children, cloneElement, forwardRef } from "react";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -11,6 +12,7 @@ var BitkitIconButton = forwardRef((props, ref) => {
|
|
|
11
12
|
const iconSize = (props.size ?? "lg") === "lg" ? "24" : "16";
|
|
12
13
|
const isDisabled = props.state === "disabled";
|
|
13
14
|
const isSkeleton = props.state === "skeleton";
|
|
15
|
+
const isPopupTrigger = opensPopup(props);
|
|
14
16
|
if (props.asChild) {
|
|
15
17
|
const { asChild: _asChild, children, icon: _icon, label, state, tooltipProps, ...buttonRest } = props;
|
|
16
18
|
const onlyChild = Children.only(children);
|
|
@@ -25,6 +27,7 @@ var BitkitIconButton = forwardRef((props, ref) => {
|
|
|
25
27
|
});
|
|
26
28
|
return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
27
29
|
text: label,
|
|
30
|
+
disabled: isPopupTrigger,
|
|
28
31
|
...tooltipProps,
|
|
29
32
|
children: isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
|
|
30
33
|
asChild: true,
|
|
@@ -72,6 +75,7 @@ var BitkitIconButton = forwardRef((props, ref) => {
|
|
|
72
75
|
});
|
|
73
76
|
return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
74
77
|
text: label,
|
|
78
|
+
disabled: isPopupTrigger,
|
|
75
79
|
...tooltipProps,
|
|
76
80
|
children: isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
|
|
77
81
|
asChild: true,
|
|
@@ -83,6 +87,7 @@ var BitkitIconButton = forwardRef((props, ref) => {
|
|
|
83
87
|
const { icon: _icon, label, state, tooltipProps, ...buttonRest } = props;
|
|
84
88
|
return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
85
89
|
text: label,
|
|
90
|
+
disabled: isPopupTrigger,
|
|
86
91
|
...tooltipProps,
|
|
87
92
|
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
88
93
|
asChild: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitIconButton.js","names":[],"sources":["../../../lib/components/BitkitIconButton/BitkitIconButton.tsx"],"sourcesContent":["import { IconButton, type IconButtonProps } from '@chakra-ui/react/button';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport {\n Children,\n cloneElement,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n type Ref,\n} from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype BitkitIconButtonOmittedFromButton =\n | 'aria-label'\n | 'asChild'\n | 'children'\n | 'colorPalette'\n | 'disabled'\n | 'loading'\n | 'loadingText'\n | 'spinner'\n | 'spinnerPlacement';\n\ninterface BitkitIconButtonCommonProps {\n icon: BitkitIconComponent;\n label: string;\n tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\ninterface BitkitIconButtonAsButtonProps\n extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {\n asChild?: false;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\ninterface BitkitIconButtonAsAnchorProps\n extends\n BitkitIconButtonCommonProps,\n Omit<HTMLChakraProps<'a'>, 'aria-label' | 'children' | 'colorPalette'>,\n RecipeProps<'button'> {\n asChild?: false;\n href: string;\n isExternal?: boolean;\n state?: 'disabled' | 'skeleton';\n}\n\ninterface BitkitIconButtonAsChildProps\n extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {\n asChild: true;\n children: ReactElement;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\nexport type BitkitIconButtonProps =\n | BitkitIconButtonAsButtonProps\n | BitkitIconButtonAsAnchorProps\n | BitkitIconButtonAsChildProps;\n\n// The forwarded ref is typed as HTMLElement to cover all three modes (button, anchor, slot/asChild),\n// since asChild can render any element (router Link, custom wrappers, etc.). Inner narrow casts\n// satisfy the wrapped Chakra components without affecting the consumer-visible ref shape.\nconst BitkitIconButton = forwardRef<HTMLElement, BitkitIconButtonProps>((props, ref) => {\n const buttonRecipe = useRecipe({ key: 'button' });\n const Icon = props.icon;\n // An unset `size` reaches us as `undefined` — the `button` recipe's `lg` default lives in CSS,\n // not on the prop — so resolve it here rather than letting it fall to the 16px branch.\n const iconSize = (props.size ?? 'lg') === 'lg' ? '24' : '16';\n const isDisabled = props.state === 'disabled';\n const isSkeleton = props.state === 'skeleton';\n\n // --- Slot mode (asChild) ---\n if (props.asChild) {\n const { asChild: _asChild, children, icon: _icon, label, state, tooltipProps, ...buttonRest } = props;\n const onlyChild = Children.only(children) as ReactElement<{ 'aria-label'?: string }>;\n const iconButtonElement = (\n <IconButton\n asChild\n aria-label={label}\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n {cloneElement(onlyChild, { 'aria-label': onlyChild.props['aria-label'] ?? label }, <Icon size={iconSize} />)}\n </IconButton>\n );\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n {isSkeleton ? (\n <Skeleton asChild loading>\n {iconButtonElement}\n </Skeleton>\n ) : (\n iconButtonElement\n )}\n </BitkitLabelTooltip>\n );\n }\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n css,\n href,\n icon: _icon,\n isExternal,\n label,\n onClick,\n onKeyDown,\n rel,\n size,\n state: _state,\n target,\n tooltipProps,\n variant,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = isDisabled\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n const anchorElement = (\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...anchorRest}\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n css={[buttonRecipe({ size, variant }), { paddingBlock: 0, paddingInline: 0 }, css]}\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n <Icon size={iconSize} />\n </chakra.a>\n );\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n {isSkeleton ? (\n <Skeleton asChild loading>\n {anchorElement}\n </Skeleton>\n ) : (\n anchorElement\n )}\n </BitkitLabelTooltip>\n );\n }\n\n // --- Button mode (default) ---\n const { icon: _icon, label, state, tooltipProps, ...buttonRest } = props;\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n <Skeleton asChild loading={isSkeleton}>\n <IconButton\n aria-label={label}\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n <Icon size={iconSize} />\n </IconButton>\n </Skeleton>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitIconButton.displayName = 'BitkitIconButton';\n\nexport default BitkitIconButton;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BitkitIconButton.js","names":[],"sources":["../../../lib/components/BitkitIconButton/BitkitIconButton.tsx"],"sourcesContent":["import { IconButton, type IconButtonProps } from '@chakra-ui/react/button';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport {\n Children,\n cloneElement,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n type Ref,\n} from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport opensPopup from '../../utilities/opensPopup';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype BitkitIconButtonOmittedFromButton =\n | 'aria-label'\n | 'asChild'\n | 'children'\n | 'colorPalette'\n | 'disabled'\n | 'loading'\n | 'loadingText'\n | 'spinner'\n | 'spinnerPlacement';\n\ninterface BitkitIconButtonCommonProps {\n icon: BitkitIconComponent;\n label: string;\n /**\n * Overrides for the label tooltip. It is off by default when this control opens a popup — a menu,\n * select or popover trigger — where the panel is the affordance and a tooltip would hover over it.\n * Pass `{ disabled: false }` to bring it back. The accessible name comes from `label` either way.\n */\n tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\ninterface BitkitIconButtonAsButtonProps\n extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {\n asChild?: false;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\ninterface BitkitIconButtonAsAnchorProps\n extends\n BitkitIconButtonCommonProps,\n Omit<HTMLChakraProps<'a'>, 'aria-label' | 'children' | 'colorPalette'>,\n RecipeProps<'button'> {\n asChild?: false;\n href: string;\n isExternal?: boolean;\n state?: 'disabled' | 'skeleton';\n}\n\ninterface BitkitIconButtonAsChildProps\n extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {\n asChild: true;\n children: ReactElement;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\nexport type BitkitIconButtonProps =\n | BitkitIconButtonAsButtonProps\n | BitkitIconButtonAsAnchorProps\n | BitkitIconButtonAsChildProps;\n\n// The forwarded ref is typed as HTMLElement to cover all three modes (button, anchor, slot/asChild),\n// since asChild can render any element (router Link, custom wrappers, etc.). Inner narrow casts\n// satisfy the wrapped Chakra components without affecting the consumer-visible ref shape.\nconst BitkitIconButton = forwardRef<HTMLElement, BitkitIconButtonProps>((props, ref) => {\n const buttonRecipe = useRecipe({ key: 'button' });\n const Icon = props.icon;\n // An unset `size` reaches us as `undefined` — the `button` recipe's `lg` default lives in CSS,\n // not on the prop — so resolve it here rather than letting it fall to the 16px branch.\n const iconSize = (props.size ?? 'lg') === 'lg' ? '24' : '16';\n const isDisabled = props.state === 'disabled';\n const isSkeleton = props.state === 'skeleton';\n const isPopupTrigger = opensPopup(props);\n\n // --- Slot mode (asChild) ---\n if (props.asChild) {\n const { asChild: _asChild, children, icon: _icon, label, state, tooltipProps, ...buttonRest } = props;\n const onlyChild = Children.only(children) as ReactElement<{ 'aria-label'?: string }>;\n const iconButtonElement = (\n <IconButton\n asChild\n aria-label={label}\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n {cloneElement(onlyChild, { 'aria-label': onlyChild.props['aria-label'] ?? label }, <Icon size={iconSize} />)}\n </IconButton>\n );\n return (\n <BitkitLabelTooltip text={label} disabled={isPopupTrigger} {...tooltipProps}>\n {isSkeleton ? (\n <Skeleton asChild loading>\n {iconButtonElement}\n </Skeleton>\n ) : (\n iconButtonElement\n )}\n </BitkitLabelTooltip>\n );\n }\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n css,\n href,\n icon: _icon,\n isExternal,\n label,\n onClick,\n onKeyDown,\n rel,\n size,\n state: _state,\n target,\n tooltipProps,\n variant,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = isDisabled\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n const anchorElement = (\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...anchorRest}\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n css={[buttonRecipe({ size, variant }), { paddingBlock: 0, paddingInline: 0 }, css]}\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n <Icon size={iconSize} />\n </chakra.a>\n );\n return (\n <BitkitLabelTooltip text={label} disabled={isPopupTrigger} {...tooltipProps}>\n {isSkeleton ? (\n <Skeleton asChild loading>\n {anchorElement}\n </Skeleton>\n ) : (\n anchorElement\n )}\n </BitkitLabelTooltip>\n );\n }\n\n // --- Button mode (default) ---\n const { icon: _icon, label, state, tooltipProps, ...buttonRest } = props;\n return (\n <BitkitLabelTooltip text={label} disabled={isPopupTrigger} {...tooltipProps}>\n <Skeleton asChild loading={isSkeleton}>\n <IconButton\n aria-label={label}\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n <Icon size={iconSize} />\n </IconButton>\n </Skeleton>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitIconButton.displayName = 'BitkitIconButton';\n\nexport default BitkitIconButton;\n"],"mappings":";;;;;;;;AA2EA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,eAAe,UAAU,EAAE,KAAK,SAAS,CAAC;CAChD,MAAM,OAAO,MAAM;CAGnB,MAAM,YAAY,MAAM,QAAQ,UAAU,OAAO,OAAO;CACxD,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,iBAAiB,WAAW,KAAK;CAGvC,IAAI,MAAM,SAAS;EACjB,MAAM,EAAE,SAAS,UAAU,UAAU,MAAM,OAAO,OAAO,OAAO,cAAc,GAAG,eAAe;EAChG,MAAM,YAAY,SAAS,KAAK,QAAQ;EACxC,MAAM,oBACJ,oBAAC,YAAD;GACE,SAAA;GACA,cAAY;GACZ,UAAU;GACV,SAAS,UAAU;GACd;GACL,GAAI;GAEH,UAAA,aAAa,WAAW,EAAE,cAAc,UAAU,MAAM,iBAAiB,MAAM,GAAG,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,CAAC;EACjG,CAAA;EAEd,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,UAAU;GAAgB,GAAI;GAC5D,UAAA,aACC,oBAAC,UAAD;IAAU,SAAA;IAAQ,SAAA;IACf,UAAA;GACO,CAAA,IAEV;EAEgB,CAAA;CAExB;CAGA,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,KACA,MACA,MAAM,OACN,YACA,OACA,SACA,WACA,KACA,MACA,OAAO,QACP,QACA,cACA,SACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,cACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,cACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,MAAM,gBACJ,oBAAC,OAAO,GAAR;GACO;GACL,GAAI;GACJ,iBAAe,cAAc,KAAA;GAC7B,cAAY;GACZ,KAAK;IAAC,aAAa;KAAE;KAAM;IAAQ,CAAC;IAAG;KAAE,cAAc;KAAG,eAAe;IAAE;IAAG;GAAG;GACjF,MAAM,aAAa,KAAA,IAAY;GAC/B,SAAS;GACT,WAAW;GACX,KAAK;GACL,QAAQ;GAER,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;EACf,CAAA;EAEZ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,UAAU;GAAgB,GAAI;GAC5D,UAAA,aACC,oBAAC,UAAD;IAAU,SAAA;IAAQ,SAAA;IACf,UAAA;GACO,CAAA,IAEV;EAEgB,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,OAAO,OAAO,cAAc,GAAG,eAAe;CACnE,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,UAAU;EAAgB,GAAI;EAC7D,UAAA,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAS;GACzB,UAAA,oBAAC,YAAD;IACE,cAAY;IACZ,UAAU;IACV,SAAS,UAAU;IACd;IACL,GAAI;IAEJ,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACb,CAAA;EACJ,CAAA;CACQ,CAAA;AAExB,CAAC;AAED,iBAAiB,cAAc"}
|
|
@@ -32,7 +32,7 @@ var BitkitPagination = forwardRef((props, ref) => {
|
|
|
32
32
|
const isFirstPage = safePage <= 1;
|
|
33
33
|
const isLastPage = safePage >= totalPages;
|
|
34
34
|
const isSkeleton = state === "skeleton";
|
|
35
|
-
const showItemsPerPage = variant !== "card";
|
|
35
|
+
const showItemsPerPage = variant !== "card" && onPageSizeChange !== void 0;
|
|
36
36
|
const values = {
|
|
37
37
|
end,
|
|
38
38
|
start,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport formatLabel from '../../utilities/formatLabel';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n items?: string;\n itemsPerPage?: string;\n nextPage?: string;\n pages?: string;\n previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n items: '{start}\\u2013{end} of {total} items',\n itemsPerPage: 'Items per page:',\n nextPage: 'Next page',\n pages: 'of {totalPages} pages',\n previousPage: 'Previous page',\n};\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n labels?: BitkitPaginationLabels;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n page: number;\n pageSize: number;\n pageSizeOptions?: number[];\n state?: 'skeleton';\n totalItems: number;\n variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n const {\n labels: labelsProp,\n onPageChange,\n onPageSizeChange,\n page,\n pageSize,\n pageSizeOptions = [10, 25, 50],\n state,\n totalItems,\n variant = 'table',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'pagination' });\n const styles = recipe({ variant });\n\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const safePage = Math.min(Math.max(1, page), totalPages);\n const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n const end = Math.min(safePage * safePageSize, totalItems);\n const isFirstPage = safePage <= 1;\n const isLastPage = safePage >= totalPages;\n const isSkeleton = state === 'skeleton';\n const showItemsPerPage = variant !== 'card';\n\n const values = { end, start, total: totalItems, totalPages };\n const labels = Object.fromEntries(\n Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n ) as Required<BitkitPaginationLabels>;\n\n const pageSizeItems = useMemo(\n () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n [pageSizeOptions],\n );\n\n const pageItems = useMemo(\n () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n [totalPages],\n );\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.itemsBlock}>\n {showItemsPerPage && (\n <>\n <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n <BitkitNativeSelect\n css={styles.itemsSelect}\n onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePageSize)}\n >\n {pageSizeItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n </>\n )}\n {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n </chakra.div>\n\n <chakra.div css={styles.pageBlock}>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n <BitkitNativeSelect\n css={styles.pageSelect}\n onChange={(e) => onPageChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePage)}\n >\n {pageItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n <BitkitIconButton\n icon={IconChevronLeft}\n label={labels.previousPage}\n marginInlineStart=\"8\"\n onClick={() => onPageChange?.(safePage - 1)}\n size=\"md\"\n state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n <BitkitIconButton\n icon={IconChevronRight}\n label={labels.nextPage}\n onClick={() => onPageChange?.(safePage + 1)}\n size=\"md\"\n state={isLastPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n </chakra.div>\n </Box>\n );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAM,iBAAmD;CACvD,OAAO;CACP,cAAc;CACd,UAAU;CACV,OAAO;CACP,cAAc;AAChB;AAcA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EACJ,QAAQ,YACR,cACA,kBACA,MACA,UACA,kBAAkB;EAAC;EAAI;EAAI;CAAE,GAC7B,OACA,YACA,UAAU,SACV,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO,EAAE,QAAQ,CAAC;CAEjC,MAAM,eAAe,KAAK,IAAI,GAAG,QAAQ;CACzC,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,aAAa,YAAY,CAAC;CACnE,MAAM,WAAW,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,UAAU;CACvD,MAAM,QAAQ,eAAe,IAAI,KAAK,WAAW,KAAK,eAAe;CACrE,MAAM,MAAM,KAAK,IAAI,WAAW,cAAc,UAAU;CACxD,MAAM,cAAc,YAAY;CAChC,MAAM,aAAa,YAAY;CAC/B,MAAM,aAAa,UAAU;CAC7B,MAAM,mBAAmB,YAAY;
|
|
1
|
+
{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport formatLabel from '../../utilities/formatLabel';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n items?: string;\n itemsPerPage?: string;\n nextPage?: string;\n pages?: string;\n previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n items: '{start}\\u2013{end} of {total} items',\n itemsPerPage: 'Items per page:',\n nextPage: 'Next page',\n pages: 'of {totalPages} pages',\n previousPage: 'Previous page',\n};\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n labels?: BitkitPaginationLabels;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n page: number;\n pageSize: number;\n pageSizeOptions?: number[];\n state?: 'skeleton';\n totalItems: number;\n variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n const {\n labels: labelsProp,\n onPageChange,\n onPageSizeChange,\n page,\n pageSize,\n pageSizeOptions = [10, 25, 50],\n state,\n totalItems,\n variant = 'table',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'pagination' });\n const styles = recipe({ variant });\n\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const safePage = Math.min(Math.max(1, page), totalPages);\n const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n const end = Math.min(safePage * safePageSize, totalItems);\n const isFirstPage = safePage <= 1;\n const isLastPage = safePage >= totalPages;\n const isSkeleton = state === 'skeleton';\n const showItemsPerPage = variant !== 'card' && onPageSizeChange !== undefined;\n\n const values = { end, start, total: totalItems, totalPages };\n const labels = Object.fromEntries(\n Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n ) as Required<BitkitPaginationLabels>;\n\n const pageSizeItems = useMemo(\n () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n [pageSizeOptions],\n );\n\n const pageItems = useMemo(\n () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n [totalPages],\n );\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.itemsBlock}>\n {showItemsPerPage && (\n <>\n <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n <BitkitNativeSelect\n css={styles.itemsSelect}\n onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePageSize)}\n >\n {pageSizeItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n </>\n )}\n {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n </chakra.div>\n\n <chakra.div css={styles.pageBlock}>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n <BitkitNativeSelect\n css={styles.pageSelect}\n onChange={(e) => onPageChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePage)}\n >\n {pageItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n <BitkitIconButton\n icon={IconChevronLeft}\n label={labels.previousPage}\n marginInlineStart=\"8\"\n onClick={() => onPageChange?.(safePage - 1)}\n size=\"md\"\n state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n <BitkitIconButton\n icon={IconChevronRight}\n label={labels.nextPage}\n onClick={() => onPageChange?.(safePage + 1)}\n size=\"md\"\n state={isLastPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n </chakra.div>\n </Box>\n );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAM,iBAAmD;CACvD,OAAO;CACP,cAAc;CACd,UAAU;CACV,OAAO;CACP,cAAc;AAChB;AAcA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EACJ,QAAQ,YACR,cACA,kBACA,MACA,UACA,kBAAkB;EAAC;EAAI;EAAI;CAAE,GAC7B,OACA,YACA,UAAU,SACV,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO,EAAE,QAAQ,CAAC;CAEjC,MAAM,eAAe,KAAK,IAAI,GAAG,QAAQ;CACzC,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,aAAa,YAAY,CAAC;CACnE,MAAM,WAAW,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,UAAU;CACvD,MAAM,QAAQ,eAAe,IAAI,KAAK,WAAW,KAAK,eAAe;CACrE,MAAM,MAAM,KAAK,IAAI,WAAW,cAAc,UAAU;CACxD,MAAM,cAAc,YAAY;CAChC,MAAM,aAAa,YAAY;CAC/B,MAAM,aAAa,UAAU;CAC7B,MAAM,mBAAmB,YAAY,UAAU,qBAAqB,KAAA;CAEpE,MAAM,SAAS;EAAE;EAAK;EAAO,OAAO;EAAY;CAAW;CAC3D,MAAM,SAAS,OAAO,YACpB,OAAO,QAAQ;EAAE,GAAG;EAAgB,GAAG;CAAW,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC,CAClG;CAEA,MAAM,gBAAgB,cACd,gBAAgB,KAAK,SAAS;EAAE,OAAO,OAAO,GAAG;EAAG,OAAO,OAAO,GAAG;CAAE,EAAE,GAC/E,CAAC,eAAe,CAClB;CAEA,MAAM,YAAY,cACV,MAAM,KAAK,EAAE,QAAQ,WAAW,IAAI,GAAG,OAAO;EAAE,OAAO,OAAO,IAAI,CAAC;EAAG,OAAO,OAAO,IAAI,CAAC;CAAE,EAAE,GACnG,CAAC,UAAU,CACb;CAEA,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACG,oBACC,qBAAA,YAAA,EAAA,UAAA;IACE,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAO,UAAA,OAAO;IAA0B,CAAA;IACjE,oBAAC,oBAAD;KACE,KAAK,OAAO;KACZ,WAAW,MAAM,mBAAmB,OAAO,EAAE,OAAO,KAAK,CAAC;KAC1D,MAAK;KACL,OAAO,aAAa,aAAa,KAAA;KACjC,OAAO,OAAO,YAAY;KAEzB,UAAA,cAAc,KAAK,QAClB,oBAAC,UAAD;MAAwB,OAAO,IAAI;MAChC,UAAA,IAAI;KACC,GAFK,IAAI,KAET,CACT;IACiB,CAAA;IACpB,oBAAC,WAAD;KAAW,WAAU;KAAU,aAAY;KAAiB,cAAa;KAAI,aAAY;IAAY,CAAA;GACrG,EAAA,CAAA,GAEH,aAAa,oBAAC,UAAD;IAAU,QAAO;IAAK,OAAM;GAAM,CAAA,IAAI,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAO,UAAA,OAAO;GAAmB,CAAA,CACpG;EAEZ,CAAA,GAAA,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA;IACE,oBAAC,WAAD;KAAW,WAAU;KAAU,aAAY;KAAiB,cAAa;KAAI,aAAY;IAAY,CAAA;IACrG,oBAAC,oBAAD;KACE,KAAK,OAAO;KACZ,WAAW,MAAM,eAAe,OAAO,EAAE,OAAO,KAAK,CAAC;KACtD,MAAK;KACL,OAAO,aAAa,aAAa,KAAA;KACjC,OAAO,OAAO,QAAQ;KAErB,UAAA,UAAU,KAAK,QACd,oBAAC,UAAD;MAAwB,OAAO,IAAI;MAChC,UAAA,IAAI;KACC,GAFK,IAAI,KAET,CACT;IACiB,CAAA;IACnB,aAAa,oBAAC,UAAD;KAAU,QAAO;KAAK,OAAM;IAAM,CAAA,IAAI,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAO,UAAA,OAAO;IAAmB,CAAA;IAC9G,oBAAC,kBAAD;KACE,MAAM;KACN,OAAO,OAAO;KACd,mBAAkB;KAClB,eAAe,eAAe,WAAW,CAAC;KAC1C,MAAK;KACL,OAAO,eAAe,aAAa,aAAa,KAAA;KAChD,SAAQ;IACT,CAAA;IACD,oBAAC,kBAAD;KACE,MAAM;KACN,OAAO,OAAO;KACd,eAAe,eAAe,WAAW,CAAC;KAC1C,MAAK;KACL,OAAO,cAAc,aAAa,aAAa,KAAA;KAC/C,SAAQ;IACT,CAAA;GACS;EACT,CAAA,CAAA;;AAET,CAAC;AAED,iBAAiB,cAAc"}
|
|
@@ -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, 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 { forwardRef, isValidElement, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitButton, {\n type BitkitButtonAsAnchorProps,\n type BitkitButtonAsButtonProps,\n} 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 ---\n// Split-button action can be a button (default) or anchor (when href is set). asChild is intentionally\n// not part of the API — routing-library elements don't fit cleanly into the Group attached layout.\n// The forwarded ref is HTMLElement so it covers both <button> and <a>.\ntype BitkitSplitButtonActionProps = Omit<\n BitkitButtonAsButtonProps | BitkitButtonAsAnchorProps,\n 'size' | 'variant' | 'state'\n>;\n\nconst BitkitSplitButtonAction = forwardRef<HTMLElement, BitkitSplitButtonActionProps>((props, ref) => {\n const { size, state, styles, variant } = useSplitButtonContext();\n\n if (props.href !== undefined) {\n // Anchor branch: BitkitButton's anchor variant doesn't allow state=\"loading\". Coerce to \"disabled\"\n // so a SplitButton-wide loading state still surfaces visually on a link-mode action.\n return (\n <BitkitButton\n {...(props as BitkitButtonAsAnchorProps)}\n css={styles.action}\n ref={ref}\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n variant={variant}\n />\n );\n }\n\n return (\n <BitkitButton\n {...(props as BitkitButtonAsButtonProps)}\n css={styles.action}\n ref={ref}\n size={size}\n state={state}\n variant={variant}\n />\n );\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 = flattenChildren(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\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
|
|
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 { forwardRef, isValidElement, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitButton, {\n type BitkitButtonAsAnchorProps,\n type BitkitButtonAsButtonProps,\n} 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 ---\n// Split-button action can be a button (default) or anchor (when href is set). asChild is intentionally\n// not part of the API — routing-library elements don't fit cleanly into the Group attached layout.\n// The forwarded ref is HTMLElement so it covers both <button> and <a>.\ntype BitkitSplitButtonActionProps = Omit<\n BitkitButtonAsButtonProps | BitkitButtonAsAnchorProps,\n 'size' | 'variant' | 'state'\n>;\n\nconst BitkitSplitButtonAction = forwardRef<HTMLElement, BitkitSplitButtonActionProps>((props, ref) => {\n const { size, state, styles, variant } = useSplitButtonContext();\n\n if (props.href !== undefined) {\n // Anchor branch: BitkitButton's anchor variant doesn't allow state=\"loading\". Coerce to \"disabled\"\n // so a SplitButton-wide loading state still surfaces visually on a link-mode action.\n return (\n <BitkitButton\n {...(props as BitkitButtonAsAnchorProps)}\n css={styles.action}\n ref={ref}\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n variant={variant}\n />\n );\n }\n\n return (\n <BitkitButton\n {...(props as BitkitButtonAsButtonProps)}\n css={styles.action}\n ref={ref}\n size={size}\n state={state}\n variant={variant}\n />\n );\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 = flattenChildren(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\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>\n </Group>\n </Skeleton>\n </SplitButtonProvider>\n );\n});\nBitkitSplitButton.displayName = 'BitkitSplitButton';\n\nexport default withSubComponents(BitkitSplitButton, {\n Action: BitkitSplitButtonAction,\n Group: BitkitActionMenu.Group,\n Item: BitkitActionMenu.Item,\n Separator: BitkitActionMenu.Separator,\n});\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAM,qBAAqB,UAA4C;CACrE,OAAO,eAAe,KAAK,KAAK,MAAM,SAAS;AACjD;AAEA,IAAM,mBAAmB,UAA4C;CACnE,OACE,eAAe,KAAK,MACnB,MAAM,SAAS,yBAAiB,SAC/B,MAAM,SAAS,yBAAiB,QAChC,MAAM,SAAS,yBAAiB;AAEtC;AAUA,IAAM,CAAC,qBAAqB,yBAAyB,gBAAkC;CACrF,MAAM;CACN,UAAU;CACV,cAAc;AAChB,CAAC;AAWD,IAAM,0BAA0B,YAAuD,OAAO,QAAQ;CACpG,MAAM,EAAE,MAAM,OAAO,QAAQ,YAAY,sBAAsB;CAE/D,IAAI,MAAM,SAAS,KAAA,GAGjB,OACE,oBAAC,cAAD;EACE,GAAK;EACL,KAAK,OAAO;EACP;EACC;EACN,OAAO,UAAU,YAAY,aAAa;EACjC;CACV,CAAA;CAIL,OACE,oBAAC,cAAD;EACE,GAAK;EACL,KAAK,OAAO;EACP;EACC;EACC;EACE;CACV,CAAA;AAEL,CAAC;AAED,wBAAwB,cAAc;AAWtC,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EAAE,UAAU,OAAO,MAAM,OAAO,UAAU,WAAW,GAAG,SAAS;CAEvE,MAAM,aAAa,gBAAgB,QAAQ;CAC3C,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,CAAA,CAAO,EAAE,QAAQ,CAAC;CAEjC,OACE,oBAAC,qBAAD;EAAqB,OAAO;GAAE;GAAM;GAAO;GAAQ;EAAQ;EACzD,UAAA,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAS,UAAU;GACnC,UAAA,qBAAC,OAAD;IAAY;IAAK,GAAI;IAAM,UAAA;IAAS,SAAQ;IAA5C,UAAA,CACG,aACD,oBAAC,0BAAD;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;KAEtC,UAAA;IACe,CAAA,CACb;;EACC,CAAA;CACS,CAAA;AAEzB,CAAC;AACD,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,kBAAkB,mBAAmB;CAClD,QAAQ;CACR,OAAO,yBAAiB;CACxB,MAAM,yBAAiB;CACvB,WAAW,yBAAiB;AAC9B,CAAC"}
|
|
@@ -7,6 +7,11 @@ export interface BitkitToggleButtonProps extends Omit<HTMLChakraProps<'button'>,
|
|
|
7
7
|
size?: 'sm' | 'md' | 'lg';
|
|
8
8
|
state?: 'disabled' | 'skeleton';
|
|
9
9
|
isSelected?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Overrides for the label tooltip. It is off by default when this control opens a popup — a menu,
|
|
12
|
+
* select or popover trigger — where the panel is the affordance and a tooltip would hover over it.
|
|
13
|
+
* Pass `{ disabled: false }` to bring it back. The accessible name comes from `label` either way.
|
|
14
|
+
*/
|
|
10
15
|
tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;
|
|
11
16
|
defaultSelected?: boolean;
|
|
12
17
|
onSelectedChange?: (selected: boolean) => void;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import BitkitLabelTooltip from "../BitkitLabelTooltip/BitkitLabelTooltip.js";
|
|
2
|
+
import opensPopup from "../../utilities/opensPopup.js";
|
|
2
3
|
import { chakra, useRecipe } from "@chakra-ui/react/styled-system";
|
|
3
4
|
import { forwardRef } from "react";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -9,8 +10,10 @@ var BitkitToggleButton = forwardRef((props, ref) => {
|
|
|
9
10
|
const { icon: Icon, label, size = "md", state, isSelected, tooltipProps, defaultSelected, onSelectedChange, css, ...rest } = props;
|
|
10
11
|
const recipe = useRecipe({ key: "toggleButton" });
|
|
11
12
|
const iconSize = size === "lg" ? "24" : "16";
|
|
13
|
+
const isPopupTrigger = opensPopup(props);
|
|
12
14
|
return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
13
15
|
text: label,
|
|
16
|
+
disabled: isPopupTrigger,
|
|
14
17
|
...tooltipProps,
|
|
15
18
|
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
16
19
|
loading: state === "skeleton",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitToggleButton.js","names":[],"sources":["../../../lib/components/BitkitToggleButton/BitkitToggleButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Toggle } from '@chakra-ui/react/toggle';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitToggleButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n icon: BitkitIconComponent;\n label: string;\n size?: 'sm' | 'md' | 'lg';\n state?: 'disabled' | 'skeleton';\n isSelected?: boolean;\n tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n defaultSelected?: boolean;\n onSelectedChange?: (selected: boolean) => void;\n}\n\nconst BitkitToggleButton = forwardRef<HTMLButtonElement, BitkitToggleButtonProps>((props, ref) => {\n const {\n icon: Icon,\n label,\n size = 'md',\n state,\n isSelected,\n tooltipProps,\n defaultSelected,\n onSelectedChange,\n css,\n ...rest\n } = props;\n\n const recipe = useRecipe({ key: 'toggleButton' });\n const iconSize = size === 'lg' ? '24' : '16';\n\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n <Skeleton loading={state === 'skeleton'} borderRadius=\"4\" width=\"fit-content\">\n <Toggle.Root\n asChild\n disabled={state === 'disabled'}\n defaultPressed={defaultSelected}\n onPressedChange={onSelectedChange}\n pressed={isSelected}\n >\n <chakra.button ref={ref} aria-label={label} {...rest} css={[recipe({ size }), css]}>\n <Icon size={iconSize} />\n </chakra.button>\n </Toggle.Root>\n </Skeleton>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitToggleButton.displayName = 'BitkitToggleButton';\n\nexport default BitkitToggleButton;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BitkitToggleButton.js","names":[],"sources":["../../../lib/components/BitkitToggleButton/BitkitToggleButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Toggle } from '@chakra-ui/react/toggle';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport opensPopup from '../../utilities/opensPopup';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitToggleButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n icon: BitkitIconComponent;\n label: string;\n size?: 'sm' | 'md' | 'lg';\n state?: 'disabled' | 'skeleton';\n isSelected?: boolean;\n /**\n * Overrides for the label tooltip. It is off by default when this control opens a popup — a menu,\n * select or popover trigger — where the panel is the affordance and a tooltip would hover over it.\n * Pass `{ disabled: false }` to bring it back. The accessible name comes from `label` either way.\n */\n tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n defaultSelected?: boolean;\n onSelectedChange?: (selected: boolean) => void;\n}\n\nconst BitkitToggleButton = forwardRef<HTMLButtonElement, BitkitToggleButtonProps>((props, ref) => {\n const {\n icon: Icon,\n label,\n size = 'md',\n state,\n isSelected,\n tooltipProps,\n defaultSelected,\n onSelectedChange,\n css,\n ...rest\n } = props;\n\n const recipe = useRecipe({ key: 'toggleButton' });\n const iconSize = size === 'lg' ? '24' : '16';\n const isPopupTrigger = opensPopup(props);\n\n return (\n <BitkitLabelTooltip text={label} disabled={isPopupTrigger} {...tooltipProps}>\n <Skeleton loading={state === 'skeleton'} borderRadius=\"4\" width=\"fit-content\">\n <Toggle.Root\n asChild\n disabled={state === 'disabled'}\n defaultPressed={defaultSelected}\n onPressedChange={onSelectedChange}\n pressed={isSelected}\n >\n <chakra.button ref={ref} aria-label={label} {...rest} css={[recipe({ size }), css]}>\n <Icon size={iconSize} />\n </chakra.button>\n </Toggle.Root>\n </Skeleton>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitToggleButton.displayName = 'BitkitToggleButton';\n\nexport default BitkitToggleButton;\n"],"mappings":";;;;;;;;AAyBA,IAAM,qBAAqB,YAAwD,OAAO,QAAQ;CAChG,MAAM,EACJ,MAAM,MACN,OACA,OAAO,MACP,OACA,YACA,cACA,iBACA,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,SAAS,UAAU,EAAE,KAAK,eAAe,CAAC;CAChD,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,iBAAiB,WAAW,KAAK;CAEvC,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,UAAU;EAAgB,GAAI;EAC7D,UAAA,oBAAC,UAAD;GAAU,SAAS,UAAU;GAAY,cAAa;GAAI,OAAM;GAC9D,UAAA,oBAAC,OAAO,MAAR;IACE,SAAA;IACA,UAAU,UAAU;IACpB,gBAAgB;IAChB,iBAAiB;IACjB,SAAS;IAET,UAAA,oBAAC,OAAO,QAAR;KAAoB;KAAK,cAAY;KAAO,GAAI;KAAM,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,GAAG;KAC/E,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACV,CAAA;GACJ,CAAA;EACL,CAAA;CACQ,CAAA;AAExB,CAAC;AAED,mBAAmB,cAAc"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Whether these props belong to a control that opens a popup — a menu, select, combobox or popover
|
|
3
|
+
* trigger. A trigger rendered through `asChild` gets the popup's ARIA props, so `aria-haspopup` is
|
|
4
|
+
* the control's own signal.
|
|
5
|
+
*
|
|
6
|
+
* Not `!!value`: React renders `aria-*` booleans as strings rather than dropping them, so an
|
|
7
|
+
* explicit `aria-haspopup={false}` arrives here as `false` and leaves as `"false"` — both mean no.
|
|
8
|
+
*/
|
|
9
|
+
declare const opensPopup: (props: {
|
|
10
|
+
"aria-haspopup"?: boolean | string;
|
|
11
|
+
}) => boolean;
|
|
12
|
+
export default opensPopup;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
//#region lib/utilities/opensPopup.ts
|
|
2
|
+
/**
|
|
3
|
+
* Whether these props belong to a control that opens a popup — a menu, select, combobox or popover
|
|
4
|
+
* trigger. A trigger rendered through `asChild` gets the popup's ARIA props, so `aria-haspopup` is
|
|
5
|
+
* the control's own signal.
|
|
6
|
+
*
|
|
7
|
+
* Not `!!value`: React renders `aria-*` booleans as strings rather than dropping them, so an
|
|
8
|
+
* explicit `aria-haspopup={false}` arrives here as `false` and leaves as `"false"` — both mean no.
|
|
9
|
+
*/
|
|
10
|
+
var opensPopup = (props) => {
|
|
11
|
+
const value = props["aria-haspopup"];
|
|
12
|
+
return value !== void 0 && value !== false && value !== "false";
|
|
13
|
+
};
|
|
14
|
+
//#endregion
|
|
15
|
+
export { opensPopup as default };
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=opensPopup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"opensPopup.js","names":[],"sources":["../../lib/utilities/opensPopup.ts"],"sourcesContent":["/**\n * Whether these props belong to a control that opens a popup — a menu, select, combobox or popover\n * trigger. A trigger rendered through `asChild` gets the popup's ARIA props, so `aria-haspopup` is\n * the control's own signal.\n *\n * Not `!!value`: React renders `aria-*` booleans as strings rather than dropping them, so an\n * explicit `aria-haspopup={false}` arrives here as `false` and leaves as `\"false\"` — both mean no.\n */\nconst opensPopup = (props: { 'aria-haspopup'?: boolean | string }): boolean => {\n const value = props['aria-haspopup'];\n return value !== undefined && value !== false && value !== 'false';\n};\n\nexport default opensPopup;\n"],"mappings":";;;;;;;;;AAQA,IAAM,cAAc,UAA2D;CAC7E,MAAM,QAAQ,MAAM;CACpB,OAAO,UAAU,KAAA,KAAa,UAAU,SAAS,UAAU;AAC7D"}
|