@bitrise/bitkit-v2 0.3.386-beta.2467 → 0.3.386-beta.2468
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.
|
@@ -5,6 +5,13 @@ import { BitkitIconComponent } from '../../icons';
|
|
|
5
5
|
export interface BitkitRowAction {
|
|
6
6
|
/** Renders the action in the danger color set. */
|
|
7
7
|
danger?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Why the action is unavailable, shown in a tooltip on the inline button while `state` is
|
|
10
|
+
* `disabled`. It explains the state, so it replaces the button's label tooltip rather than
|
|
11
|
+
* competing with it. An action collapsed into the menu ignores it — a disabled menu item is out
|
|
12
|
+
* of the menu's keyboard navigation, so a tooltip there would only ever reach the pointer.
|
|
13
|
+
*/
|
|
14
|
+
disabledTooltip?: string;
|
|
8
15
|
/** Makes the action a link instead of a button. */
|
|
9
16
|
href?: string;
|
|
10
17
|
icon: BitkitIconComponent;
|
|
@@ -34,12 +41,21 @@ export interface BitkitRowActionsCellProps extends Omit<Table.CellProps, 'childr
|
|
|
34
41
|
* action menu, so the column width stays predictable. Clicks are kept inside the cell, so the
|
|
35
42
|
* actions work in a `BitkitLinkedRow` without triggering the row link.
|
|
36
43
|
*
|
|
44
|
+
* A `disabled` action can say why through `disabledTooltip` — the inline button gets a focusable
|
|
45
|
+
* wrapper for it, so hovering *and* tabbing to it both reach the explanation.
|
|
46
|
+
*
|
|
37
47
|
* @example
|
|
38
48
|
* ```tsx
|
|
39
49
|
* <BitkitRowActionsCell
|
|
40
50
|
* actions={[
|
|
41
51
|
* { icon: IconPencil, label: 'Edit', onClick: onEdit },
|
|
42
|
-
* {
|
|
52
|
+
* {
|
|
53
|
+
* danger: true,
|
|
54
|
+
* disabledTooltip: 'Only an admin can remove a project.',
|
|
55
|
+
* icon: IconMinusCircle,
|
|
56
|
+
* label: 'Remove',
|
|
57
|
+
* state: 'disabled',
|
|
58
|
+
* },
|
|
43
59
|
* ]}
|
|
44
60
|
* />
|
|
45
61
|
* ```
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import IconMoreVertical from "../../icons/IconMoreVertical.js";
|
|
2
2
|
import BitkitActionMenu_default from "../BitkitActionMenu/BitkitActionMenu.js";
|
|
3
3
|
import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
|
|
4
|
+
import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
|
|
4
5
|
import { Box } from "@chakra-ui/react/box";
|
|
5
6
|
import { forwardRef } from "react";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -8,21 +9,30 @@ import { Table, useTableStyles } from "@chakra-ui/react/table";
|
|
|
8
9
|
//#region lib/components/BitkitTable/BitkitRowActionsCell.tsx
|
|
9
10
|
var MAX_INLINE_ACTIONS = 2;
|
|
10
11
|
var InlineAction = ({ action }) => {
|
|
11
|
-
|
|
12
|
+
const disabledTooltip = action.state === "disabled" ? action.disabledTooltip : void 0;
|
|
13
|
+
const tooltipProps = disabledTooltip === void 0 ? void 0 : { disabled: true };
|
|
14
|
+
const button = action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitControlButton, {
|
|
12
15
|
href: action.href,
|
|
13
16
|
icon: action.icon,
|
|
14
17
|
isDanger: action.danger,
|
|
15
18
|
isExternal: action.isExternal,
|
|
16
19
|
label: action.label,
|
|
17
20
|
onClick: action.onClick,
|
|
18
|
-
state: action.state
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
state: action.state,
|
|
22
|
+
tooltipProps
|
|
23
|
+
}) : /* @__PURE__ */ jsx(BitkitControlButton, {
|
|
21
24
|
icon: action.icon,
|
|
22
25
|
isDanger: action.danger,
|
|
23
26
|
label: action.label,
|
|
24
27
|
onClick: action.onClick,
|
|
25
|
-
state: action.state
|
|
28
|
+
state: action.state,
|
|
29
|
+
tooltipProps
|
|
30
|
+
});
|
|
31
|
+
if (disabledTooltip === void 0) return button;
|
|
32
|
+
return /* @__PURE__ */ jsx(BitkitTooltip, {
|
|
33
|
+
text: disabledTooltip,
|
|
34
|
+
wrapTrigger: true,
|
|
35
|
+
children: button
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var MenuAction = ({ action }) => {
|
|
@@ -52,12 +62,21 @@ var MenuAction = ({ action }) => {
|
|
|
52
62
|
* action menu, so the column width stays predictable. Clicks are kept inside the cell, so the
|
|
53
63
|
* actions work in a `BitkitLinkedRow` without triggering the row link.
|
|
54
64
|
*
|
|
65
|
+
* A `disabled` action can say why through `disabledTooltip` — the inline button gets a focusable
|
|
66
|
+
* wrapper for it, so hovering *and* tabbing to it both reach the explanation.
|
|
67
|
+
*
|
|
55
68
|
* @example
|
|
56
69
|
* ```tsx
|
|
57
70
|
* <BitkitRowActionsCell
|
|
58
71
|
* actions={[
|
|
59
72
|
* { icon: IconPencil, label: 'Edit', onClick: onEdit },
|
|
60
|
-
* {
|
|
73
|
+
* {
|
|
74
|
+
* danger: true,
|
|
75
|
+
* disabledTooltip: 'Only an admin can remove a project.',
|
|
76
|
+
* icon: IconMinusCircle,
|
|
77
|
+
* label: 'Remove',
|
|
78
|
+
* state: 'disabled',
|
|
79
|
+
* },
|
|
61
80
|
* ]}
|
|
62
81
|
* />
|
|
63
82
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitRowActionsCell.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitRowActionsCell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type MouseEvent } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconMoreVertical from '../../icons/IconMoreVertical';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\n\n/** One row action, rendered either as an inline control button or as an action menu item. */\nexport interface BitkitRowAction {\n /** Renders the action in the danger color set. */\n danger?: boolean;\n /** Makes the action a link instead of a button. */\n href?: string;\n icon: BitkitIconComponent;\n /** Only with `href`: opens the link in a new tab and adds the external-link affordance. */\n isExternal?: boolean;\n /** Accessible name of the inline button, and the visible text of the menu item. Must be unique\n * within `actions`, since it keys the list. */\n label: string;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n /**\n * `disabled` makes this one action inert. `skeleton` marks it as in flight: an inline action\n * shimmers in place, and in the collapsed menu the trigger shimmers instead — the state belongs\n * to the row, and the items sit behind a closed menu. Menu items are inert under either state.\n */\n state?: 'disabled' | 'skeleton';\n}\n\nexport interface BitkitRowActionsCellProps extends Omit<Table.CellProps, 'children' | 'onClick'> {\n /** Up to two actions render as inline icon buttons; three or more collapse into an action menu. */\n actions: BitkitRowAction[];\n /** Accessible name of the action menu trigger, used from the third action on. Default: `More actions` */\n menuLabel?: string;\n}\n\nconst MAX_INLINE_ACTIONS = 2;\n\nconst InlineAction = ({ action }: { action: BitkitRowAction }) => {\n
|
|
1
|
+
{"version":3,"file":"BitkitRowActionsCell.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitRowActionsCell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type MouseEvent } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconMoreVertical from '../../icons/IconMoreVertical';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n/** One row action, rendered either as an inline control button or as an action menu item. */\nexport interface BitkitRowAction {\n /** Renders the action in the danger color set. */\n danger?: boolean;\n /**\n * Why the action is unavailable, shown in a tooltip on the inline button while `state` is\n * `disabled`. It explains the state, so it replaces the button's label tooltip rather than\n * competing with it. An action collapsed into the menu ignores it — a disabled menu item is out\n * of the menu's keyboard navigation, so a tooltip there would only ever reach the pointer.\n */\n disabledTooltip?: string;\n /** Makes the action a link instead of a button. */\n href?: string;\n icon: BitkitIconComponent;\n /** Only with `href`: opens the link in a new tab and adds the external-link affordance. */\n isExternal?: boolean;\n /** Accessible name of the inline button, and the visible text of the menu item. Must be unique\n * within `actions`, since it keys the list. */\n label: string;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n /**\n * `disabled` makes this one action inert. `skeleton` marks it as in flight: an inline action\n * shimmers in place, and in the collapsed menu the trigger shimmers instead — the state belongs\n * to the row, and the items sit behind a closed menu. Menu items are inert under either state.\n */\n state?: 'disabled' | 'skeleton';\n}\n\nexport interface BitkitRowActionsCellProps extends Omit<Table.CellProps, 'children' | 'onClick'> {\n /** Up to two actions render as inline icon buttons; three or more collapse into an action menu. */\n actions: BitkitRowAction[];\n /** Accessible name of the action menu trigger, used from the third action on. Default: `More actions` */\n menuLabel?: string;\n}\n\nconst MAX_INLINE_ACTIONS = 2;\n\nconst InlineAction = ({ action }: { action: BitkitRowAction }) => {\n const disabledTooltip = action.state === 'disabled' ? action.disabledTooltip : undefined;\n const tooltipProps = disabledTooltip === undefined ? undefined : { disabled: true };\n\n const button =\n action.href !== undefined ? (\n <BitkitControlButton\n href={action.href}\n icon={action.icon}\n isDanger={action.danger}\n isExternal={action.isExternal}\n label={action.label}\n onClick={action.onClick}\n state={action.state}\n tooltipProps={tooltipProps}\n />\n ) : (\n <BitkitControlButton\n icon={action.icon}\n isDanger={action.danger}\n label={action.label}\n onClick={action.onClick}\n state={action.state}\n tooltipProps={tooltipProps}\n />\n );\n\n if (disabledTooltip === undefined) {\n return button;\n }\n\n return (\n <BitkitTooltip text={disabledTooltip} wrapTrigger>\n {button}\n </BitkitTooltip>\n );\n};\n\nconst MenuAction = ({ action }: { action: BitkitRowAction }) => {\n if (action.href !== undefined) {\n return (\n <BitkitActionMenu.Item\n disabled={action.state !== undefined}\n href={action.href}\n icon={action.icon}\n isDanger={action.danger}\n isExternal={action.isExternal}\n onClick={action.onClick}\n value={action.label}\n >\n {action.label}\n </BitkitActionMenu.Item>\n );\n }\n\n return (\n <BitkitActionMenu.Item\n disabled={action.state !== undefined}\n icon={action.icon}\n isDanger={action.danger}\n onClick={action.onClick}\n value={action.label}\n >\n {action.label}\n </BitkitActionMenu.Item>\n );\n};\n\n/**\n * The trailing cell of a table row, holding its actions. The column shrinks to fit the buttons.\n *\n * Up to two actions render as inline icon buttons; from the third on they collapse into a single\n * action menu, so the column width stays predictable. Clicks are kept inside the cell, so the\n * actions work in a `BitkitLinkedRow` without triggering the row link.\n *\n * A `disabled` action can say why through `disabledTooltip` — the inline button gets a focusable\n * wrapper for it, so hovering *and* tabbing to it both reach the explanation.\n *\n * @example\n * ```tsx\n * <BitkitRowActionsCell\n * actions={[\n * { icon: IconPencil, label: 'Edit', onClick: onEdit },\n * {\n * danger: true,\n * disabledTooltip: 'Only an admin can remove a project.',\n * icon: IconMinusCircle,\n * label: 'Remove',\n * state: 'disabled',\n * },\n * ]}\n * />\n * ```\n */\nconst BitkitRowActionsCell = forwardRef<HTMLTableCellElement, BitkitRowActionsCellProps>((props, ref) => {\n const { actions, menuLabel = 'More actions', ...rest } = props;\n const styles = useTableStyles();\n const isPending = actions.some((action) => action.state === 'skeleton');\n\n return (\n <Table.Cell ref={ref} css={styles.actionsCell} {...rest}>\n <Box css={styles.actionsGroup} onClick={(event) => event.stopPropagation()}>\n {actions.length <= MAX_INLINE_ACTIONS ? (\n actions.map((action) => <InlineAction key={action.label} action={action} />)\n ) : (\n <BitkitActionMenu\n size=\"md\"\n trigger={\n <BitkitControlButton\n icon={IconMoreVertical}\n label={menuLabel}\n state={isPending ? 'skeleton' : undefined}\n />\n }\n >\n {actions.map((action) => (\n <MenuAction key={action.label} action={action} />\n ))}\n </BitkitActionMenu>\n )}\n </Box>\n </Table.Cell>\n );\n});\n\nBitkitRowActionsCell.displayName = 'BitkitRowActionsCell';\n\nexport default BitkitRowActionsCell;\n"],"mappings":";;;;;;;;;AA6CA,IAAM,qBAAqB;AAE3B,IAAM,gBAAgB,EAAE,aAA0C;CAChE,MAAM,kBAAkB,OAAO,UAAU,aAAa,OAAO,kBAAkB,KAAA;CAC/E,MAAM,eAAe,oBAAoB,KAAA,IAAY,KAAA,IAAY,EAAE,UAAU,KAAK;CAElF,MAAM,SACJ,OAAO,SAAS,KAAA,IACd,oBAAC,qBAAD;EACE,MAAM,OAAO;EACb,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,YAAY,OAAO;EACnB,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,OAAO,OAAO;EACA;CACf,CAAA,IAED,oBAAC,qBAAD;EACE,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,OAAO,OAAO;EACA;CACf,CAAA;CAGL,IAAI,oBAAoB,KAAA,GACtB,OAAO;CAGT,OACE,oBAAC,eAAD;EAAe,MAAM;EAAiB,aAAA;EACnC,UAAA;CACY,CAAA;AAEnB;AAEA,IAAM,cAAc,EAAE,aAA0C;CAC9D,IAAI,OAAO,SAAS,KAAA,GAClB,OACE,oBAAC,yBAAiB,MAAlB;EACE,UAAU,OAAO,UAAU,KAAA;EAC3B,MAAM,OAAO;EACb,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,YAAY,OAAO;EACnB,SAAS,OAAO;EAChB,OAAO,OAAO;EAEb,UAAA,OAAO;CACa,CAAA;CAI3B,OACE,oBAAC,yBAAiB,MAAlB;EACE,UAAU,OAAO,UAAU,KAAA;EAC3B,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,SAAS,OAAO;EAChB,OAAO,OAAO;EAEb,UAAA,OAAO;CACa,CAAA;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAM,uBAAuB,YAA6D,OAAO,QAAQ;CACvG,MAAM,EAAE,SAAS,YAAY,gBAAgB,GAAG,SAAS;CACzD,MAAM,SAAS,eAAe;CAC9B,MAAM,YAAY,QAAQ,MAAM,WAAW,OAAO,UAAU,UAAU;CAEtE,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,KAAK,OAAO;EAAa,GAAI;EACjD,UAAA,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAc,UAAU,UAAU,MAAM,gBAAgB;GACtE,UAAA,QAAQ,UAAU,qBACjB,QAAQ,KAAK,WAAW,oBAAC,cAAD,EAAyC,OAAS,GAA/B,OAAO,KAAwB,CAAC,IAE3E,oBAAC,0BAAD;IACE,MAAK;IACL,SACE,oBAAC,qBAAD;KACE,MAAM;KACN,OAAO;KACP,OAAO,YAAY,aAAa,KAAA;IACjC,CAAA;IAGF,UAAA,QAAQ,KAAK,WACZ,oBAAC,YAAD,EAAuC,OAAS,GAA/B,OAAO,KAAwB,CACjD;GACe,CAAA;EAEjB,CAAA;CACK,CAAA;AAEhB,CAAC;AAED,qBAAqB,cAAc"}
|