@cimpress-ui/react 1.17.0 → 1.18.0
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/commonjs/components/table/hooks/use-selectable-row.d.ts +3 -0
- package/dist/commonjs/components/table/hooks/use-selectable-row.d.ts.map +1 -1
- package/dist/commonjs/components/table/hooks/use-selectable-row.js +2 -0
- package/dist/commonjs/components/table/hooks/use-selectable-row.js.map +1 -1
- package/dist/commonjs/components/table/table-body-row.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-body-row.js +4 -5
- package/dist/commonjs/components/table/table-body-row.js.map +1 -1
- package/dist/esm/components/table/hooks/use-selectable-row.d.ts +3 -0
- package/dist/esm/components/table/hooks/use-selectable-row.d.ts.map +1 -1
- package/dist/esm/components/table/hooks/use-selectable-row.js +2 -0
- package/dist/esm/components/table/hooks/use-selectable-row.js.map +1 -1
- package/dist/esm/components/table/table-body-row.d.ts.map +1 -1
- package/dist/esm/components/table/table-body-row.js +5 -6
- package/dist/esm/components/table/table-body-row.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { NativeElementProps } from '../../types.js';
|
|
2
|
+
import { type RowSelectionMode } from '../contexts/table-state.js';
|
|
2
3
|
export interface UseSelectableRow {
|
|
3
4
|
rowProps: NativeElementProps<HTMLTableRowElement>;
|
|
5
|
+
isSelected?: boolean;
|
|
6
|
+
rowSelectionMode: RowSelectionMode;
|
|
4
7
|
}
|
|
5
8
|
export declare function useSelectableRow(): UseSelectableRow;
|
|
6
9
|
//# sourceMappingURL=use-selectable-row.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-selectable-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"use-selectable-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,4BAA4B,CAAC;AAElF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,wBAAgB,gBAAgB,IAAI,gBAAgB,CAsCnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-selectable-row.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-selectable-row.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":";;AAWA,4CAsCC;AA/CD,2DAA4D;AAC5D,+DAAkF;AAQlF,SAAgB,gBAAgB;IAC9B,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAC1E,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IAE7D,0CAA0C;IAC1C,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;YAChC,kCAAkC;YAClC,iBAAiB,EAAE,EAAE,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YAC3G,sCAAsC;YACtC,0FAA0F;YAC1F,mHAAmH;YACnH,2BAA2B,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;aAAM,CAAC;YACN,6FAA6F;YAC7F,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAA4C;QACxD,gBAAgB,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;KAC7E,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,UAAU;QACV,gBAAgB;KACjB,CAAC;AACJ,CAAC","sourcesContent":["import type { KeyboardEventHandler } from 'react';\nimport type { NativeElementProps } from '../../types.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { type RowSelectionMode, useTableState } from '../contexts/table-state.js';\n\nexport interface UseSelectableRow {\n rowProps: NativeElementProps<HTMLTableRowElement>;\n isSelected?: boolean;\n rowSelectionMode: RowSelectionMode;\n}\n\nexport function useSelectableRow(): UseSelectableRow {\n const { rowSelectionMode, setPendingRowSelectionState } = useTableState();\n const { isSelected, onSelectionToggle } = useTableRowState();\n\n // Handles row selection using a keyboard.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element)) {\n return;\n }\n\n if (e.key === ' ' && e.shiftKey) {\n // Toggle selection of current row\n onSelectionToggle?.();\n } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.shiftKey && rowSelectionMode === 'multiple') {\n // Extend selection up/down by one row\n // We're not going to stop propagation so that the arrow navigation handler runs as usual,\n // and we'll set a special state variable so that the selection state gets updated when the new row receives focus.\n setPendingRowSelectionState(isSelected);\n return;\n } else {\n // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n };\n\n const rowProps: NativeElementProps<HTMLTableRowElement> = {\n onKeyDownCapture: rowSelectionMode !== 'none' ? onKeyDownCapture : undefined,\n };\n\n return {\n rowProps,\n isSelected,\n rowSelectionMode,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAoBD;;;;GAIG;AACH,QAAA,MAAM,aAAa,uHAA2C,CAAC;AAyB/D,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}
|
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
4
4
|
exports.TableBodyRow = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const utils_1 = require("@react-aria/utils");
|
|
7
|
+
const react_aria_1 = require("react-aria");
|
|
7
8
|
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
8
9
|
const row_state_js_1 = require("./contexts/row-state.js");
|
|
9
|
-
const table_state_js_1 = require("./contexts/table-state.js");
|
|
10
10
|
const use_selectable_row_js_1 = require("./hooks/use-selectable-row.js");
|
|
11
11
|
function TableBodyRow({ isSelected, onSelectionToggle, ...props }, ref) {
|
|
12
12
|
const rowKey = (0, utils_1.useId)();
|
|
@@ -20,9 +20,8 @@ function TableBodyRow({ isSelected, onSelectionToggle, ...props }, ref) {
|
|
|
20
20
|
const _TableBodyRow = (0, forward_ref_js_1.forwardRef)(TableBodyRow, 'TableBodyRow');
|
|
21
21
|
exports.TableBodyRow = _TableBodyRow;
|
|
22
22
|
function TableBodyRowInner({ props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, forwardedRef, }) {
|
|
23
|
-
const { rowSelectionMode } = (0,
|
|
24
|
-
const {
|
|
25
|
-
|
|
26
|
-
return ((0, jsx_runtime_1.jsx)("tr", { ...(0, utils_1.mergeProps)(rowProps, props), ref: forwardedRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, "aria-selected": rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined, children: children }));
|
|
23
|
+
const { rowProps, isSelected, rowSelectionMode } = (0, use_selectable_row_js_1.useSelectableRow)();
|
|
24
|
+
const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)("tr", { ...(0, utils_1.mergeProps)(rowProps, hoverProps, props), ref: forwardedRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, "aria-selected": rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined, "data-hovered": isHovered || undefined, "data-selected": isSelected || undefined, children: children }));
|
|
27
26
|
}
|
|
28
27
|
//# sourceMappingURL=table-body-row.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAAsD;AAEtD,yDAAkD;AAElD,
|
|
1
|
+
{"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAAsD;AAEtD,2CAAsC;AACtC,yDAAkD;AAElD,0DAAgE;AAChE,yEAAiE;AAiCjE,SAAS,YAAY,CACnB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAqB,EAC9D,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAA,aAAK,GAAE,CAAC;IAEvB,OAAO,CACL,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,YACjG,uBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GAChC,CACzB,CAAC;AACJ,CAAC;AAOD;;;;GAIG;AACH,MAAM,aAAa,GAAG,IAAA,2BAAU,EAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAyBrC,qCAAY;AAvBtC,SAAS,iBAAiB,CAAC,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACxE,YAAY,GACW;IACvB,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,IAAA,wCAAgB,GAAE,CAAC;IACtE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAA,qBAAQ,EAAC,EAAE,CAAC,CAAC;IAE/C,OAAO,CACL,kCACM,IAAA,kBAAU,EAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,EAC3C,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,SAAS,mBACT,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,kBAChE,SAAS,IAAI,SAAS,mBACrB,UAAU,IAAI,SAAS,YAErC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { useHover } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider } from './contexts/row-state.js';\nimport { useSelectableRow } from './hooks/use-selectable-row.js';\n\nexport interface TableBodyRowProps extends CommonProps {\n /** The cells that belong to this row. */\n children: ReactNode;\n /**\n * The row's position within the full dataset, including headers.\n *\n * Provide this value if your table presents a subset of rows, such as when using pagination.\n *\n * This number must be:\n * - greater than or equal to `1`\n * - greater than the `rowNumber` of any previous rows\n * - less than or equal to the `totalRowCount` of the parent `Table`\n *\n * Use together with `totalRowCount` on the `Table` component.\n */\n rowNumber?: number;\n /**\n * Whether the row is selected.\n *\n * This value will be ignored if `rowSelectionMode` on the `Table` component is set to `'none'`.\n */\n isSelected?: boolean;\n /**\n * A function called when the row's selection state should change.\n *\n * If called without an argument, you are free to pick the new selection state based on your own logic.\n * If called with an argument, you must set the selection state to the provided value.\n */\n onSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction TableBodyRow(\n { isSelected, onSelectionToggle, ...props }: TableBodyRowProps,\n ref: ForwardedRef<HTMLTableRowElement>,\n) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey} isSelected={isSelected} onSelectionToggle={onSelectionToggle}>\n <TableBodyRowInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\ninterface TableBodyRowInnerProps {\n props: Omit<TableBodyRowProps, 'isSelected' | 'onSelectionToggle'>;\n forwardedRef: ForwardedRef<HTMLTableRowElement>;\n}\n\n/**\n * Renders a row within a table body.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');\n\nfunction TableBodyRowInner({\n props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props },\n forwardedRef,\n}: TableBodyRowInnerProps) {\n const { rowProps, isSelected, rowSelectionMode } = useSelectableRow();\n const { hoverProps, isHovered } = useHover({});\n\n return (\n <tr\n {...mergeProps(rowProps, hoverProps, props)}\n ref={forwardedRef}\n className={UNSAFE_className}\n style={UNSAFE_style}\n aria-rowindex={rowNumber}\n aria-selected={rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined}\n data-hovered={isHovered || undefined}\n data-selected={isSelected || undefined}\n >\n {children}\n </tr>\n );\n}\n\nexport { _TableBodyRow as TableBodyRow };\n"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { NativeElementProps } from '../../types.js';
|
|
2
|
+
import { type RowSelectionMode } from '../contexts/table-state.js';
|
|
2
3
|
export interface UseSelectableRow {
|
|
3
4
|
rowProps: NativeElementProps<HTMLTableRowElement>;
|
|
5
|
+
isSelected?: boolean;
|
|
6
|
+
rowSelectionMode: RowSelectionMode;
|
|
4
7
|
}
|
|
5
8
|
export declare function useSelectableRow(): UseSelectableRow;
|
|
6
9
|
//# sourceMappingURL=use-selectable-row.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-selectable-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"use-selectable-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,4BAA4B,CAAC;AAElF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,wBAAgB,gBAAgB,IAAI,gBAAgB,CAsCnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-selectable-row.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,
|
|
1
|
+
{"version":3,"file":"use-selectable-row.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAyB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQlF,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,aAAa,EAAE,CAAC;IAC1E,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE7D,0CAA0C;IAC1C,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;YAChC,kCAAkC;YAClC,iBAAiB,EAAE,EAAE,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YAC3G,sCAAsC;YACtC,0FAA0F;YAC1F,mHAAmH;YACnH,2BAA2B,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;aAAM,CAAC;YACN,6FAA6F;YAC7F,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAA4C;QACxD,gBAAgB,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;KAC7E,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,UAAU;QACV,gBAAgB;KACjB,CAAC;AACJ,CAAC","sourcesContent":["import type { KeyboardEventHandler } from 'react';\nimport type { NativeElementProps } from '../../types.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { type RowSelectionMode, useTableState } from '../contexts/table-state.js';\n\nexport interface UseSelectableRow {\n rowProps: NativeElementProps<HTMLTableRowElement>;\n isSelected?: boolean;\n rowSelectionMode: RowSelectionMode;\n}\n\nexport function useSelectableRow(): UseSelectableRow {\n const { rowSelectionMode, setPendingRowSelectionState } = useTableState();\n const { isSelected, onSelectionToggle } = useTableRowState();\n\n // Handles row selection using a keyboard.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element)) {\n return;\n }\n\n if (e.key === ' ' && e.shiftKey) {\n // Toggle selection of current row\n onSelectionToggle?.();\n } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.shiftKey && rowSelectionMode === 'multiple') {\n // Extend selection up/down by one row\n // We're not going to stop propagation so that the arrow navigation handler runs as usual,\n // and we'll set a special state variable so that the selection state gets updated when the new row receives focus.\n setPendingRowSelectionState(isSelected);\n return;\n } else {\n // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n };\n\n const rowProps: NativeElementProps<HTMLTableRowElement> = {\n onKeyDownCapture: rowSelectionMode !== 'none' ? onKeyDownCapture : undefined,\n };\n\n return {\n rowProps,\n isSelected,\n rowSelectionMode,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAoBD;;;;GAIG;AACH,QAAA,MAAM,aAAa,uHAA2C,CAAC;AAyB/D,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { mergeProps, useId } from '@react-aria/utils';
|
|
4
|
+
import { useHover } from 'react-aria';
|
|
4
5
|
import { forwardRef } from '../../forward-ref.js';
|
|
5
|
-
import { TableRowStateProvider
|
|
6
|
-
import { useTableState } from './contexts/table-state.js';
|
|
6
|
+
import { TableRowStateProvider } from './contexts/row-state.js';
|
|
7
7
|
import { useSelectableRow } from './hooks/use-selectable-row.js';
|
|
8
8
|
function TableBodyRow({ isSelected, onSelectionToggle, ...props }, ref) {
|
|
9
9
|
const rowKey = useId();
|
|
@@ -16,10 +16,9 @@ function TableBodyRow({ isSelected, onSelectionToggle, ...props }, ref) {
|
|
|
16
16
|
*/
|
|
17
17
|
const _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');
|
|
18
18
|
function TableBodyRowInner({ props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, forwardedRef, }) {
|
|
19
|
-
const { rowSelectionMode } =
|
|
20
|
-
const {
|
|
21
|
-
|
|
22
|
-
return (_jsx("tr", { ...mergeProps(rowProps, props), ref: forwardedRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, "aria-selected": rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined, children: children }));
|
|
19
|
+
const { rowProps, isSelected, rowSelectionMode } = useSelectableRow();
|
|
20
|
+
const { hoverProps, isHovered } = useHover({});
|
|
21
|
+
return (_jsx("tr", { ...mergeProps(rowProps, hoverProps, props), ref: forwardedRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, "aria-selected": rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined, "data-hovered": isHovered || undefined, "data-selected": isSelected || undefined, children: children }));
|
|
23
22
|
}
|
|
24
23
|
export { _TableBodyRow as TableBodyRow };
|
|
25
24
|
//# sourceMappingURL=table-body-row.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAiCjE,SAAS,YAAY,CACnB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAqB,EAC9D,GAAsC;IAEtC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,YACjG,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GAChC,CACzB,CAAC;AACJ,CAAC;AAOD;;;;GAIG;AACH,MAAM,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAE/D,SAAS,iBAAiB,CAAC,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACxE,YAAY,GACW;IACvB,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,OAAO,CACL,gBACM,UAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,EAC3C,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,SAAS,mBACT,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,kBAChE,SAAS,IAAI,SAAS,mBACrB,UAAU,IAAI,SAAS,YAErC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { useHover } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider } from './contexts/row-state.js';\nimport { useSelectableRow } from './hooks/use-selectable-row.js';\n\nexport interface TableBodyRowProps extends CommonProps {\n /** The cells that belong to this row. */\n children: ReactNode;\n /**\n * The row's position within the full dataset, including headers.\n *\n * Provide this value if your table presents a subset of rows, such as when using pagination.\n *\n * This number must be:\n * - greater than or equal to `1`\n * - greater than the `rowNumber` of any previous rows\n * - less than or equal to the `totalRowCount` of the parent `Table`\n *\n * Use together with `totalRowCount` on the `Table` component.\n */\n rowNumber?: number;\n /**\n * Whether the row is selected.\n *\n * This value will be ignored if `rowSelectionMode` on the `Table` component is set to `'none'`.\n */\n isSelected?: boolean;\n /**\n * A function called when the row's selection state should change.\n *\n * If called without an argument, you are free to pick the new selection state based on your own logic.\n * If called with an argument, you must set the selection state to the provided value.\n */\n onSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction TableBodyRow(\n { isSelected, onSelectionToggle, ...props }: TableBodyRowProps,\n ref: ForwardedRef<HTMLTableRowElement>,\n) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey} isSelected={isSelected} onSelectionToggle={onSelectionToggle}>\n <TableBodyRowInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\ninterface TableBodyRowInnerProps {\n props: Omit<TableBodyRowProps, 'isSelected' | 'onSelectionToggle'>;\n forwardedRef: ForwardedRef<HTMLTableRowElement>;\n}\n\n/**\n * Renders a row within a table body.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');\n\nfunction TableBodyRowInner({\n props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props },\n forwardedRef,\n}: TableBodyRowInnerProps) {\n const { rowProps, isSelected, rowSelectionMode } = useSelectableRow();\n const { hoverProps, isHovered } = useHover({});\n\n return (\n <tr\n {...mergeProps(rowProps, hoverProps, props)}\n ref={forwardedRef}\n className={UNSAFE_className}\n style={UNSAFE_style}\n aria-rowindex={rowNumber}\n aria-selected={rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined}\n data-hovered={isHovered || undefined}\n data-selected={isSelected || undefined}\n >\n {children}\n </tr>\n );\n}\n\nexport { _TableBodyRow as TableBodyRow };\n"]}
|