@bitrise/bitkit-v2 0.3.389 → 0.3.390-beta.2516

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.
Files changed (8) hide show
  1. package/dist/components/BitkitTable/BitkitLinkedRow.d.ts +1 -6
  2. package/dist/components/BitkitTable/BitkitLinkedRow.js +20 -33
  3. package/dist/components/BitkitTable/BitkitLinkedRow.js.map +1 -1
  4. package/dist/theme/slot-recipes/Table.recipe.d.ts +1 -1
  5. package/dist/theme/slot-recipes/Table.recipe.js +10 -10
  6. package/dist/theme/slot-recipes/Table.recipe.js.map +1 -1
  7. package/dist/theme/slot-recipes/index.d.ts +1 -1
  8. package/package.json +1 -1
package/dist/components/BitkitTable/BitkitLinkedRow.d.ts CHANGED
@@ -1,10 +1,5 @@
1
1
  import { Table } from '@chakra-ui/react/table';
2
- export interface BitkitLinkedRowProps extends Omit<Table.RowProps, 'onClick'> {
3
- /** Target of the row link. Passed down to the `BitkitLinkedRow.LinkCell` inside the row. */
4
- href: string;
5
- /** Renders the link with the external-link affordance and opens it in a new tab. */
6
- isExternal?: boolean;
7
- }
2
+ export type BitkitLinkedRowProps = Omit<Table.RowProps, 'onClick'>;
8
3
  export type BitkitLinkedRowLinkCellProps = Table.CellProps;
