@cimpress-ui/react 1.20.0 → 1.22.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/app-header/side-nav.js +1 -1
- package/dist/commonjs/components/app-header/side-nav.js.map +1 -1
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.js +3 -2
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/commonjs/components/combo-box/combo-box.d.ts +7 -1
- package/dist/commonjs/components/combo-box/combo-box.d.ts.map +1 -1
- package/dist/commonjs/components/combo-box/combo-box.js +6 -2
- package/dist/commonjs/components/combo-box/combo-box.js.map +1 -1
- package/dist/commonjs/components/date-picker/views/view-grid-cell.js +5 -5
- package/dist/commonjs/components/date-picker/views/view-grid-cell.js.map +1 -1
- package/dist/commonjs/components/file-picker/file-picker.d.ts.map +1 -1
- package/dist/commonjs/components/file-picker/file-picker.js +4 -3
- package/dist/commonjs/components/file-picker/file-picker.js.map +1 -1
- package/dist/commonjs/components/internal/focusable-container/focusable-container.js +4 -4
- package/dist/commonjs/components/internal/focusable-container/focusable-container.js.map +1 -1
- package/dist/commonjs/components/link-tabs/link-tabs.d.ts.map +1 -1
- package/dist/commonjs/components/link-tabs/link-tabs.js +4 -4
- package/dist/commonjs/components/link-tabs/link-tabs.js.map +1 -1
- package/dist/commonjs/components/progress-bar/progress-bar.js +2 -2
- package/dist/commonjs/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/commonjs/components/slider/slider.js +2 -2
- package/dist/commonjs/components/slider/slider.js.map +1 -1
- package/dist/commonjs/components/table/contexts/table-state.d.ts.map +1 -1
- package/dist/commonjs/components/table/contexts/table-state.js +2 -1
- package/dist/commonjs/components/table/contexts/table-state.js.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table-cell.js +3 -2
- package/dist/commonjs/components/table/hooks/use-table-cell.js.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table.d.ts.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table.js +4 -3
- package/dist/commonjs/components/table/hooks/use-table.js.map +1 -1
- package/dist/commonjs/components/table/table-body-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-body-cell.js +3 -3
- package/dist/commonjs/components/table/table-body-cell.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 +2 -3
- package/dist/commonjs/components/table/table-body-row.js.map +1 -1
- package/dist/commonjs/components/table/table-empty-state.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-empty-state.js +4 -4
- package/dist/commonjs/components/table/table-empty-state.js.map +1 -1
- package/dist/commonjs/components/table/table-header-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-header-cell.js +4 -4
- package/dist/commonjs/components/table/table-header-cell.js.map +1 -1
- package/dist/commonjs/components/table/table-header-row.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-header-row.js +2 -2
- package/dist/commonjs/components/table/table-header-row.js.map +1 -1
- package/dist/commonjs/components/table/table.d.ts.map +1 -1
- package/dist/commonjs/components/table/table.js +3 -3
- package/dist/commonjs/components/table/table.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field-input.js +8 -15
- package/dist/commonjs/components/tag-field/tag-field-input.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field-list-box.js +2 -36
- package/dist/commonjs/components/tag-field/tag-field-list-box.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field.d.ts +1 -1
- package/dist/commonjs/components/tag-field/tag-field.d.ts.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field.js +17 -92
- package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
- package/dist/commonjs/components/text-inputs/text-field.js +4 -4
- package/dist/commonjs/components/text-inputs/text-field.js.map +1 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts.map +1 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js +2 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js.map +1 -1
- package/dist/commonjs/components/typography/link.d.ts +1 -1
- package/dist/commonjs/components/typography/link.d.ts.map +1 -1
- package/dist/commonjs/components/typography/link.js.map +1 -1
- package/dist/commonjs/icons/{unstable-expand.d.ts → bookmark-fill.d.ts} +3 -3
- package/dist/commonjs/icons/bookmark-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/{unstable-expand.js → bookmark-fill.js} +6 -6
- package/dist/commonjs/icons/bookmark-fill.js.map +1 -0
- package/dist/{esm/icons/unstable-expand.d.ts → commonjs/icons/bookmark.d.ts} +3 -3
- package/dist/commonjs/icons/bookmark.d.ts.map +1 -0
- package/dist/commonjs/icons/bookmark.js +24 -0
- package/dist/commonjs/icons/bookmark.js.map +1 -0
- package/dist/commonjs/icons/carousel.d.ts +8 -0
- package/dist/commonjs/icons/carousel.d.ts.map +1 -0
- package/dist/commonjs/icons/carousel.js +24 -0
- package/dist/commonjs/icons/carousel.js.map +1 -0
- package/dist/commonjs/icons/cloud-links.d.ts +8 -0
- package/dist/commonjs/icons/cloud-links.d.ts.map +1 -0
- package/dist/commonjs/icons/cloud-links.js +24 -0
- package/dist/commonjs/icons/cloud-links.js.map +1 -0
- package/dist/commonjs/icons/columns.d.ts +8 -0
- package/dist/commonjs/icons/columns.d.ts.map +1 -0
- package/dist/commonjs/icons/columns.js +24 -0
- package/dist/commonjs/icons/columns.js.map +1 -0
- package/dist/commonjs/icons/crop.d.ts +8 -0
- package/dist/commonjs/icons/crop.d.ts.map +1 -0
- package/dist/commonjs/icons/crop.js +24 -0
- package/dist/commonjs/icons/crop.js.map +1 -0
- package/dist/commonjs/icons/expand.d.ts +8 -0
- package/dist/commonjs/icons/expand.d.ts.map +1 -0
- package/dist/commonjs/icons/expand.js +24 -0
- package/dist/commonjs/icons/expand.js.map +1 -0
- package/dist/commonjs/icons/fill.d.ts +8 -0
- package/dist/commonjs/icons/fill.d.ts.map +1 -0
- package/dist/commonjs/icons/fill.js +24 -0
- package/dist/commonjs/icons/fill.js.map +1 -0
- package/dist/commonjs/icons/fit.d.ts +8 -0
- package/dist/commonjs/icons/fit.d.ts.map +1 -0
- package/dist/commonjs/icons/fit.js +24 -0
- package/dist/commonjs/icons/fit.js.map +1 -0
- package/dist/commonjs/icons/flow.d.ts +8 -0
- package/dist/commonjs/icons/flow.d.ts.map +1 -0
- package/dist/commonjs/icons/flow.js +24 -0
- package/dist/commonjs/icons/flow.js.map +1 -0
- package/dist/commonjs/icons/folder-database.d.ts +8 -0
- package/dist/commonjs/icons/folder-database.d.ts.map +1 -0
- package/dist/commonjs/icons/folder-database.js +24 -0
- package/dist/commonjs/icons/folder-database.js.map +1 -0
- package/dist/commonjs/icons/grid.d.ts +8 -0
- package/dist/commonjs/icons/grid.d.ts.map +1 -0
- package/dist/commonjs/icons/grid.js +24 -0
- package/dist/commonjs/icons/grid.js.map +1 -0
- package/dist/commonjs/icons/index.d.ts +19 -1
- package/dist/commonjs/icons/index.d.ts.map +1 -1
- package/dist/commonjs/icons/index.js +43 -7
- package/dist/commonjs/icons/index.js.map +1 -1
- package/dist/commonjs/icons/placement.d.ts +8 -0
- package/dist/commonjs/icons/placement.d.ts.map +1 -0
- package/dist/commonjs/icons/placement.js +24 -0
- package/dist/commonjs/icons/placement.js.map +1 -0
- package/dist/commonjs/icons/query.d.ts +8 -0
- package/dist/commonjs/icons/query.d.ts.map +1 -0
- package/dist/commonjs/icons/query.js +24 -0
- package/dist/commonjs/icons/query.js.map +1 -0
- package/dist/commonjs/icons/rows.d.ts +8 -0
- package/dist/commonjs/icons/rows.d.ts.map +1 -0
- package/dist/commonjs/icons/rows.js +24 -0
- package/dist/commonjs/icons/rows.js.map +1 -0
- package/dist/commonjs/icons/rules.d.ts +8 -0
- package/dist/commonjs/icons/rules.d.ts.map +1 -0
- package/dist/commonjs/icons/rules.js +24 -0
- package/dist/commonjs/icons/rules.js.map +1 -0
- package/dist/commonjs/icons/table.d.ts +8 -0
- package/dist/commonjs/icons/table.d.ts.map +1 -0
- package/dist/commonjs/icons/table.js +24 -0
- package/dist/commonjs/icons/table.js.map +1 -0
- package/dist/commonjs/icons/tags.d.ts +8 -0
- package/dist/commonjs/icons/tags.d.ts.map +1 -0
- package/dist/commonjs/icons/tags.js +24 -0
- package/dist/commonjs/icons/tags.js.map +1 -0
- package/dist/commonjs/icons/variants.d.ts +8 -0
- package/dist/commonjs/icons/variants.d.ts.map +1 -0
- package/dist/commonjs/icons/variants.js +24 -0
- package/dist/commonjs/icons/variants.js.map +1 -0
- package/dist/esm/components/app-header/side-nav.js +2 -2
- package/dist/esm/components/app-header/side-nav.js.map +1 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.js +2 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/esm/components/combo-box/combo-box.d.ts +7 -1
- package/dist/esm/components/combo-box/combo-box.d.ts.map +1 -1
- package/dist/esm/components/combo-box/combo-box.js +6 -2
- package/dist/esm/components/combo-box/combo-box.js.map +1 -1
- package/dist/esm/components/date-picker/views/view-grid-cell.js +3 -3
- package/dist/esm/components/date-picker/views/view-grid-cell.js.map +1 -1
- package/dist/esm/components/file-picker/file-picker.d.ts.map +1 -1
- package/dist/esm/components/file-picker/file-picker.js +2 -1
- package/dist/esm/components/file-picker/file-picker.js.map +1 -1
- package/dist/esm/components/internal/focusable-container/focusable-container.js +2 -2
- package/dist/esm/components/internal/focusable-container/focusable-container.js.map +1 -1
- package/dist/esm/components/link-tabs/link-tabs.d.ts.map +1 -1
- package/dist/esm/components/link-tabs/link-tabs.js +1 -1
- package/dist/esm/components/link-tabs/link-tabs.js.map +1 -1
- package/dist/esm/components/progress-bar/progress-bar.js +1 -1
- package/dist/esm/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/esm/components/slider/slider.js +1 -1
- package/dist/esm/components/slider/slider.js.map +1 -1
- package/dist/esm/components/table/contexts/table-state.d.ts.map +1 -1
- package/dist/esm/components/table/contexts/table-state.js +2 -1
- package/dist/esm/components/table/contexts/table-state.js.map +1 -1
- package/dist/esm/components/table/hooks/use-table-cell.d.ts.map +1 -1
- package/dist/esm/components/table/hooks/use-table-cell.js +3 -2
- package/dist/esm/components/table/hooks/use-table-cell.js.map +1 -1
- package/dist/esm/components/table/hooks/use-table.d.ts.map +1 -1
- package/dist/esm/components/table/hooks/use-table.js +4 -3
- package/dist/esm/components/table/hooks/use-table.js.map +1 -1
- package/dist/esm/components/table/table-body-cell.d.ts.map +1 -1
- package/dist/esm/components/table/table-body-cell.js +1 -1
- package/dist/esm/components/table/table-body-cell.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 +1 -2
- package/dist/esm/components/table/table-body-row.js.map +1 -1
- package/dist/esm/components/table/table-empty-state.d.ts.map +1 -1
- package/dist/esm/components/table/table-empty-state.js +1 -1
- package/dist/esm/components/table/table-empty-state.js.map +1 -1
- package/dist/esm/components/table/table-header-cell.d.ts.map +1 -1
- package/dist/esm/components/table/table-header-cell.js +1 -1
- package/dist/esm/components/table/table-header-cell.js.map +1 -1
- package/dist/esm/components/table/table-header-row.d.ts.map +1 -1
- package/dist/esm/components/table/table-header-row.js +1 -1
- package/dist/esm/components/table/table-header-row.js.map +1 -1
- package/dist/esm/components/table/table.d.ts.map +1 -1
- package/dist/esm/components/table/table.js +1 -1
- package/dist/esm/components/table/table.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field-input.js +9 -16
- package/dist/esm/components/tag-field/tag-field-input.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field-list-box.js +4 -38
- package/dist/esm/components/tag-field/tag-field-list-box.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field.d.ts +1 -1
- package/dist/esm/components/tag-field/tag-field.d.ts.map +1 -1
- package/dist/esm/components/tag-field/tag-field.js +19 -94
- package/dist/esm/components/tag-field/tag-field.js.map +1 -1
- package/dist/esm/components/text-inputs/text-field.js +1 -1
- package/dist/esm/components/text-inputs/text-field.js.map +1 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.js +2 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.js.map +1 -1
- package/dist/esm/components/typography/link.d.ts +1 -1
- package/dist/esm/components/typography/link.d.ts.map +1 -1
- package/dist/esm/components/typography/link.js.map +1 -1
- package/dist/esm/icons/bookmark-fill.d.ts +8 -0
- package/dist/esm/icons/bookmark-fill.d.ts.map +1 -0
- package/dist/esm/icons/bookmark-fill.js +19 -0
- package/dist/esm/icons/bookmark-fill.js.map +1 -0
- package/dist/esm/icons/bookmark.d.ts +8 -0
- package/dist/esm/icons/bookmark.d.ts.map +1 -0
- package/dist/esm/icons/bookmark.js +19 -0
- package/dist/esm/icons/bookmark.js.map +1 -0
- package/dist/esm/icons/carousel.d.ts +8 -0
- package/dist/esm/icons/carousel.d.ts.map +1 -0
- package/dist/esm/icons/carousel.js +19 -0
- package/dist/esm/icons/carousel.js.map +1 -0
- package/dist/esm/icons/cloud-links.d.ts +8 -0
- package/dist/esm/icons/cloud-links.d.ts.map +1 -0
- package/dist/esm/icons/cloud-links.js +19 -0
- package/dist/esm/icons/cloud-links.js.map +1 -0
- package/dist/esm/icons/columns.d.ts +8 -0
- package/dist/esm/icons/columns.d.ts.map +1 -0
- package/dist/esm/icons/columns.js +19 -0
- package/dist/esm/icons/columns.js.map +1 -0
- package/dist/esm/icons/crop.d.ts +8 -0
- package/dist/esm/icons/crop.d.ts.map +1 -0
- package/dist/esm/icons/crop.js +19 -0
- package/dist/esm/icons/crop.js.map +1 -0
- package/dist/esm/icons/expand.d.ts +8 -0
- package/dist/esm/icons/expand.d.ts.map +1 -0
- package/dist/esm/icons/expand.js +19 -0
- package/dist/esm/icons/expand.js.map +1 -0
- package/dist/esm/icons/fill.d.ts +8 -0
- package/dist/esm/icons/fill.d.ts.map +1 -0
- package/dist/esm/icons/fill.js +19 -0
- package/dist/esm/icons/fill.js.map +1 -0
- package/dist/esm/icons/fit.d.ts +8 -0
- package/dist/esm/icons/fit.d.ts.map +1 -0
- package/dist/esm/icons/fit.js +19 -0
- package/dist/esm/icons/fit.js.map +1 -0
- package/dist/esm/icons/flow.d.ts +8 -0
- package/dist/esm/icons/flow.d.ts.map +1 -0
- package/dist/esm/icons/flow.js +19 -0
- package/dist/esm/icons/flow.js.map +1 -0
- package/dist/esm/icons/folder-database.d.ts +8 -0
- package/dist/esm/icons/folder-database.d.ts.map +1 -0
- package/dist/esm/icons/folder-database.js +19 -0
- package/dist/esm/icons/folder-database.js.map +1 -0
- package/dist/esm/icons/grid.d.ts +8 -0
- package/dist/esm/icons/grid.d.ts.map +1 -0
- package/dist/esm/icons/grid.js +19 -0
- package/dist/esm/icons/grid.js.map +1 -0
- package/dist/esm/icons/index.d.ts +19 -1
- package/dist/esm/icons/index.d.ts.map +1 -1
- package/dist/esm/icons/index.js +19 -1
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/icons/placement.d.ts +8 -0
- package/dist/esm/icons/placement.d.ts.map +1 -0
- package/dist/esm/icons/placement.js +19 -0
- package/dist/esm/icons/placement.js.map +1 -0
- package/dist/esm/icons/query.d.ts +8 -0
- package/dist/esm/icons/query.d.ts.map +1 -0
- package/dist/esm/icons/query.js +19 -0
- package/dist/esm/icons/query.js.map +1 -0
- package/dist/esm/icons/rows.d.ts +8 -0
- package/dist/esm/icons/rows.d.ts.map +1 -0
- package/dist/esm/icons/rows.js +19 -0
- package/dist/esm/icons/rows.js.map +1 -0
- package/dist/esm/icons/rules.d.ts +8 -0
- package/dist/esm/icons/rules.d.ts.map +1 -0
- package/dist/esm/icons/rules.js +19 -0
- package/dist/esm/icons/rules.js.map +1 -0
- package/dist/esm/icons/table.d.ts +8 -0
- package/dist/esm/icons/table.d.ts.map +1 -0
- package/dist/esm/icons/table.js +19 -0
- package/dist/esm/icons/table.js.map +1 -0
- package/dist/esm/icons/tags.d.ts +8 -0
- package/dist/esm/icons/tags.d.ts.map +1 -0
- package/dist/esm/icons/tags.js +19 -0
- package/dist/esm/icons/tags.js.map +1 -0
- package/dist/esm/icons/variants.d.ts +8 -0
- package/dist/esm/icons/variants.d.ts.map +1 -0
- package/dist/esm/icons/variants.js +19 -0
- package/dist/esm/icons/variants.js.map +1 -0
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +12 -12
- package/dist/commonjs/components/tag-field/tag-field-tags.d.ts +0 -2
- package/dist/commonjs/components/tag-field/tag-field-tags.d.ts.map +0 -1
- package/dist/commonjs/components/tag-field/tag-field-tags.js +0 -31
- package/dist/commonjs/components/tag-field/tag-field-tags.js.map +0 -1
- package/dist/commonjs/icons/unstable-expand.d.ts.map +0 -1
- package/dist/commonjs/icons/unstable-expand.js.map +0 -1
- package/dist/esm/components/tag-field/tag-field-tags.d.ts +0 -2
- package/dist/esm/components/tag-field/tag-field-tags.d.ts.map +0 -1
- package/dist/esm/components/tag-field/tag-field-tags.js +0 -28
- package/dist/esm/components/tag-field/tag-field-tags.js.map +0 -1
- package/dist/esm/icons/unstable-expand.d.ts.map +0 -1
- package/dist/esm/icons/unstable-expand.js +0 -19
- package/dist/esm/icons/unstable-expand.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,cAAc,IAAI,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrG,OAAO,EAAqE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAMhE,MAAM,UAAU,YAAY,CAC1B,GAA2C,EAC3C,MAAc,EACd,SAAiB;IAEjB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,GAAG,aAAa,EAAE,CAAC;IAClF,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,YAAY,EAAE,CAAC;IAE1E,MAAM,UAAU,GAAG,MAAM,KAAK,UAAU,CAAC,aAAa,IAAI,SAAS,KAAK,UAAU,CAAC,gBAAgB,CAAC;IAEpG,6BAA6B;IAC7B,sFAAsF;IACtF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,qEAAqE;QACrE,gIAAgI;QAChI,IAAI,wBAAwB,KAAK,SAAS,EAAE,CAAC;YAC3C,iBAAiB,EAAE,CAAC,wBAAwB,CAAC,CAAC;YAC9C,2BAA2B,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,iGAAiG;QACjG,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC3F,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACvD,MAAM,SAAS,GAAG,UAAU,CAAC,kBAAkB,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;QAE9G,IAAI,SAAS,EAAE,CAAC;YACd,+CAA+C;YAC/C,eAAe,CAAC,SAA6B,CAAC,CAAC;QACjD,CAAC;aAAM,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACzD,iGAAiG;YACjG,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC;aAAM,IAAI,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;YACjE,uFAAuF;YACvF,UAAU,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,8DAA8D;IAC9D,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,IAAI,CAAC,GAAG,CAAC,OAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACjE,SAAS,EAAE,CAAC;QACd,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtB,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,EAAE;QAC5C,IAAI,UAAU,EAAE,CAAC;YACf,UAAU,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,mDAAmD;IACnD,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,cAAc,EAAE,CAAC;IACnB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,OAAO,GAAsB,CAAC,CAAC,EAAE,EAAE;QACvC,+CAA+C;QAC/C,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,4CAA4C;QAC5C,gGAAgG;QAChG,yEAAyE;QACzE,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,cAAc,EAAE,EAAE,CAAC;YAClE,OAAO;QACT,CAAC;QAED,4DAA4D;QAC5D,2FAA2F;QAC3F,iEAAiE;QACjE,+EAA+E;QAC/E,+DAA+D;QAC/D,mFAAmF;QACnF,gEAAgE;QAChE,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YACtB,UAAU,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;YAC7B,qFAAqF;YACrF,mEAAmE;YACnE,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,QAAQ,CAAC,aAAa,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;oBAC3C,SAAS,EAAE,CAAC;gBACd,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IAEF,0EAA0E;IAC1E,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC9F,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC;QAE5C,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YACpD,8DAA8D;YAC9D,MAAM,mBAAmB,GAAG,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YAE9F,IAAI,mBAAmB,IAAI,mBAAmB,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;gBAC/D,eAAe,CAAC,mBAAuC,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,uHAAuH;gBACvH,8EAA8E;gBAC9E,0IAA0I;gBAC1I,6EAA6E;gBAC7E,GAAG,CAAC,OAAO,CAAC,aAAc,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;YACjG,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACxD,wDAAwD;YACxD,8EAA8E;YAC9E,0IAA0I;YAC1I,6EAA6E;YAC7E,GAAG,CAAC,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;QACjG,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,WAAW,GAA6C;QAC5D,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,OAAO;QACP,gBAAgB;QAChB,mBAAmB,EAAE,MAAM;QAC3B,sBAAsB,EAAE,SAAS;QACjC,oBAAoB,EAAE,kBAAkB,IAAI,SAAS;KACtD,CAAC;IAEF,OAAO;QACL,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC;KAC/C,CAAC;AACJ,CAAC","sourcesContent":["import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { mergeProps, useEffectEvent as useRACEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n ref: RefObject<HTMLTableCellElement | null>,\n rowKey: string,\n columnKey: string,\n): UseTableCell {\n const tableFocus = useTableFocus();\n const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n const { onSelectionToggle } = useTableRowState();\n\n const { focusProps, isFocusVisible: isCellFocusVisible } = useFocusRing();\n\n const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n // Handles focusing the cell.\n // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n const focusCell = () => {\n if (!ref.current) {\n return;\n }\n\n // If there's a pending selection state, apply it to this cell's row.\n // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n if (pendingRowSelectionState !== undefined) {\n onSelectionToggle?.(pendingRowSelectionState);\n setPendingRowSelectionState(undefined);\n }\n\n // If focus is already on a focusable child within the cell, early return so we don't shift focus\n if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n return;\n }\n\n const treeWalker = getFocusableTreeWalker(ref.current);\n const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n if (focusable) {\n // Cell has focusable children, focus the child\n focusTableChild(focusable as FocusableElement);\n } else if (!ref.current.contains(document.activeElement)) {\n // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n focusTableChild(ref.current);\n } else if (ref.current === document.activeElement && !isTabbable) {\n // Focus is on the current cell, but table focus is elsewhere, update table focus state\n tableFocus.setFocus(rowKey, columnKey);\n }\n };\n\n // Focus the cell DOM node when table focus moves to this cell\n useLayoutEffect(() => {\n if (isTabbable && !ref.current!.contains(document.activeElement)) {\n focusCell();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, isTabbable]);\n\n const resetIfFocused = useRACEffectEvent(() => {\n if (isTabbable) {\n tableFocus.setFocus('', '');\n }\n });\n\n // Reset table focus when the focused cell unmounts\n useEffect(\n () => () => {\n resetIfFocused();\n },\n [resetIfFocused],\n );\n\n const onFocus: FocusEventHandler = (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n // If cell is already focused, return early.\n // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n // otherwise `useFocusRing` will force the cell itself to become focused.\n if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n return;\n }\n\n // There are 3 scenarios for why a cell might receive focus:\n // - focus happens through a press, we need to update table focus state to the current cell\n // - focus happens through arrow key navigation within the table,\n // we do nothing as table focus state would have already been updated earlier\n // - focus happens through tabbing into the table from outside,\n // we do nothing because we want to restore focus to the previously focused cell,\n // and overriding table focus state would make that impossible\n if (!isFocusVisible()) {\n tableFocus.setFocus(rowKey, columnKey);\n }\n\n if (e.target === ref.current) {\n // If the cell itself receives focus, wait a frame so that focus finishes propagating\n // up to the tree, and move focus to a focusable child if possible.\n requestAnimationFrame(() => {\n if (document.activeElement === ref.current) {\n focusCell();\n }\n });\n }\n };\n\n // Handles keyboard navigation between focusable children within the cell.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {\n return;\n }\n\n const walker = getFocusableTreeWalker(ref.current);\n walker.currentNode = document.activeElement;\n\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n // Move to the previous/next focusable element within the cell\n const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n if (childElementToFocus && childElementToFocus !== ref.current) {\n focusTableChild(childElementToFocus as FocusableElement);\n } else {\n // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n }\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n // Move to the previous/next cell in the current column.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\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 customProps: NativeElementProps<HTMLTableCellElement> = {\n tabIndex: isTabbable ? 0 : -1,\n onFocus,\n onKeyDownCapture,\n 'data-cell-row-key': rowKey,\n 'data-cell-column-key': columnKey,\n 'data-focus-visible': isCellFocusVisible || undefined,\n };\n\n return {\n cellProps: mergeProps(focusProps, customProps),\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzF,OAAO,EAAqE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrG,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAMhE,MAAM,UAAU,YAAY,CAC1B,GAA2C,EAC3C,MAAc,EACd,SAAiB;IAEjB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,GAAG,aAAa,EAAE,CAAC;IAClF,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,YAAY,EAAE,CAAC;IAE1E,MAAM,UAAU,GAAG,MAAM,KAAK,UAAU,CAAC,aAAa,IAAI,SAAS,KAAK,UAAU,CAAC,gBAAgB,CAAC;IAEpG,6BAA6B;IAC7B,sFAAsF;IACtF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,qEAAqE;QACrE,gIAAgI;QAChI,IAAI,wBAAwB,KAAK,SAAS,EAAE,CAAC;YAC3C,iBAAiB,EAAE,CAAC,wBAAwB,CAAC,CAAC;YAC9C,2BAA2B,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,iGAAiG;QACjG,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC3F,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACvD,MAAM,SAAS,GAAG,UAAU,CAAC,kBAAkB,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;QAE9G,IAAI,SAAS,EAAE,CAAC;YACd,+CAA+C;YAC/C,eAAe,CAAC,SAA6B,CAAC,CAAC;QACjD,CAAC;aAAM,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACzD,iGAAiG;YACjG,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC;aAAM,IAAI,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;YACjE,uFAAuF;YACvF,UAAU,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,8DAA8D;IAC9D,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,IAAI,CAAC,GAAG,CAAC,OAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACjE,SAAS,EAAE,CAAC;QACd,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtB,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,EAAE;QAC5C,IAAI,UAAU,EAAE,CAAC;YACf,UAAU,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,mDAAmD;IACnD,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,cAAc,EAAE,CAAC;IACnB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,OAAO,GAAsB,CAAC,CAAC,EAAE,EAAE;QACvC,+CAA+C;QAC/C,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,4CAA4C;QAC5C,gGAAgG;QAChG,yEAAyE;QACzE,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,cAAc,EAAE,EAAE,CAAC;YAClE,OAAO;QACT,CAAC;QAED,4DAA4D;QAC5D,2FAA2F;QAC3F,iEAAiE;QACjE,+EAA+E;QAC/E,+DAA+D;QAC/D,mFAAmF;QACnF,gEAAgE;QAChE,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YACtB,UAAU,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;YAC7B,qFAAqF;YACrF,mEAAmE;YACnE,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,QAAQ,CAAC,aAAa,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;oBAC3C,SAAS,EAAE,CAAC;gBACd,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IAEF,0EAA0E;IAC1E,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC9F,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC;QAE5C,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YACpD,8DAA8D;YAC9D,MAAM,mBAAmB,GAAG,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YAE9F,IAAI,mBAAmB,IAAI,mBAAmB,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;gBAC/D,eAAe,CAAC,mBAAuC,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,uHAAuH;gBACvH,8EAA8E;gBAC9E,0IAA0I;gBAC1I,6EAA6E;gBAC7E,GAAG,CAAC,OAAO,CAAC,aAAc,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;YACjG,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACxD,wDAAwD;YACxD,8EAA8E;YAC9E,0IAA0I;YAC1I,6EAA6E;YAC7E,GAAG,CAAC,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;QACjG,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,WAAW,GAA6C;QAC5D,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,OAAO;QACP,gBAAgB;QAChB,mBAAmB,EAAE,MAAM;QAC3B,sBAAsB,EAAE,SAAS;QACjC,oBAAoB,EAAE,kBAAkB,IAAI,SAAS;KACtD,CAAC;IAEF,OAAO;QACL,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC;KAC/C,CAAC;AACJ,CAAC","sourcesContent":["import { getFocusableTreeWalker } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { useEffectEvent as useRACEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport { useFocusRing, mergeProps } from 'react-aria';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n ref: RefObject<HTMLTableCellElement | null>,\n rowKey: string,\n columnKey: string,\n): UseTableCell {\n const tableFocus = useTableFocus();\n const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n const { onSelectionToggle } = useTableRowState();\n\n const { focusProps, isFocusVisible: isCellFocusVisible } = useFocusRing();\n\n const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n // Handles focusing the cell.\n // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n const focusCell = () => {\n if (!ref.current) {\n return;\n }\n\n // If there's a pending selection state, apply it to this cell's row.\n // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n if (pendingRowSelectionState !== undefined) {\n onSelectionToggle?.(pendingRowSelectionState);\n setPendingRowSelectionState(undefined);\n }\n\n // If focus is already on a focusable child within the cell, early return so we don't shift focus\n if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n return;\n }\n\n const treeWalker = getFocusableTreeWalker(ref.current);\n const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n if (focusable) {\n // Cell has focusable children, focus the child\n focusTableChild(focusable as FocusableElement);\n } else if (!ref.current.contains(document.activeElement)) {\n // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n focusTableChild(ref.current);\n } else if (ref.current === document.activeElement && !isTabbable) {\n // Focus is on the current cell, but table focus is elsewhere, update table focus state\n tableFocus.setFocus(rowKey, columnKey);\n }\n };\n\n // Focus the cell DOM node when table focus moves to this cell\n useLayoutEffect(() => {\n if (isTabbable && !ref.current!.contains(document.activeElement)) {\n focusCell();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, isTabbable]);\n\n const resetIfFocused = useRACEffectEvent(() => {\n if (isTabbable) {\n tableFocus.setFocus('', '');\n }\n });\n\n // Reset table focus when the focused cell unmounts\n useEffect(\n () => () => {\n resetIfFocused();\n },\n [resetIfFocused],\n );\n\n const onFocus: FocusEventHandler = (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n // If cell is already focused, return early.\n // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n // otherwise `useFocusRing` will force the cell itself to become focused.\n if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n return;\n }\n\n // There are 3 scenarios for why a cell might receive focus:\n // - focus happens through a press, we need to update table focus state to the current cell\n // - focus happens through arrow key navigation within the table,\n // we do nothing as table focus state would have already been updated earlier\n // - focus happens through tabbing into the table from outside,\n // we do nothing because we want to restore focus to the previously focused cell,\n // and overriding table focus state would make that impossible\n if (!isFocusVisible()) {\n tableFocus.setFocus(rowKey, columnKey);\n }\n\n if (e.target === ref.current) {\n // If the cell itself receives focus, wait a frame so that focus finishes propagating\n // up to the tree, and move focus to a focusable child if possible.\n requestAnimationFrame(() => {\n if (document.activeElement === ref.current) {\n focusCell();\n }\n });\n }\n };\n\n // Handles keyboard navigation between focusable children within the cell.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {\n return;\n }\n\n const walker = getFocusableTreeWalker(ref.current);\n walker.currentNode = document.activeElement;\n\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n // Move to the previous/next focusable element within the cell\n const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n if (childElementToFocus && childElementToFocus !== ref.current) {\n focusTableChild(childElementToFocus as FocusableElement);\n } else {\n // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n }\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n // Move to the previous/next cell in the current column.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\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 customProps: NativeElementProps<HTMLTableCellElement> = {\n tabIndex: isTabbable ? 0 : -1,\n onFocus,\n onKeyDownCapture,\n 'data-cell-row-key': rowKey,\n 'data-cell-column-key': columnKey,\n 'data-focus-visible': isCellFocusVisible || undefined,\n };\n\n return {\n cellProps: mergeProps(focusProps, customProps),\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAK3E,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAClD;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,QAAQ,CAkK1E"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { getFocusableTreeWalker
|
|
2
|
-
import { getInteractionModality
|
|
3
|
-
import { isCtrlKeyPressed
|
|
1
|
+
import { getFocusableTreeWalker } from '@react-aria/focus';
|
|
2
|
+
import { getInteractionModality } from '@react-aria/interactions';
|
|
3
|
+
import { isCtrlKeyPressed } from '@react-aria/utils';
|
|
4
|
+
import { useFocusable, useKeyboard, mergeProps } from 'react-aria';
|
|
4
5
|
import { useTableFocus } from '../contexts/focus.js';
|
|
5
6
|
import { useTableState } from '../contexts/table-state.js';
|
|
6
7
|
import { focusTableChild } from '../utils/focus-table-child.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusable } from '@react-aria/focus';\nimport { getInteractionModality, useKeyboard } from '@react-aria/interactions';\nimport { isCtrlKeyPressed, mergeProps } from '@react-aria/utils';\nimport type { FocusEventHandler, RefObject } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { type ChildFocusStrategy, useTableFocus } from '../contexts/focus.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTable {\n tableProps: NativeElementProps<HTMLTableElement>;\n}\n\nexport function useTable(ref: RefObject<HTMLTableElement | null>): UseTable {\n const tableFocus = useTableFocus();\n const { rowSelectionMode, onAllRowsSelectionToggle } = useTableState();\n\n const restoreCellFocus: FocusEventHandler = (e) => {\n if (!tableFocus.focusedRowKey || !tableFocus.focusedColumnKey) {\n // User hasn't interacted with the table yet.\n // Focus the first or last cell, depending on which direction the user is tabbing from.\n const lastFocusedElement = e.relatedTarget as Element;\n const cellElements = e.currentTarget.querySelectorAll('[data-cell-row-key][data-cell-column-key]');\n let cellElementToFocus: Element | undefined;\n\n if (\n lastFocusedElement &&\n e.currentTarget.compareDocumentPosition(lastFocusedElement) & Node.DOCUMENT_POSITION_FOLLOWING\n ) {\n cellElementToFocus = cellElements[cellElements.length - 1];\n } else {\n cellElementToFocus = cellElements[0];\n }\n\n const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n // We know the keys are defined, because we queried the DOM for elements that have them\n tableFocus.setFocus(cellRowKey!, cellColumnKey!);\n } else {\n const element = e.currentTarget.querySelector(\n `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n ) as HTMLTableCellElement;\n\n if (element) {\n // If focus is already within the cell, don't refocus\n if (!element.contains(document.activeElement)) {\n focusTableChild(element);\n }\n }\n }\n };\n\n const { focusableProps } = useFocusable(\n {\n onFocus: (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n restoreCellFocus(e);\n },\n },\n ref,\n );\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n const focusedCellElement = e.currentTarget.querySelector(\n `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n ) as HTMLTableCellElement;\n\n let cellElementToFocus: Node | null = null;\n let newChildFocusStrategy: ChildFocusStrategy | undefined;\n\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n // Focus previous/next cell in the same row\n const selector = `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}']:not([data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}'])`;\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n cellElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n newChildFocusStrategy = e.key === 'ArrowLeft' ? 'last' : 'first';\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n // Focus previous/next cell in the same column\n const selector = constructColumnSelector(\n e.currentTarget,\n tableFocus.focusedRowKey,\n tableFocus.focusedColumnKey,\n );\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n cellElementToFocus = e.key === 'ArrowUp' ? walker.previousNode() : walker.nextNode();\n } else if (e.key === 'PageUp' || e.key === 'PageDown') {\n // Move focus up/down by 5 rows\n const selector = constructColumnSelector(\n e.currentTarget,\n tableFocus.focusedRowKey,\n tableFocus.focusedColumnKey,\n );\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n\n const advance = e.key === 'PageUp' ? walker.previousNode.bind(walker) : walker.nextNode.bind(walker);\n\n // `advance()` will do nothing if there's no appropriate node found, so it's safe to just call it 5 times\n for (let i = 0; i < 5; i++) {\n advance();\n }\n\n cellElementToFocus = walker.currentNode;\n } else if (e.key === 'Home' || e.key === 'End') {\n // If Ctrl/Cmd is pressed, move focus to the first/last cell of the table;\n // otherwise, move focus to the first/last cell of the current row\n const selector = '[data-cell-row-key][data-cell-column-key]';\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = isCtrlKeyPressed(e) ? e.currentTarget : focusedCellElement.parentElement!;\n cellElementToFocus = e.key === 'Home' ? walker.firstChild() : walker.lastChild();\n newChildFocusStrategy = e.key === 'Home' ? 'first' : 'last';\n } else if (e.key === 'Tab') {\n // Table is supposed to be a single Tab stop, but cells may contain elements that are tabbable (checkboxes, buttons, menus, etc.).\n // We don't control the rendering of these elements, so we can't override their tabIndex to prevent tabbing.\n // Instead, we detect when Tab key is pressed, and move focus manually to the guard element before/after the table,\n // so that the browser default behavior will apply starting from that element rather than the currently focused one.\n const tableElement = e.currentTarget as HTMLTableElement;\n const guardElement = e.shiftKey ? tableElement.previousElementSibling : tableElement.nextElementSibling;\n\n if (guardElement) {\n focusTableChild(guardElement as FocusableElement);\n }\n\n return;\n } else if (e.key === 'a' && isCtrlKeyPressed(e) && rowSelectionMode === 'multiple') {\n // Select all rows\n onAllRowsSelectionToggle?.(true);\n } else {\n // if we didn't handle anything, return early so we don't preventDefault\n return;\n }\n\n if (cellElementToFocus) {\n const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n // We know the keys are defined, because we queried the DOM for elements that have them\n tableFocus.setFocus(cellRowKey!, cellColumnKey!, newChildFocusStrategy);\n }\n\n e.preventDefault();\n },\n });\n\n const customProps: NativeElementProps<HTMLTableElement> = {\n role: 'grid',\n // If no cell is tabbable within the table, make the table itself tabbable,\n // otherwise the Tab key will just skip it\n tabIndex: tableFocus.focusedRowKey && tableFocus.focusedColumnKey ? -1 : 0,\n onFocusCapture: (e) => {\n // If we're navigating into the table with a keyboard, focus the last focused cell instead of the first tabbable element\n if (\n getInteractionModality() === 'keyboard' &&\n !e.currentTarget.contains(e.relatedTarget) &&\n e.currentTarget.contains(e.target)\n ) {\n restoreCellFocus(e);\n }\n },\n };\n\n return {\n tableProps: mergeProps(focusableProps, keyboardProps, customProps),\n };\n}\n\n/** Constructs a DOM selector for cells in the same column, taking `colspan` into account. */\nfunction constructColumnSelector(tableElement: HTMLTableElement, rowKey: string, columnKey: string): string {\n const baseSelector = `[data-cell-column-key='${CSS.escape(columnKey)}']:not([data-cell-row-key='${CSS.escape(rowKey)}'])`;\n const columnHeader = tableElement.querySelector(\n `th[data-cell-row-key='${CSS.escape(rowKey)}'][data-cell-column-key='${CSS.escape(columnKey)}']`,\n );\n\n const columnSelectors: string[] = [baseSelector];\n\n let currentColumn = columnHeader?.previousElementSibling;\n\n while (currentColumn) {\n const { cellColumnKey } = (currentColumn as HTMLElement).dataset;\n\n if (cellColumnKey) {\n columnSelectors.push(\n `[data-cell-column-key='${CSS.escape(cellColumnKey)}'][colspan]:not([data-cell-row-key='${CSS.escape(rowKey)}'])`,\n );\n }\n\n currentColumn = currentColumn.previousElementSibling;\n }\n\n return `:is(${columnSelectors.join(', ')})`;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-table.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker } from '@react-aria/focus';\nimport { getInteractionModality } from '@react-aria/interactions';\nimport { isCtrlKeyPressed } from '@react-aria/utils';\nimport type { FocusEventHandler, RefObject } from 'react';\nimport { useFocusable, useKeyboard, mergeProps } from 'react-aria';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { type ChildFocusStrategy, useTableFocus } from '../contexts/focus.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTable {\n tableProps: NativeElementProps<HTMLTableElement>;\n}\n\nexport function useTable(ref: RefObject<HTMLTableElement | null>): UseTable {\n const tableFocus = useTableFocus();\n const { rowSelectionMode, onAllRowsSelectionToggle } = useTableState();\n\n const restoreCellFocus: FocusEventHandler = (e) => {\n if (!tableFocus.focusedRowKey || !tableFocus.focusedColumnKey) {\n // User hasn't interacted with the table yet.\n // Focus the first or last cell, depending on which direction the user is tabbing from.\n const lastFocusedElement = e.relatedTarget as Element;\n const cellElements = e.currentTarget.querySelectorAll('[data-cell-row-key][data-cell-column-key]');\n let cellElementToFocus: Element | undefined;\n\n if (\n lastFocusedElement &&\n e.currentTarget.compareDocumentPosition(lastFocusedElement) & Node.DOCUMENT_POSITION_FOLLOWING\n ) {\n cellElementToFocus = cellElements[cellElements.length - 1];\n } else {\n cellElementToFocus = cellElements[0];\n }\n\n const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n // We know the keys are defined, because we queried the DOM for elements that have them\n tableFocus.setFocus(cellRowKey!, cellColumnKey!);\n } else {\n const element = e.currentTarget.querySelector(\n `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n ) as HTMLTableCellElement;\n\n if (element) {\n // If focus is already within the cell, don't refocus\n if (!element.contains(document.activeElement)) {\n focusTableChild(element);\n }\n }\n }\n };\n\n const { focusableProps } = useFocusable(\n {\n onFocus: (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n restoreCellFocus(e);\n },\n },\n ref,\n );\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n const focusedCellElement = e.currentTarget.querySelector(\n `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n ) as HTMLTableCellElement;\n\n let cellElementToFocus: Node | null = null;\n let newChildFocusStrategy: ChildFocusStrategy | undefined;\n\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n // Focus previous/next cell in the same row\n const selector = `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}']:not([data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}'])`;\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n cellElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n newChildFocusStrategy = e.key === 'ArrowLeft' ? 'last' : 'first';\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n // Focus previous/next cell in the same column\n const selector = constructColumnSelector(\n e.currentTarget,\n tableFocus.focusedRowKey,\n tableFocus.focusedColumnKey,\n );\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n cellElementToFocus = e.key === 'ArrowUp' ? walker.previousNode() : walker.nextNode();\n } else if (e.key === 'PageUp' || e.key === 'PageDown') {\n // Move focus up/down by 5 rows\n const selector = constructColumnSelector(\n e.currentTarget,\n tableFocus.focusedRowKey,\n tableFocus.focusedColumnKey,\n );\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n\n const advance = e.key === 'PageUp' ? walker.previousNode.bind(walker) : walker.nextNode.bind(walker);\n\n // `advance()` will do nothing if there's no appropriate node found, so it's safe to just call it 5 times\n for (let i = 0; i < 5; i++) {\n advance();\n }\n\n cellElementToFocus = walker.currentNode;\n } else if (e.key === 'Home' || e.key === 'End') {\n // If Ctrl/Cmd is pressed, move focus to the first/last cell of the table;\n // otherwise, move focus to the first/last cell of the current row\n const selector = '[data-cell-row-key][data-cell-column-key]';\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = isCtrlKeyPressed(e) ? e.currentTarget : focusedCellElement.parentElement!;\n cellElementToFocus = e.key === 'Home' ? walker.firstChild() : walker.lastChild();\n newChildFocusStrategy = e.key === 'Home' ? 'first' : 'last';\n } else if (e.key === 'Tab') {\n // Table is supposed to be a single Tab stop, but cells may contain elements that are tabbable (checkboxes, buttons, menus, etc.).\n // We don't control the rendering of these elements, so we can't override their tabIndex to prevent tabbing.\n // Instead, we detect when Tab key is pressed, and move focus manually to the guard element before/after the table,\n // so that the browser default behavior will apply starting from that element rather than the currently focused one.\n const tableElement = e.currentTarget as HTMLTableElement;\n const guardElement = e.shiftKey ? tableElement.previousElementSibling : tableElement.nextElementSibling;\n\n if (guardElement) {\n focusTableChild(guardElement as FocusableElement);\n }\n\n return;\n } else if (e.key === 'a' && isCtrlKeyPressed(e) && rowSelectionMode === 'multiple') {\n // Select all rows\n onAllRowsSelectionToggle?.(true);\n } else {\n // if we didn't handle anything, return early so we don't preventDefault\n return;\n }\n\n if (cellElementToFocus) {\n const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n // We know the keys are defined, because we queried the DOM for elements that have them\n tableFocus.setFocus(cellRowKey!, cellColumnKey!, newChildFocusStrategy);\n }\n\n e.preventDefault();\n },\n });\n\n const customProps: NativeElementProps<HTMLTableElement> = {\n role: 'grid',\n // If no cell is tabbable within the table, make the table itself tabbable,\n // otherwise the Tab key will just skip it\n tabIndex: tableFocus.focusedRowKey && tableFocus.focusedColumnKey ? -1 : 0,\n onFocusCapture: (e) => {\n // If we're navigating into the table with a keyboard, focus the last focused cell instead of the first tabbable element\n if (\n getInteractionModality() === 'keyboard' &&\n !e.currentTarget.contains(e.relatedTarget) &&\n e.currentTarget.contains(e.target)\n ) {\n restoreCellFocus(e);\n }\n },\n };\n\n return {\n tableProps: mergeProps(focusableProps, keyboardProps, customProps),\n };\n}\n\n/** Constructs a DOM selector for cells in the same column, taking `colspan` into account. */\nfunction constructColumnSelector(tableElement: HTMLTableElement, rowKey: string, columnKey: string): string {\n const baseSelector = `[data-cell-column-key='${CSS.escape(columnKey)}']:not([data-cell-row-key='${CSS.escape(rowKey)}'])`;\n const columnHeader = tableElement.querySelector(\n `th[data-cell-row-key='${CSS.escape(rowKey)}'][data-cell-column-key='${CSS.escape(columnKey)}']`,\n );\n\n const columnSelectors: string[] = [baseSelector];\n\n let currentColumn = columnHeader?.previousElementSibling;\n\n while (currentColumn) {\n const { cellColumnKey } = (currentColumn as HTMLElement).dataset;\n\n if (cellColumnKey) {\n columnSelectors.push(\n `[data-cell-column-key='${CSS.escape(cellColumnKey)}'][colspan]:not([data-cell-row-key='${CSS.escape(rowKey)}'])`,\n );\n }\n\n currentColumn = currentColumn.previousElementSibling;\n }\n\n return `:is(${columnSelectors.join(', ')})`;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-body-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAyBD;;;;GAIG;AACH,QAAA,MAAM,cAAc,yHAA6C,CAAC;AAElE,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useObjectRef } from '
|
|
3
|
+
import { mergeProps, useObjectRef } from 'react-aria';
|
|
4
4
|
import { forwardRef } from '../../forward-ref.js';
|
|
5
5
|
import { useColumnData } from './contexts/column-collection.js';
|
|
6
6
|
import { useTableRowState } from './contexts/row-state.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"table-body-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAYzD,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAsB,EACrF,GAAuC;IAEvC,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,UAAU,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,mBACrF,UAAU,EAAE,MAAM,oBACjB,UAAU,EAAE,gBAAgB,YAE3C,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AAElE,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { mergeProps, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useColumnData } from './contexts/column-collection.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableBodyCellProps extends CommonProps {\n /** The contents of the cell. */\n children: ReactNode;\n /**\n * A unique identifier for the column that this cell belongs to.\n * Cells that belong to the same column must have the same `columnKey`.\n */\n columnKey: string;\n}\n\nfunction TableBodyCell(\n { children, UNSAFE_className, UNSAFE_style, columnKey, ...props }: TableBodyCellProps,\n ref: ForwardedRef<HTMLTableCellElement>,\n) {\n const cellRef = useObjectRef(ref);\n const { rowKey } = useTableRowState();\n const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n const columnData = useColumnData(columnKey);\n\n return (\n <td\n {...mergeProps(props, cellProps)}\n ref={cellRef}\n className={UNSAFE_className}\n style={columnData?.width !== undefined ? { ...UNSAFE_style, width: columnData.width } : UNSAFE_style}\n aria-colindex={columnData?.number}\n data-alignment={columnData?.contentAlignment}\n >\n {children}\n </td>\n );\n}\n\n/**\n * Renders a cell within a table body row.\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 _TableBodyCell = forwardRef(TableBodyCell, 'TableBodyCell');\n\nexport { _TableBodyCell as TableBodyCell };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/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;AA6B/D,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useId } from '
|
|
4
|
-
import { useHover } from 'react-aria';
|
|
3
|
+
import { mergeProps, useHover, useId } from 'react-aria';
|
|
5
4
|
import { forwardRef } from '../../forward-ref.js';
|
|
6
5
|
import { useTableLoading } from './contexts/loading.js';
|
|
7
6
|
import { TableRowStateProvider } from './contexts/row-state.js';
|
|
@@ -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,
|
|
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,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,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;IAC/C,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IAEpC,OAAO,CACL,gBACM,UAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,EAGrC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACvC,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';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { mergeProps, useHover, useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useTableLoading } from './contexts/loading.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 const isLoading = useTableLoading();\n\n return (\n <tr\n {...mergeProps(rowProps, hoverProps, props)}\n // Workaround for React not having type definitions for the `inert` attribute\n // eslint-disable-next-line internal/no-extra-props-in-spread\n {...{ inert: isLoading ? '' : undefined }}\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAYD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AA6CxE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
|
|
4
3
|
import clsx from 'clsx';
|
|
4
|
+
import { mergeProps, useId, useObjectRef } from 'react-aria';
|
|
5
5
|
import { forwardRef } from '../../forward-ref.js';
|
|
6
6
|
import { Text } from '../typography/text.js';
|
|
7
7
|
import { useColumnData, useFullWidthCell } from './contexts/column-collection.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAWzD,SAAS,eAAe,CAAC,KAA2B,EAAE,GAAuC;IAC3F,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GACnC,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAOxE,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAC/E,YAAY,GACc;IAC1B,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,uBACE,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,EAC1D,KAAK,EAAE,YAAY,mBACJ,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,WAAW,GACP,EAEN,MAAM,IAAI,cAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,GAAO,IACnE,GACH,IArBC,gCAAgC,CAsBnC,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { mergeProps, useId, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { useColumnData, useFullWidthCell } from './contexts/column-collection.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableEmptyStateProps extends CommonProps {\n /** The title of the empty state. */\n title: string;\n /** The description of the empty state. */\n description: string;\n /** An optional action button displayed within the empty state. */\n action?: ReactNode;\n}\n\nfunction TableEmptyState(props: TableEmptyStateProps, ref: ForwardedRef<HTMLTableCellElement>) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey}>\n <TableEmptyStateInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\n/**\n * Renders an empty state within a table that has no data.\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 _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');\n\ninterface TableEmptyStateInnerProps {\n props: TableEmptyStateProps;\n forwardedRef: ForwardedRef<HTMLTableCellElement>;\n}\n\nfunction TableEmptyStateInner({\n props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props },\n forwardedRef,\n}: TableEmptyStateInnerProps) {\n const cellRef = useObjectRef(forwardedRef);\n const { columnKey, colSpan } = useFullWidthCell(cellRef);\n const { rowKey } = useTableRowState();\n // `useTableCell` requires `TableRowStateProvider`\n const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n const columnData = useColumnData(columnKey);\n\n return (\n <tr key=\"__cim__internal__empty-state__\">\n <td\n {...mergeProps(props, cellProps)}\n ref={cellRef}\n className={clsx('cim-table-empty-state', UNSAFE_className)}\n style={UNSAFE_style}\n aria-colindex={columnData?.number}\n colSpan={colSpan}\n data-alignment=\"center\"\n >\n <div className=\"cim-table-empty-state-content\">\n <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n {title}\n </Text>\n\n <Text as=\"span\" variant=\"medium\" tone=\"base\">\n {description}\n </Text>\n\n {action && <div className=\"cim-table-empty-state-action\">{action}</div>}\n </div>\n </td>\n </tr>\n );\n}\n\nexport { _TableEmptyState as TableEmptyState };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,KAAK,sBAAsB,EAAyB,MAAM,iCAAiC,CAAC;AAMrG,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgFD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AAExE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
|
|
4
3
|
import { useRef } from 'react';
|
|
4
|
+
import { mergeProps, useId, useObjectRef } from 'react-aria';
|
|
5
5
|
import { forwardRef } from '../../forward-ref.js';
|
|
6
6
|
import { IconSortAscending, IconSortDescending, IconSortUnsorted } from '../../icons/index.js';
|
|
7
7
|
import { useServerLayoutEffect } from '../../utils/use-server-layout-effect.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { mergeProps, useId, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconSortAscending, IconSortDescending, IconSortUnsorted } from '../../icons/index.js';\nimport { useServerLayoutEffect } from '../../utils/use-server-layout-effect.js';\nimport type { CommonProps } from '../types.js';\nimport { type ColumnContentAlignment, useColumnRegistration } from './contexts/column-collection.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableState } from './contexts/table-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\nimport { TableHeaderButton } from './table-header-button.js';\n\n/** Represents the sort order of a table column. */\nexport type TableColumnSortOrder = 'ascending' | 'descending';\n\nexport interface TableHeaderCellProps extends CommonProps {\n /** The contents of the header cell. */\n children: ReactNode;\n /**\n * A unique identifier for the column that this cell belongs to.\n * Cells that belong to the same column must have the same `columnKey`.\n */\n columnKey: string;\n /**\n * The position of the column that this cell belongs to within the full dataset.\n *\n * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n *\n * This number must be:\n * - greater than or equal to `1`\n * - greater than the `columnNumber` of any previous cells in the current row\n * - less than or equal to the `totalColumnCount` of the parent `Table`\n *\n * Use together with `totalColumnCount` on the `Table` component.\n */\n columnNumber?: number;\n /** The width of the column. Can be any valid value of the `width` CSS property. */\n columnWidth?: string | number;\n /**\n * Horizontal alignment of cell content within the column.\n * @default 'start'\n */\n columnContentAlignment?: ColumnContentAlignment;\n /**\n * The current sort order of the column.\n */\n sortOrder?: TableColumnSortOrder;\n /**\n * A function called when the column's sort order should change.\n * If not provided, the column will not be sortable.\n */\n onSortOrderToggle?: () => void;\n /** An icon displayed before the header text. */\n iconStart?: ReactNode;\n /** An icon displayed after the header text. */\n iconEnd?: ReactNode;\n}\n\nconst SORT_ORDER_ICONS: Record<TableColumnSortOrder, ReactNode> = {\n ascending: <IconSortAscending />,\n descending: <IconSortDescending />,\n};\n\nfunction TableHeaderCell(\n {\n children,\n UNSAFE_className,\n UNSAFE_style,\n columnKey,\n columnNumber,\n columnWidth,\n columnContentAlignment = 'start',\n sortOrder,\n onSortOrderToggle,\n iconStart,\n iconEnd,\n ...props\n }: TableHeaderCellProps,\n ref: ForwardedRef<HTMLTableCellElement>,\n) {\n const cellRef = useObjectRef(ref);\n const { rowKey } = useTableRowState();\n const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n const registerColumn = useColumnRegistration();\n const unregisterRef = useRef<(() => void) | null>(null);\n\n const { sortLabelId } = useTableState();\n const contentId = useId();\n\n const isSortable = typeof onSortOrderToggle === 'function';\n\n // Columns need to be registered during SSR to prevent layout shifting on hydration\n useServerLayoutEffect(() => {\n unregisterRef.current = registerColumn(columnKey, {\n number: columnNumber,\n width: columnWidth,\n contentAlignment: columnContentAlignment,\n });\n\n return () => {\n unregisterRef.current?.();\n unregisterRef.current = null;\n };\n }, [registerColumn, columnKey, columnNumber, columnWidth, columnContentAlignment]);\n\n return (\n <th\n {...mergeProps(props, cellProps)}\n ref={cellRef}\n className={UNSAFE_className}\n style={columnWidth ? { ...UNSAFE_style, width: columnWidth } : UNSAFE_style}\n scope=\"col\"\n aria-colindex={columnNumber}\n aria-sort={sortOrder}\n data-alignment={columnContentAlignment}\n >\n <div className=\"cim-table-header-cell-container\">\n {iconStart}\n <span id={contentId}>{children}</span>\n {iconEnd}\n {isSortable ? (\n <TableHeaderButton\n UNSAFE_className=\"cim-table-header-sort-button\"\n aria-labelledby={`${sortLabelId} ${contentId}`}\n icon={sortOrder ? SORT_ORDER_ICONS[sortOrder] : <IconSortUnsorted />}\n onPress={() => onSortOrderToggle()}\n data-highlighted={!!sortOrder || undefined}\n />\n ) : sortOrder ? (\n SORT_ORDER_ICONS[sortOrder]\n ) : undefined}\n </div>\n </th>\n );\n}\n\n/**\n * Renders a header cell within a table header row.\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 _TableHeaderCell = forwardRef(TableHeaderCell, 'TableHeaderCell');\n\nexport { _TableHeaderCell as TableHeaderCell };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAeD;;;;GAIG;AACH,QAAA,MAAM,eAAe,yHAA+C,CAAC;AAErE,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useId } from '
|
|
3
|
+
import { useId } from 'react-aria';
|
|
4
4
|
import { forwardRef } from '../../forward-ref.js';
|
|
5
5
|
import { TableRowStateProvider } from './contexts/row-state.js';
|
|
6
6
|
function TableHeaderRow({ children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-header-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"table-header-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAoBhE,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB,EACtF,GAAsC;IAEtC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,gBAAQ,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,mBAAiB,SAAS,YACjG,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YAAG,QAAQ,GAAyB,GACtE,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,UAAU,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAErE,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider } from './contexts/row-state.js';\n\nexport interface TableHeaderRowProps extends CommonProps {\n /** The header cells that belong to this header 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\nfunction TableHeaderRow(\n { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }: TableHeaderRowProps,\n ref: ForwardedRef<HTMLTableRowElement>,\n) {\n const rowKey = useId();\n\n return (\n <tr {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style} aria-rowindex={rowNumber}>\n <TableRowStateProvider rowKey={rowKey}>{children}</TableRowStateProvider>\n </tr>\n );\n}\n\n/**\n * Renders a row within a table header.\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 _TableHeaderRow = forwardRef(TableHeaderRow, 'TableHeaderRow');\n\nexport { _TableHeaderRow as TableHeaderRow };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIlE,OAAO,EAAE,KAAK,gBAAgB,EAAqC,MAAM,2BAA2B,CAAC;AAGrG,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,iBAAiB;IAChE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAwED;;;;GAIG;AACH,QAAA,MAAM,MAAM,6GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useObjectRef } from '
|
|
3
|
+
import { mergeProps, useObjectRef } from 'react-aria';
|
|
4
4
|
import { forwardRef } from '../../forward-ref.js';
|
|
5
5
|
import { useProductionWarning } from '../../utils/use-production-warning.js';
|
|
6
6
|
import { ColumnCollectionProvider } from './contexts/column-collection.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAyB,kBAAkB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAoDhD,SAAS,KAAK,CACZ,EACE,SAAS,GAAG,KAAK,EACjB,gBAAgB,GAAG,MAAM,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,GAAG,KAAK,EACG,EACb,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,KAAC,kBAAkB,cACjB,KAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,KAAC,oBAAoB,IAAC,SAAS,EAAE,SAAS,YACxC,MAAC,wBAAwB,eACvB,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IAC9B,GACN,GACJ,GACF,CACtB,CAAC;AACJ,CAAC;AAUD,SAAS,UAAU,CAAC,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAC9F,YAAY,GACI;IAChB,MAAM,QAAQ,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAE7C,OAAO,CACL,mBACM,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,EACjC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,aAAa,mBACb,gBAAgB,0BACT,gBAAgB,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,YAEvE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { mergeProps, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ColumnCollectionProvider } from './contexts/column-collection.js';\nimport { TableFocusProvider } from './contexts/focus.js';\nimport { TableLoadingProvider } from './contexts/loading.js';\nimport { type RowSelectionMode, TableStateProvider, useTableState } from './contexts/table-state.js';\nimport { useTable } from './hooks/use-table.js';\n\nexport interface TableProps extends CommonProps, AriaLabelingProps {\n /** The contents of the table. */\n children: ReactNode;\n /**\n * The number of rows in the full dataset, including headers.\n *\n * Provide this value if your table presents a subset of rows, such as when using pagination.\n * Use `-1` if the number of rows is not known.\n *\n * You must provide `rowNumber` on each table row if `totalRowCount` is defined.\n */\n totalRowCount?: number;\n /**\n * The number of columns in the full dataset.\n *\n * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n * Use `-1` if the number of columns is not known.\n *\n * You must provide `columnNumber` on each table header cell if `totalColumnCount` is defined.\n */\n totalColumnCount?: number;\n /**\n * The type of row selection that is allowed within the table.\n * @default 'none'\n */\n rowSelectionMode?: RowSelectionMode;\n /**\n * Whether all of the table's rows are selected.\n * The meaning of \"all rows\" is dictated by the consumer.\n */\n areAllRowsSelected?: boolean;\n /**\n * Whether some (but not all) of the table's rows are selected.\n * The meaning of \"some rows\" is dictated by the consumer.\n */\n areSomeRowsSelected?: boolean;\n /**\n * A function called when the selection state of all rows 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 onAllRowsSelectionToggle?: (value?: boolean) => void;\n /**\n * Whether the table is currently in a loading state.\n * @default false\n */\n isLoading?: boolean;\n}\n\nfunction Table(\n {\n isLoading = false,\n rowSelectionMode = 'none',\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle,\n ...props\n }: TableProps,\n ref: ForwardedRef<HTMLTableElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn('Table requires one of aria-label / aria-labelledby for accessibility');\n }\n }, [ariaLabel, ariaLabelledBy]);\n\n return (\n <TableFocusProvider>\n <TableStateProvider\n rowSelectionMode={rowSelectionMode}\n areAllRowsSelected={areAllRowsSelected}\n areSomeRowsSelected={areSomeRowsSelected}\n onAllRowsSelectionToggle={onAllRowsSelectionToggle}\n >\n <TableLoadingProvider isLoading={isLoading}>\n <ColumnCollectionProvider>\n <span tabIndex={-1} data-cim-table-guard aria-hidden />\n <TableInner props={props} forwardedRef={ref} />\n <span tabIndex={-1} data-cim-table-guard aria-hidden />\n </ColumnCollectionProvider>\n </TableLoadingProvider>\n </TableStateProvider>\n </TableFocusProvider>\n );\n}\n\ninterface TableInnerProps {\n props: Omit<\n TableProps,\n 'isLoading' | 'rowSelectionMode' | 'areAllRowsSelected' | 'areSomeRowsSelected' | 'onAllRowsSelectionToggle'\n >;\n forwardedRef: ForwardedRef<HTMLTableElement>;\n}\n\nfunction TableInner({\n props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props },\n forwardedRef,\n}: TableInnerProps) {\n const tableRef = useObjectRef(forwardedRef);\n const { tableProps } = useTable(tableRef);\n const { rowSelectionMode } = useTableState();\n\n return (\n <table\n {...mergeProps(props, tableProps)}\n ref={tableRef}\n className={UNSAFE_className}\n style={UNSAFE_style}\n aria-rowcount={totalRowCount}\n aria-colcount={totalColumnCount}\n aria-multiselectable={rowSelectionMode === 'multiple' ? true : undefined}\n >\n {children}\n </table>\n );\n}\n\n/**\n * Displays data in an organized, tabular way.\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 _Table = forwardRef(Table, 'Table');\n\nexport { _Table as Table };\n"]}
|
|
@@ -1,24 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useContext } from 'react';
|
|
4
|
-
import { ComboBoxStateContext as RACComboBoxStateContext, Input as RACInput
|
|
4
|
+
import { ComboBoxStateContext as RACComboBoxStateContext, Input as RACInput } from 'react-aria-components';
|
|
5
|
+
import { useLocalizedMessages } from '../../i18n/localization-provider.js';
|
|
5
6
|
import { textStyle } from '../typography/utils.js';
|
|
6
7
|
/** @internal */
|
|
7
|
-
export function TagFieldInput({ inputRef, isReadOnly,
|
|
8
|
+
export function TagFieldInput({ inputRef, isReadOnly, placeholder, }) {
|
|
8
9
|
const comboBoxState = useContext(RACComboBoxStateContext);
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
// Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers
|
|
16
|
-
required: false,
|
|
17
|
-
'aria-required': isRequired,
|
|
18
|
-
'aria-invalid': isInvalid || undefined,
|
|
19
|
-
}, children: _jsx(RACInput, { ref: inputRef, className: clsx('cim-combo-box-input', textStyle({ variant: 'body' })),
|
|
20
|
-
// Ensure the popover opens when the input is clicked.
|
|
21
|
-
// By default, React Aria only opens the popover when the input is focused.
|
|
22
|
-
onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder, onFocus: () => onFocusChange(true), onBlur: () => onFocusChange(false), "aria-describedby": [descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined }) }));
|
|
10
|
+
const messages = useLocalizedMessages('tagField');
|
|
11
|
+
const selectedItemCount = comboBoxState?.selectedItems.length ?? 0;
|
|
12
|
+
return (_jsx(RACInput, { ref: inputRef, className: clsx('cim-combo-box-input', textStyle({ variant: 'body' })),
|
|
13
|
+
// Ensure the popover opens when the input is clicked.
|
|
14
|
+
// By default, React Aria only opens the popover when the input is focused.
|
|
15
|
+
onClick: () => !isReadOnly && comboBoxState.open(), placeholder: selectedItemCount === 0 && placeholder ? placeholder : messages.format('itemsSelected', { selectedItemCount }) }));
|
|
23
16
|
}
|
|
24
17
|
//# sourceMappingURL=tag-field-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,
|
|
1
|
+
{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,oBAAoB,IAAI,uBAAuB,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC3G,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,WAAW,GAKZ;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAElD,MAAM,iBAAiB,GAAG,aAAa,EAAE,aAAa,CAAC,MAAM,IAAI,CAAC,CAAC;IAEnE,OAAO,CACL,KAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;QACtE,sDAAsD;QACtD,2EAA2E;QAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EACT,iBAAiB,KAAK,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,iBAAiB,EAAE,CAAC,GAEhH,CACH,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { type MutableRefObject, useContext } from 'react';\nimport { ComboBoxStateContext as RACComboBoxStateContext, Input as RACInput } from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n inputRef,\n isReadOnly,\n placeholder,\n}: {\n inputRef: MutableRefObject<HTMLInputElement | null>;\n isReadOnly: boolean | undefined;\n placeholder: string | undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const messages = useLocalizedMessages('tagField');\n\n const selectedItemCount = comboBoxState?.selectedItems.length ?? 0;\n\n return (\n <RACInput\n ref={inputRef}\n className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n // Ensure the popover opens when the input is clicked.\n // By default, React Aria only opens the popover when the input is focused.\n onClick={() => !isReadOnly && comboBoxState!.open()}\n placeholder={\n selectedItemCount === 0 && placeholder ? placeholder : messages.format('itemsSelected', { selectedItemCount })\n }\n />\n );\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useContext
|
|
2
|
+
import { useContext } from 'react';
|
|
3
3
|
import { usePreventScroll } from 'react-aria';
|
|
4
|
-
import { ComboBoxStateContext as RACComboBoxStateContext, ListBox as RACListBox, ListLayout as RACListLayout,
|
|
4
|
+
import { ComboBoxStateContext as RACComboBoxStateContext, ListBox as RACListBox, ListLayout as RACListLayout, Virtualizer as RACVirtualizer, } from 'react-aria-components';
|
|
5
5
|
const VIRTUAL_LAYOUT_OPTIONS = {
|
|
6
6
|
estimatedRowHeight: 36,
|
|
7
7
|
estimatedHeadingHeight: 32,
|
|
@@ -9,44 +9,10 @@ const VIRTUAL_LAYOUT_OPTIONS = {
|
|
|
9
9
|
gap: 0,
|
|
10
10
|
};
|
|
11
11
|
/** @internal */
|
|
12
|
-
export function TagFieldListBox({ children,
|
|
12
|
+
export function TagFieldListBox({ children, items, onScroll, isVirtualized, }) {
|
|
13
13
|
const comboBoxState = useContext(RACComboBoxStateContext);
|
|
14
|
-
const listState = useContext(RACListStateContext);
|
|
15
14
|
usePreventScroll({ isDisabled: !comboBoxState?.isOpen });
|
|
16
|
-
// Override RACListStateContext to allow multiple selection within the list
|
|
17
|
-
const updatedListState = useMemo(() => {
|
|
18
|
-
if (!listState || !listState.selectionManager) {
|
|
19
|
-
return listState;
|
|
20
|
-
}
|
|
21
|
-
// This is a temporary mutation before a context update, so this is fine
|
|
22
|
-
// @ts-expect-error `selectionManager.state` is private
|
|
23
|
-
// eslint-disable-next-line react-hooks/immutability
|
|
24
|
-
listState.selectionManager.state.selectionMode = 'multiple';
|
|
25
|
-
// @ts-expect-error `selectionManager.state` is private
|
|
26
|
-
// eslint-disable-next-line react-hooks/immutability
|
|
27
|
-
listState.selectionManager.state.selectedKeys = selectedKeys;
|
|
28
|
-
// @ts-expect-error `selectionManager.state` is private
|
|
29
|
-
// eslint-disable-next-line react-hooks/immutability
|
|
30
|
-
listState.selectionManager.state.setSelectedKeys = (keys) => {
|
|
31
|
-
if (keys === 'all') {
|
|
32
|
-
// When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,
|
|
33
|
-
// the selection manager emits the `'all'` string as an indication to select all items.
|
|
34
|
-
// We don't want to do that - instead, we select the contents of the input field.
|
|
35
|
-
// Querying by ID because RACInputContext has a null ref for some reason.
|
|
36
|
-
document.getElementById(inputId)?.select();
|
|
37
|
-
}
|
|
38
|
-
else {
|
|
39
|
-
setSelectedKeys(keys);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
// @ts-expect-error `selectionManager.state` is private
|
|
43
|
-
// eslint-disable-next-line react-hooks/immutability
|
|
44
|
-
listState.selectionManager.state.disallowEmptySelection = false;
|
|
45
|
-
return {
|
|
46
|
-
...listState,
|
|
47
|
-
};
|
|
48
|
-
}, [listState, selectedKeys, setSelectedKeys, inputId]);
|
|
49
15
|
const listBox = (_jsx(RACListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }));
|
|
50
|
-
return
|
|
16
|
+
return isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox);
|
|
51
17
|
}
|
|
52
18
|
//# sourceMappingURL=tag-field-list-box.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EACL,oBAAoB,IAAI,uBAAuB,EAC/C,OAAO,IAAI,UAAU,EACrB,UAAU,IAAI,aAAa,EAE3B,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,MAAM,sBAAsB,GAAyB;IACnD,kBAAkB,EAAE,EAAE;IACtB,sBAAsB,EAAE,EAAE;IAC1B,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,eAAe,CAA2B,EACxD,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,GAC+D;IAC5E,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAE1D,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAEzD,MAAM,OAAO,GAAG,CACd,KAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,CACd,CAAC;IAEF,OAAO,aAAa,CAAC,CAAC,CAAC,CACrB,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { useContext } from 'react';\nimport { usePreventScroll } from 'react-aria';\nimport {\n ComboBoxStateContext as RACComboBoxStateContext,\n ListBox as RACListBox,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport type { CollectionItem } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 36,\n estimatedHeadingHeight: 32,\n padding: 0,\n gap: 0,\n};\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n children,\n items,\n onScroll,\n isVirtualized,\n}: Pick<TagFieldProps<T>, 'children' | 'items' | 'onScroll' | 'isVirtualized'>) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n\n usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n const listBox = (\n <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n {children}\n </RACListBox>\n );\n\n return isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type UIEventHandler } from 'react';
|
|
2
2
|
import { type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
|
|
3
|
-
import type
|
|
3
|
+
import { type TagGroupProps } from '../tag/tag-group.js';
|
|
4
4
|
import type { ApiProps, CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
|
|
5
5
|
/** Represents the state of the `TagField` component for validation purposes. */
|
|
6
6
|
export interface TagFieldValidationValue {
|