9
4
  declare const _default: import('react').ForwardRefExoticComponent<BitkitLinkedRowProps & import('react').RefAttributes<HTMLTableRowElement>> & {
10
5
  LinkCell: import('react').ForwardRefExoticComponent<Table.CellProps & import('react').RefAttributes<HTMLTableCellElement>>;
package/dist/components/BitkitTable/BitkitLinkedRow.js CHANGED
@@ -1,67 +1,54 @@
1
1
  import { withSubComponents } from "../../utilities/withSubComponents.js";
2
- import BitkitLink from "../BitkitLink/BitkitLink.js";
3
2
  import { forwardRef } from "react";
4
3
  import { jsx } from "react/jsx-runtime";
5
- import { createContext as createContext$1 } from "@chakra-ui/react";
6
4
  import { Table, useTableStyles } from "@chakra-ui/react/table";
7
5
  //#region lib/components/BitkitTable/BitkitLinkedRow.tsx
8
- var [ContextProvider, useLinkedRowContext] = createContext$1({
9
- name: "LinkedRowContext",
10
- hookName: "useLinkedRowContext",
11
- providerName: "<BitkitLinkedRow />"
12
- });
13
6
  /**
14
7
  * A table row that navigates as a whole. Exactly one of its cells must be a
15
- * `BitkitLinkedRow.LinkCell` — that cell's content becomes the accessible link text, and its
16
- * stretched pseudo-element makes the entire row the click and focus target.
8
+ * `BitkitLinkedRow.LinkCell` holding the row's link — that link's text becomes the row's accessible
9
+ * name, and its stretched pseudo-element makes the entire row the click and focus target.
17
10
  *
18
11
  * Interactive elements in the other cells (buttons, checkboxes, other links) stay clickable: they
19
12
  * are lifted above the stretched link, so a `BitkitRowActionsCell` works inside a linked row.
20
13
  *
21
14
  * @example
22
15
  * ```tsx
23
- * <BitkitLinkedRow href={`/workflows/${row.id}`}>
24
- * <BitkitLinkedRow.LinkCell>{row.name}</BitkitLinkedRow.LinkCell>
16
+ * <BitkitLinkedRow>
17
+ * <BitkitLinkedRow.LinkCell>
18
+ * <BitkitLink colorVariant="purple" href={`/workflows/${row.id}`}>
19
+ * {row.name}
20
+ * </BitkitLink>
21
+ * </BitkitLinkedRow.LinkCell>
25
22
  * <Table.Cell>{row.status}</Table.Cell>
26
23
  * <BitkitRowActionsCell actions={actions} />
27
24
  * </BitkitLinkedRow>
28
25
  * ```
29
26
  */
30
27
  var BitkitLinkedRow = forwardRef((props, ref) => {
31
- const { children, href, isExternal, ...rest } = props;
28
+ const { children, ...rest } = props;
32
29
  const styles = useTableStyles();
33
- return /* @__PURE__ */ jsx(ContextProvider, {
34
- value: {
35
- href,
36
- isExternal
37
- },
38
- children: /* @__PURE__ */ jsx(Table.Row, {
39
- ref,
40
- css: styles.linkedRow,
41
- ...rest,
42
- children
43
- })
30
+ return /* @__PURE__ */ jsx(Table.Row, {
31
+ ref,
32
+ css: styles.linkedRow,
33
+ ...rest,
34
+ children
44
35
  });
45
36
  });
46
37
  BitkitLinkedRow.displayName = "BitkitLinkedRow";
47
38
  /**
48
- * The cell that carries the row's link. Its children are the accessible link text, so give it the
49
- * cell that names the row. Reads `href` and `isExternal` from the surrounding `BitkitLinkedRow`.
39
+ * The cell that carries the row's link, so give it the cell that names the row. Its content is a
40
+ * single `BitkitLink` with its own `href`, `isExternal`, `colorVariant` and any other link prop —
41
+ * the cell only stretches that link across the row, leaving its styling to the link itself.
50
42
  */
51
43
  var LinkCell = forwardRef((props, ref) => {
52
44
  const { children, ...rest } = props;
53
- const { href, isExternal } = useLinkedRowContext();
54
45
  const styles = useTableStyles();
55
46
  return /* @__PURE__ */ jsx(Table.Cell, {
56
47
  ref,
48
+ css: styles.linkCell,
49
+ "data-link-cell": true,
57
50
  ...rest,
58
- children: /* @__PURE__ */ jsx(BitkitLink, {
59
- css: styles.rowLink,
60
- "data-row-link": true,
61
- href,
62
- isExternal,
63
- children
64
- })
51
+ children
65
52
  });
66
53
  });
67
54
  LinkCell.displayName = "BitkitLinkedRow.LinkCell";
package/dist/components/BitkitTable/BitkitLinkedRow.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitLinkedRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitLinkedRow.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\ninterface LinkedRowContext {\n href: string;\n isExternal?: boolean;\n}\n\nconst [ContextProvider, useLinkedRowContext] = createContext<LinkedRowContext>({\n name: 'LinkedRowContext',\n hookName: 'useLinkedRowContext',\n providerName: '<BitkitLinkedRow />',\n});\n\nexport interface BitkitLinkedRowProps extends Omit<Table.RowProps, 'onClick'> {\n /** Target of the row link. Passed down to the `BitkitLinkedRow.LinkCell` inside the row. */\n href: string;\n /** Renders the link with the external-link affordance and opens it in a new tab. */\n isExternal?: boolean;\n}\n\n/**\n * A table row that navigates as a whole. Exactly one of its cells must be a\n * `BitkitLinkedRow.LinkCell` — that cell's content becomes the accessible link text, and its\n * stretched pseudo-element makes the entire row the click and focus target.\n *\n * Interactive elements in the other cells (buttons, checkboxes, other links) stay clickable: they\n * are lifted above the stretched link, so a `BitkitRowActionsCell` works inside a linked row.\n *\n * @example\n * ```tsx\n * <BitkitLinkedRow href={`/workflows/${row.id}`}>\n * <BitkitLinkedRow.LinkCell>{row.name}</BitkitLinkedRow.LinkCell>\n * <Table.Cell>{row.status}</Table.Cell>\n * <BitkitRowActionsCell actions={actions} />\n * </BitkitLinkedRow>\n * ```\n */\nconst BitkitLinkedRow = forwardRef<HTMLTableRowElement, BitkitLinkedRowProps>((props, ref) => {\n const { children, href, isExternal, ...rest } = props;\n const styles = useTableStyles();\n\n return (\n <ContextProvider value={{ href, isExternal }}>\n <Table.Row ref={ref} css={styles.linkedRow} {...rest}>\n {children}\n </Table.Row>\n </ContextProvider>\n );\n});\n\nBitkitLinkedRow.displayName = 'BitkitLinkedRow';\n\nexport type BitkitLinkedRowLinkCellProps = Table.CellProps;\n\n/**\n * The cell that carries the row's link. Its children are the accessible link text, so give it the\n * cell that names the row. Reads `href` and `isExternal` from the surrounding `BitkitLinkedRow`.\n */\nconst LinkCell = forwardRef<HTMLTableCellElement, BitkitLinkedRowLinkCellProps>((props, ref) => {\n const { children, ...rest } = props;\n const { href, isExternal } = useLinkedRowContext();\n const styles = useTableStyles();\n\n return (\n <Table.Cell ref={ref} {...rest}>\n <BitkitLink css={styles.rowLink} data-row-link href={href} isExternal={isExternal}>\n {children}\n </BitkitLink>\n </Table.Cell>\n );\n});\n\nLinkCell.displayName = 'BitkitLinkedRow.LinkCell';\n\nexport default withSubComponents(BitkitLinkedRow, { LinkCell });\n"],"mappings":";;;;;;;AAaA,IAAM,CAAC,iBAAiB,uBAAuB,gBAAgC;CAC7E,MAAM;CACN,UAAU;CACV,cAAc;AAChB,CAAC;;;;;;;;;;;;;;;;;;AA0BD,IAAM,kBAAkB,YAAuD,OAAO,QAAQ;CAC5F,MAAM,EAAE,UAAU,MAAM,YAAY,GAAG,SAAS;CAChD,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAAE;GAAM;EAAW;EACzC,UAAA,oBAAC,MAAM,KAAP;GAAgB;GAAK,KAAK,OAAO;GAAW,GAAI;GAC7C;EACQ,CAAA;CACI,CAAA;AAErB,CAAC;AAED,gBAAgB,cAAc;;;;;AAQ9B,IAAM,WAAW,YAAgE,OAAO,QAAQ;CAC9F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,EAAE,MAAM,eAAe,oBAAoB;CACjD,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EACxB,UAAA,oBAAC,YAAD;GAAY,KAAK,OAAO;GAAS,iBAAA;GAAoB;GAAkB;GACpE;EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,SAAS,cAAc;AAEvB,IAAA,0BAAe,kBAAkB,iBAAiB,EAAE,SAAS,CAAC"}
1
+ {"version":3,"file":"BitkitLinkedRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitLinkedRow.tsx"],"sourcesContent":["import { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nexport type BitkitLinkedRowProps = Omit<Table.RowProps, 'onClick'>;\n\n/**\n * A table row that navigates as a whole. Exactly one of its cells must be a\n * `BitkitLinkedRow.LinkCell` holding the row's link — that link's text becomes the row's accessible\n * name, and its stretched pseudo-element makes the entire row the click and focus target.\n *\n * Interactive elements in the other cells (buttons, checkboxes, other links) stay clickable: they\n * are lifted above the stretched link, so a `BitkitRowActionsCell` works inside a linked row.\n *\n * @example\n * ```tsx\n * <BitkitLinkedRow>\n * <BitkitLinkedRow.LinkCell>\n * <BitkitLink colorVariant=\"purple\" href={`/workflows/${row.id}`}>\n * {row.name}\n * </BitkitLink>\n * </BitkitLinkedRow.LinkCell>\n * <Table.Cell>{row.status}</Table.Cell>\n * <BitkitRowActionsCell actions={actions} />\n * </BitkitLinkedRow>\n * ```\n */\nconst BitkitLinkedRow = forwardRef<HTMLTableRowElement, BitkitLinkedRowProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useTableStyles();\n\n return (\n <Table.Row ref={ref} css={styles.linkedRow} {...rest}>\n {children}\n </Table.Row>\n );\n});\n\nBitkitLinkedRow.displayName = 'BitkitLinkedRow';\n\nexport type BitkitLinkedRowLinkCellProps = Table.CellProps;\n\n/**\n * The cell that carries the row's link, so give it the cell that names the row. Its content is a\n * single `BitkitLink` with its own `href`, `isExternal`, `colorVariant` and any other link prop —\n * the cell only stretches that link across the row, leaving its styling to the link itself.\n */\nconst LinkCell = forwardRef<HTMLTableCellElement, BitkitLinkedRowLinkCellProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useTableStyles();\n\n return (\n <Table.Cell ref={ref} css={styles.linkCell} data-link-cell {...rest}>\n {children}\n </Table.Cell>\n );\n});\n\nLinkCell.displayName = 'BitkitLinkedRow.LinkCell';\n\nexport default withSubComponents(BitkitLinkedRow, { LinkCell });\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAM,kBAAkB,YAAuD,OAAO,QAAQ;CAC5F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,KAAP;EAAgB;EAAK,KAAK,OAAO;EAAW,GAAI;EAC7C;CACQ,CAAA;AAEf,CAAC;AAED,gBAAgB,cAAc;;;;;;AAS9B,IAAM,WAAW,YAAgE,OAAO,QAAQ;CAC9F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,KAAK,OAAO;EAAU,kBAAA;EAAe,GAAI;EAC5D;CACS,CAAA;AAEhB,CAAC;AAED,SAAS,cAAc;AAEvB,IAAA,0BAAe,kBAAkB,iBAAiB,EAAE,SAAS,CAAC"}
package/dist/theme/slot-recipes/Table.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "definitionTrigger" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
1
+ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "definitionTrigger" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "linkCell" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
2
2
  variant: {
3
3
  default: {
4
4
  root: {
package/dist/theme/slot-recipes/Table.recipe.js CHANGED
@@ -20,8 +20,8 @@ var tableSlotRecipe = defineSlotRecipe({
20
20
  "expandedContent",
21
21
  "expandedRow",
22
22
  "filterControls",
23
+ "linkCell",
23
24
  "linkedRow",
24
- "rowLink",
25
25
  "sortColumnHeader",
26
26
  "sortTrigger",
27
27
  "utilityCell"
@@ -117,15 +117,7 @@ var tableSlotRecipe = defineSlotRecipe({
117
117
  gap: "16",
118
118
  width: "full"
119
119
  },
120
- linkedRow: {
121
- position: "relative",
122
- _hover: { backgroundColor: "background/secondary" },
123
- "& :where(a:not([data-row-link]), button, input, label, select)": {
124
- position: "relative",
125
- zIndex: "1"
126
- }
127
- },
128
- rowLink: {
120
+ linkCell: { "& a": {
129
121
  textDecoration: "none",
130
122
  _hover: { textDecoration: "none" },
131
123
  _after: {
@@ -140,6 +132,14 @@ var tableSlotRecipe = defineSlotRecipe({
140
132
  outlineOffset: "calc(var(--focus-ring-width) * -1)"
141
133
  }
142
134
  }
135
+ } },
136
+ linkedRow: {
137
+ position: "relative",
138
+ _hover: { backgroundColor: "background/secondary" },
139
+ "& :where(a:not([data-link-cell] a), button, input, label, select)": {
140
+ position: "relative",
141
+ zIndex: "1"
142
+ }
143
143
  },
144
144
  sortColumnHeader: {
145
145
  paddingBlock: 0,
package/dist/theme/slot-recipes/Table.recipe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// A control like a checkbox renders as an inline-flex <label>, which sits on the line box's\n// baseline — so the text strut's descender space leaves it a pixel or two above the row's centre.\n// Making it block-level takes the line box out of the equation and lets vertical-align: middle\n// centre it exactly.\nconst controlOnlyCell = {\n '& > :where(label):only-child': {\n display: 'flex',\n },\n};\n\n// A tinted row means \"selected\", and only a Checkbox or a Radio marks it — plus `data-selected` on\n// the row itself, the explicit opt-in for a table that tints on its own terms (a switched-on row,\n// say). Everything else is left alone, which is the narrowing over a bare `input:checked`: a switch\n// renders a hidden input[type=\"checkbox\"] too, so a toggle in a data cell read as a selected row.\n//\n// `[data-part=\"item\"]` is the load-bearing half of the radio branch. Ark's SegmentGroup is Zag's\n// radio-group anatomy renamed, so a segment sits under its own scope — but scope alone would still\n// match `RadioGroup.Root`, which wraps the whole table in the `Selectable` pattern, and with it every\n// checked radio inside. Requiring `item` on the same element pins the match to a single radio.\n//\n// Known gap: BitkitSelectableTag is a `Checkbox.Root` underneath, so one in a data cell tints its\n// row. It has no consumers today; when it gets one, put `data-selectable-tag` on its `Checkbox.Root`\n// and `:not([data-selectable-tag])` on the checkbox branch here.\nconst selectedRow =\n '&:has([data-scope=\"checkbox\"] input:checked), &:has([data-scope=\"radio-group\"][data-part=\"item\"] input:checked), &[data-selected]';\n\nconst tableSlotRecipe = defineSlotRecipe({\n className: 'table',\n slots: [\n ...tableAnatomy.keys(),\n 'actionsCell',\n 'actionsGroup',\n 'bulkActionsGroup',\n 'bulkActionsButtons',\n 'definitionTrigger',\n 'expandCell',\n 'expandTrigger',\n 'expandableRow',\n 'expandedCell',\n 'expandedContent',\n 'expandedRow',\n 'filterControls',\n 'linkedRow',\n 'rowLink',\n 'sortColumnHeader',\n 'sortTrigger',\n 'utilityCell',\n ],\n base: {\n root: {\n fontVariantNumeric: 'lining-nums tabular-nums',\n textAlign: 'start',\n width: 'full',\n },\n caption: {\n captionSide: 'top !important',\n textAlign: 'start',\n '& > * + *': {\n marginBlockStart: '4',\n },\n },\n cell: {\n color: 'text/body',\n textStyle: 'body/md/regular',\n },\n actionsCell: {\n textAlign: 'end',\n whiteSpace: 'nowrap',\n // Shrink-to-fit: a table cell can't go below its content width, so any value under the\n // content's own width collapses the column around the buttons and leaves the rest to\n // the data columns.\n width: '1%',\n },\n actionsGroup: {\n alignItems: 'center',\n display: 'inline-flex',\n gap: '8',\n position: 'relative',\n },\n bulkActionsGroup: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n },\n bulkActionsButtons: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n marginInlineStart: 'auto',\n },\n // The column header's own `heading/h5` has to survive, so the trigger inherits its type and\n // colour rather than setting them — which is what rules out BitkitDefinitionTooltip in a header,\n // since its recipe always pins a textStyle. The offset is that recipe's own value for 14px type.\n definitionTrigger: {\n color: 'inherit',\n cursor: 'pointer',\n font: 'inherit',\n letterSpacing: 'inherit',\n maxWidth: 'full',\n textDecoration: 'underline dotted',\n textDecorationColor: 'color/neutral/bold',\n textUnderlineOffset: '0.25em',\n _hover: {\n textDecorationColor: 'color/purple/base',\n },\n },\n expandCell: {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n },\n // A fixed 32x32 box (per the design), centred in the cell by the cell's own vertical-align.\n // Deriving the size from padding instead leaves it at the mercy of the Collapsible recipe's\n // asymmetric paddingBlockStart, which is what pushed the chevron 2px above the row's centre.\n expandTrigger: {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n marginInlineStart: '12',\n padding: 0,\n width: '32',\n },\n expandableRow: {\n '& > td': {\n borderBottomWidth: 0,\n },\n },\n expandedCell: {\n height: 0,\n paddingBlock: 0,\n paddingInline: 0,\n },\n expandedContent: {\n borderBlockStartColor: 'border/minimal',\n borderBlockStartStyle: 'solid',\n borderBlockStartWidth: '1',\n marginInlineEnd: '16',\n marginInlineStart: '48',\n paddingBlockEnd: '24',\n paddingBlockStart: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n expandedRow: {\n _hover: {\n background: 'none',\n },\n },\n filterControls: {\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '16',\n width: 'full',\n },\n linkedRow: {\n position: 'relative',\n _hover: {\n backgroundColor: 'background/secondary',\n },\n '& :where(a:not([data-row-link]), button, input, label, select)': {\n position: 'relative',\n zIndex: '1',\n },\n },\n rowLink: {\n textDecoration: 'none',\n // The row's own background change is the hover affordance; the link recipe's hover\n // underline would fire on every row hover, since the stretched pseudo covers the row.\n _hover: {\n textDecoration: 'none',\n },\n _after: {\n content: '\"\"',\n inset: 0,\n position: 'absolute',\n },\n _focusVisible: {\n outline: 'none',\n _after: {\n outline: 'var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color)',\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n },\n sortColumnHeader: {\n paddingBlock: 0,\n paddingInline: 0,\n },\n sortTrigger: {\n alignItems: 'center',\n appearance: 'none',\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n font: 'inherit',\n gap: '8',\n height: 'full',\n paddingBlock: '12',\n paddingInline: '16',\n userSelect: 'none',\n width: 'full',\n _focusVisible: {\n outlineOffset: '-3px',\n },\n _hover: {\n backgroundColor: 'background/active',\n },\n },\n utilityCell: {\n height: 'auto',\n paddingBlock: '12',\n paddingInline: '16',\n },\n },\n variants: {\n variant: {\n default: {\n root: {\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n overflow: 'hidden',\n },\n header: {\n '& :where(th)': {\n backgroundColor: 'background/tertiary',\n },\n },\n columnHeader: {\n borderBottomColor: 'border/minimal',\n paddingBlock: '12',\n paddingInline: '16',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '16',\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n borderless: {\n columnHeader: {\n borderBottomColor: 'border/regular',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/regular',\n borderTopColor: 'border/regular',\n paddingInline: '12',\n },\n footer: {\n borderTopColor: 'border/regular',\n },\n },\n card: {\n columnHeader: {\n borderBottomColor: 'border/minimal',\n height: '48',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '12',\n },\n row: {\n 'thead &, tbody &': {\n '& > :where(td, th):first-child': {\n paddingInlineStart: '24',\n },\n '& > :where(td, th):last-child': {\n paddingInlineEnd: '24',\n },\n },\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n },\n size: {\n sm: {\n cell: {\n height: '48',\n },\n },\n md: {\n cell: {\n height: rem(56),\n },\n },\n lg: {\n cell: {\n height: '64',\n },\n },\n },\n // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n // that the row is clickable, so it says nothing about the row being interactive — turn it off\n // for short, static tables where there is no place to lose.\n rowHover: {\n true: {},\n false: {},\n },\n layout: {\n table: {\n root: {\n borderCollapse: 'separate',\n borderSpacing: '0',\n },\n caption: {\n marginBlockEnd: '24',\n },\n columnHeader: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n color: 'text/primary',\n fontWeight: 'bold',\n textAlign: 'start',\n textStyle: 'heading/h5',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n },\n cell: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n // so the body/footer divider has to live on the footer's cells.\n // A footer holds one full-width block (pagination, a \"new item\" action) that brings its\n // own padding and height, so the body cell's 16px inset and fixed row height would\n // double up on it.\n 'tfoot &': {\n borderBottomWidth: 0,\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n height: 'auto',\n paddingBlock: 0,\n paddingInline: 0,\n },\n },\n body: {\n '& :where(tr)': {\n [selectedRow]: {\n backgroundColor: 'background/selected',\n _hover: {\n backgroundColor: 'background/selected',\n },\n },\n },\n '& :where(tr:last-child) td': {\n borderBottomWidth: 0,\n },\n },\n },\n stacked: {\n root: {\n display: 'block',\n },\n caption: {\n display: 'block',\n padding: '16',\n backgroundColor: 'background/secondary',\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n },\n header: {\n borderWidth: 0,\n clip: 'rect(0, 0, 0, 0)',\n height: '1',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: '1',\n },\n body: {\n display: 'block',\n },\n row: {\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n display: 'block',\n paddingBlock: '12',\n '&:last-child': {\n borderBottomWidth: 0,\n },\n },\n cell: {\n alignItems: 'center',\n display: 'flex',\n minHeight: '48',\n paddingInline: '16',\n _before: {\n alignSelf: 'center',\n color: 'text/primary',\n content: 'attr(data-label)',\n flexShrink: 0,\n fontWeight: 'semibold',\n marginInlineEnd: '16',\n width: '96',\n },\n 'tfoot &': {\n display: 'block',\n paddingInline: 0,\n _before: {\n content: 'none',\n },\n },\n },\n // display: block takes tfoot out of the table model, so a border on it does render here\n footer: {\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n display: 'block',\n },\n },\n },\n },\n compoundVariants: [\n {\n css: {\n row: {\n borderBottomColor: 'border/regular',\n },\n },\n layout: 'stacked',\n variant: 'borderless',\n },\n // The card gutter and the 12px cell padding are for the wide layout. Stacked rows are blocks\n // whose cells run vertically, so an inline indent on only the first and last one reads as a\n // misalignment — everything goes back to the stacked layout's own 16px.\n {\n css: {\n cell: {\n paddingInline: '16',\n },\n row: {\n 'thead &, tbody &': {\n '& > :where(td, th):first-child': {\n paddingInlineStart: '16',\n },\n '& > :where(td, th):last-child': {\n paddingInlineEnd: '16',\n },\n },\n },\n },\n layout: 'stacked',\n variant: 'card',\n },\n // The `size` variant pins a fixed cell height (48/56/64px), and it is merged after `layout`\n // regardless of declaration order — so only a compound variant can release it. Stacked cells\n // are flex containers whose content (label gutter + a multi-line value) routinely needs more\n // room than the fixed height, and the stacked `cell` keeps `minHeight: 48` as the floor.\n {\n css: {\n cell: {\n height: 'auto',\n },\n },\n layout: 'stacked',\n },\n // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n // renders rows as blocks and never tinted them.\n {\n css: {\n body: {\n '& :where(tr)': {\n _hover: {\n backgroundColor: 'background/secondary',\n },\n },\n },\n },\n layout: 'table',\n rowHover: true,\n },\n ],\n defaultVariants: {\n layout: 'table',\n rowHover: true,\n size: 'lg',\n variant: 'default',\n },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// A control like a checkbox renders as an inline-flex <label>, which sits on the line box's\n// baseline — so the text strut's descender space leaves it a pixel or two above the row's centre.\n// Making it block-level takes the line box out of the equation and lets vertical-align: middle\n// centre it exactly.\nconst controlOnlyCell = {\n '& > :where(label):only-child': {\n display: 'flex',\n },\n};\n\n// A tinted row means \"selected\", and only a Checkbox or a Radio marks it — plus `data-selected` on\n// the row itself, the explicit opt-in for a table that tints on its own terms (a switched-on row,\n// say). Everything else is left alone, which is the narrowing over a bare `input:checked`: a switch\n// renders a hidden input[type=\"checkbox\"] too, so a toggle in a data cell read as a selected row.\n//\n// `[data-part=\"item\"]` is the load-bearing half of the radio branch. Ark's SegmentGroup is Zag's\n// radio-group anatomy renamed, so a segment sits under its own scope — but scope alone would still\n// match `RadioGroup.Root`, which wraps the whole table in the `Selectable` pattern, and with it every\n// checked radio inside. Requiring `item` on the same element pins the match to a single radio.\n//\n// Known gap: BitkitSelectableTag is a `Checkbox.Root` underneath, so one in a data cell tints its\n// row. It has no consumers today; when it gets one, put `data-selectable-tag` on its `Checkbox.Root`\n// and `:not([data-selectable-tag])` on the checkbox branch here.\nconst selectedRow =\n '&:has([data-scope=\"checkbox\"] input:checked), &:has([data-scope=\"radio-group\"][data-part=\"item\"] input:checked), &[data-selected]';\n\nconst tableSlotRecipe = defineSlotRecipe({\n className: 'table',\n slots: [\n ...tableAnatomy.keys(),\n 'actionsCell',\n 'actionsGroup',\n 'bulkActionsGroup',\n 'bulkActionsButtons',\n 'definitionTrigger',\n 'expandCell',\n 'expandTrigger',\n 'expandableRow',\n 'expandedCell',\n 'expandedContent',\n 'expandedRow',\n 'filterControls',\n 'linkCell',\n 'linkedRow',\n 'sortColumnHeader',\n 'sortTrigger',\n 'utilityCell',\n ],\n base: {\n root: {\n fontVariantNumeric: 'lining-nums tabular-nums',\n textAlign: 'start',\n width: 'full',\n },\n caption: {\n captionSide: 'top !important',\n textAlign: 'start',\n '& > * + *': {\n marginBlockStart: '4',\n },\n },\n cell: {\n color: 'text/body',\n textStyle: 'body/md/regular',\n },\n actionsCell: {\n textAlign: 'end',\n whiteSpace: 'nowrap',\n // Shrink-to-fit: a table cell can't go below its content width, so any value under the\n // content's own width collapses the column around the buttons and leaves the rest to\n // the data columns.\n width: '1%',\n },\n actionsGroup: {\n alignItems: 'center',\n display: 'inline-flex',\n gap: '8',\n position: 'relative',\n },\n bulkActionsGroup: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n },\n bulkActionsButtons: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n marginInlineStart: 'auto',\n },\n // The column header's own `heading/h5` has to survive, so the trigger inherits its type and\n // colour rather than setting them — which is what rules out BitkitDefinitionTooltip in a header,\n // since its recipe always pins a textStyle. The offset is that recipe's own value for 14px type.\n definitionTrigger: {\n color: 'inherit',\n cursor: 'pointer',\n font: 'inherit',\n letterSpacing: 'inherit',\n maxWidth: 'full',\n textDecoration: 'underline dotted',\n textDecorationColor: 'color/neutral/bold',\n textUnderlineOffset: '0.25em',\n _hover: {\n textDecorationColor: 'color/purple/base',\n },\n },\n expandCell: {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n },\n // A fixed 32x32 box (per the design), centred in the cell by the cell's own vertical-align.\n // Deriving the size from padding instead leaves it at the mercy of the Collapsible recipe's\n // asymmetric paddingBlockStart, which is what pushed the chevron 2px above the row's centre.\n expandTrigger: {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n marginInlineStart: '12',\n padding: 0,\n width: '32',\n },\n expandableRow: {\n '& > td': {\n borderBottomWidth: 0,\n },\n },\n expandedCell: {\n height: 0,\n paddingBlock: 0,\n paddingInline: 0,\n },\n expandedContent: {\n borderBlockStartColor: 'border/minimal',\n borderBlockStartStyle: 'solid',\n borderBlockStartWidth: '1',\n marginInlineEnd: '16',\n marginInlineStart: '48',\n paddingBlockEnd: '24',\n paddingBlockStart: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n expandedRow: {\n _hover: {\n background: 'none',\n },\n },\n filterControls: {\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '16',\n width: 'full',\n },\n linkCell: {\n // The link inside is the row's link: its stretched pseudo covers the whole row, so the row\n // becomes the click and focus target.\n '& a': {\n textDecoration: 'none',\n // The row's own background change is the hover affordance; the link recipe's hover\n // underline would fire on every row hover, since the stretched pseudo covers the row.\n _hover: {\n textDecoration: 'none',\n },\n _after: {\n content: '\"\"',\n inset: 0,\n position: 'absolute',\n },\n _focusVisible: {\n outline: 'none',\n _after: {\n outline: 'var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color)',\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n },\n },\n linkedRow: {\n position: 'relative',\n _hover: {\n backgroundColor: 'background/secondary',\n },\n '& :where(a:not([data-link-cell] a), button, input, label, select)': {\n position: 'relative',\n zIndex: '1',\n },\n },\n sortColumnHeader: {\n paddingBlock: 0,\n paddingInline: 0,\n },\n sortTrigger: {\n alignItems: 'center',\n appearance: 'none',\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n font: 'inherit',\n gap: '8',\n height: 'full',\n paddingBlock: '12',\n paddingInline: '16',\n userSelect: 'none',\n width: 'full',\n _focusVisible: {\n outlineOffset: '-3px',\n },\n _hover: {\n backgroundColor: 'background/active',\n },\n },\n utilityCell: {\n height: 'auto',\n paddingBlock: '12',\n paddingInline: '16',\n },\n },\n variants: {\n variant: {\n default: {\n root: {\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n overflow: 'hidden',\n },\n header: {\n '& :where(th)': {\n backgroundColor: 'background/tertiary',\n },\n },\n columnHeader: {\n borderBottomColor: 'border/minimal',\n paddingBlock: '12',\n paddingInline: '16',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '16',\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n borderless: {\n columnHeader: {\n borderBottomColor: 'border/regular',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/regular',\n borderTopColor: 'border/regular',\n paddingInline: '12',\n },\n footer: {\n borderTopColor: 'border/regular',\n },\n },\n card: {\n columnHeader: {\n borderBottomColor: 'border/minimal',\n height: '48',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '12',\n },\n row: {\n 'thead &, tbody &': {\n '& > :where(td, th):first-child': {\n paddingInlineStart: '24',\n },\n '& > :where(td, th):last-child': {\n paddingInlineEnd: '24',\n },\n },\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n },\n size: {\n sm: {\n cell: {\n height: '48',\n },\n },\n md: {\n cell: {\n height: rem(56),\n },\n },\n lg: {\n cell: {\n height: '64',\n },\n },\n },\n // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n // that the row is clickable, so it says nothing about the row being interactive — turn it off\n // for short, static tables where there is no place to lose.\n rowHover: {\n true: {},\n false: {},\n },\n layout: {\n table: {\n root: {\n borderCollapse: 'separate',\n borderSpacing: '0',\n },\n caption: {\n marginBlockEnd: '24',\n },\n columnHeader: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n color: 'text/primary',\n fontWeight: 'bold',\n textAlign: 'start',\n textStyle: 'heading/h5',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n },\n cell: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n // so the body/footer divider has to live on the footer's cells.\n // A footer holds one full-width block (pagination, a \"new item\" action) that brings its\n // own padding and height, so the body cell's 16px inset and fixed row height would\n // double up on it.\n 'tfoot &': {\n borderBottomWidth: 0,\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n height: 'auto',\n paddingBlock: 0,\n paddingInline: 0,\n },\n },\n body: {\n '& :where(tr)': {\n [selectedRow]: {\n backgroundColor: 'background/selected',\n _hover: {\n backgroundColor: 'background/selected',\n },\n },\n },\n '& :where(tr:last-child) td': {\n borderBottomWidth: 0,\n },\n },\n },\n stacked: {\n root: {\n display: 'block',\n },\n caption: {\n display: 'block',\n padding: '16',\n backgroundColor: 'background/secondary',\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n },\n header: {\n borderWidth: 0,\n clip: 'rect(0, 0, 0, 0)',\n height: '1',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: '1',\n },\n body: {\n display: 'block',\n },\n row: {\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n display: 'block',\n paddingBlock: '12',\n '&:last-child': {\n borderBottomWidth: 0,\n },\n },\n cell: {\n alignItems: 'center',\n display: 'flex',\n minHeight: '48',\n paddingInline: '16',\n _before: {\n alignSelf: 'center',\n color: 'text/primary',\n content: 'attr(data-label)',\n flexShrink: 0,\n fontWeight: 'semibold',\n marginInlineEnd: '16',\n width: '96',\n },\n 'tfoot &': {\n display: 'block',\n paddingInline: 0,\n _before: {\n content: 'none',\n },\n },\n },\n // display: block takes tfoot out of the table model, so a border on it does render here\n footer: {\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n display: 'block',\n },\n },\n },\n },\n compoundVariants: [\n {\n css: {\n row: {\n borderBottomColor: 'border/regular',\n },\n },\n layout: 'stacked',\n variant: 'borderless',\n },\n // The card gutter and the 12px cell padding are for the wide layout. Stacked rows are blocks\n // whose cells run vertically, so an inline indent on only the first and last one reads as a\n // misalignment — everything goes back to the stacked layout's own 16px.\n {\n css: {\n cell: {\n paddingInline: '16',\n },\n row: {\n 'thead &, tbody &': {\n '& > :where(td, th):first-child': {\n paddingInlineStart: '16',\n },\n '& > :where(td, th):last-child': {\n paddingInlineEnd: '16',\n },\n },\n },\n },\n layout: 'stacked',\n variant: 'card',\n },\n // The `size` variant pins a fixed cell height (48/56/64px), and it is merged after `layout`\n // regardless of declaration order — so only a compound variant can release it. Stacked cells\n // are flex containers whose content (label gutter + a multi-line value) routinely needs more\n // room than the fixed height, and the stacked `cell` keeps `minHeight: 48` as the floor.\n {\n css: {\n cell: {\n height: 'auto',\n },\n },\n layout: 'stacked',\n },\n // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n // renders rows as blocks and never tinted them.\n {\n css: {\n body: {\n '& :where(tr)': {\n _hover: {\n backgroundColor: 'background/secondary',\n },\n },\n },\n },\n layout: 'table',\n rowHover: true,\n },\n ],\n defaultVariants: {\n layout: 'table',\n rowHover: true,\n size: 'lg',\n variant: 'default',\n },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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KACA,WAAW;MACT,SAAS;MACT,eAAe;MACf,SAAS,EACP,SAAS,OACX;KACF;IACF;IAEA,QAAQ;KACN,gBAAgB;KAChB,gBAAgB;KAChB,SAAS;IACX;GACF;EACF;CACF;CACA,kBAAkB;EAChB;GACE,KAAK,EACH,KAAK,EACH,mBAAmB,iBACrB,EACF;GACA,QAAQ;GACR,SAAS;EACX;EAIA;GACE,KAAK;IACH,MAAM,EACJ,eAAe,KACjB;IACA,KAAK,EACH,oBAAoB;KAClB,kCAAkC,EAChC,oBAAoB,KACtB;KACA,iCAAiC,EAC/B,kBAAkB,KACpB;IACF,EACF;GACF;GACA,QAAQ;GACR,SAAS;EACX;EAKA;GACE,KAAK,EACH,MAAM,EACJ,QAAQ,OACV,EACF;GACA,QAAQ;EACV;EAGA;GACE,KAAK,EACH,MAAM,EACJ,gBAAgB,EACd,QAAQ,EACN,iBAAiB,uBACnB,EACF,EACF,EACF;GACA,QAAQ;GACR,UAAU;EACZ;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,UAAU;EACV,MAAM;EACN,SAAS;CACX;AACF,CAAC"}
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -2112,7 +2112,7 @@ declare const slotRecipes: {
2112
2112
  };
2113
2113
  };
2114
2114
  }>;
2115
- table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "definitionTrigger" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
2115
+ table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "definitionTrigger" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "linkCell" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
2116
2116
  variant: {
2117
2117
  default: {
2118
2118
  root: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.389",
4
+ "version": "0.3.390-beta.2516",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",