@economic/taco 2.45.0-alpha.2 → 2.45.0-alpha.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Table3/components/Columns/Internal/EditingActionsMenu.d.ts +2 -2
- package/dist/esm/packages/taco/src/components/Button/util.js +1 -1
- package/dist/esm/packages/taco/src/components/Button/util.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js +2 -2
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js +5 -4
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js +12 -3
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js +5 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js +23 -16
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js +2 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js +4 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map +1 -1
- package/dist/taco.cjs.development.js +52 -27
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare type
|
|
2
|
+
declare type EditingActionsMenuProps = {
|
|
3
3
|
hasChanges: boolean;
|
|
4
4
|
hasErrors: boolean;
|
|
5
5
|
onDiscard: () => void;
|
|
6
6
|
onEditingSave: () => Promise<void>;
|
|
7
7
|
isLastRow: boolean;
|
|
8
8
|
};
|
|
9
|
-
export declare function
|
|
9
|
+
export declare function EditingActionsMenu(props: EditingActionsMenuProps): React.JSX.Element;
|
|
10
10
|
export {};
|
|
@@ -3,7 +3,7 @@ import { Button } from '../../primitives/Button.js';
|
|
|
3
3
|
import { Tooltip } from '../Tooltip/Tooltip.js';
|
|
4
4
|
|
|
5
5
|
const getButtonClasses = () => {
|
|
6
|
-
return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';
|
|
6
|
+
return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';
|
|
7
7
|
};
|
|
8
8
|
const getAppearanceClasses = (value, icon = false) => {
|
|
9
9
|
switch (value) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;\n\n case 'danger':\n return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;\n\n case 'ghost':\n return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;\n }\n\n return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;\n }\n\n case 'transparent': {\n return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n }\n\n default:\n return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;\n }\n};\n\nexport const createButtonWithTooltip = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { tooltip, ...buttonProps } = props;\n const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n if (tooltip) {\n return <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n const { dialog, drawer, hanger, menu, popover } = props;\n let button = buttonBase;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof drawer === 'function') {\n button = drawer({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,
|
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;\n\n case 'danger':\n return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;\n\n case 'ghost':\n return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;\n }\n\n return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;\n }\n\n case 'transparent': {\n return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n }\n\n default:\n return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;\n }\n};\n\nexport const createButtonWithTooltip = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { tooltip, ...buttonProps } = props;\n const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n if (tooltip) {\n return <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n const { dialog, drawer, hanger, menu, popover } = props;\n let button = buttonBase;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof drawer === 'function') {\n button = drawer({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,0NAA0N;AACrO;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,OAAO,qJAAqJ;IAEhK,KAAK,QAAQ;MACT,OAAO,+IAA+I;IAE1J,KAAK,OAAO;MACR,OAAO,kMAAkM;IAE7M,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,OAAO,iGAAiG;;QAG5G,OAAO,uGAAuG;;IAGlH,KAAK,aAAa;MAAE;QAChB,OAAO,+IAA+I;;IAG1J;MACI,OAAO,kHAAkH;;AAErI;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}
|
|
@@ -4,7 +4,7 @@ import { useLocalization } from '../../../../Provider/Localization.js';
|
|
|
4
4
|
import { Menu } from '../../../../Menu/Menu.js';
|
|
5
5
|
import { DiscardChangesConfirmationDialog } from '../../Editing/DiscardChangesConfirmationDialog.js';
|
|
6
6
|
|
|
7
|
-
function
|
|
7
|
+
function EditingActionsMenu(props) {
|
|
8
8
|
const {
|
|
9
9
|
hasChanges,
|
|
10
10
|
hasErrors,
|
|
@@ -48,5 +48,5 @@ function EditingActionMenu(props) {
|
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
export {
|
|
51
|
+
export { EditingActionsMenu };
|
|
52
52
|
//# sourceMappingURL=EditingActionsMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { DiscardChangesConfirmationDialog } from '../../Editing/DiscardChangesConfirmationDialog';\n\ntype
|
|
1
|
+
{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { DiscardChangesConfirmationDialog } from '../../Editing/DiscardChangesConfirmationDialog';\n\ntype EditingActionsMenuProps = {\n hasChanges: boolean;\n hasErrors: boolean;\n onDiscard: () => void;\n onEditingSave: () => Promise<void>;\n isLastRow: boolean;\n};\n\nexport function EditingActionsMenu(props: EditingActionsMenuProps) {\n const { hasChanges, hasErrors, onDiscard: handleDiscard, onEditingSave: handleSave, isLastRow } = props;\n const { texts } = useLocalization();\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n // normally we handle this on change of active row, but when tabbing out of the last row the active row state stays on the last one.\n if (isLastRow && hasChanges && event.key === 'Tab') {\n handleSave();\n }\n };\n\n const handleMenuContentKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n // Stops the keyboard event from propagating to the Table when EditActionsMenu is open\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.stopPropagation();\n }\n };\n\n return (\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table3.editing.actions.tooltip}\n icon=\"more\"\n onKeyDown={handleKeyDown}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content onKeyDown={handleMenuContentKeyDown}>\n <Menu.Item icon=\"tick\" disabled={!hasChanges || hasErrors} onClick={handleSave}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item\n icon=\"close\"\n disabled={!hasChanges}\n dialog={props => <DiscardChangesConfirmationDialog {...props} onDiscard={handleDiscard} />}>\n {texts.table3.editing.actions.clear}\n </Menu.Item>\n </Menu.Content>\n </Menu>\n )}\n />\n );\n}\n"],"names":["EditingActionsMenu","props","hasChanges","hasErrors","onDiscard","handleDiscard","onEditingSave","handleSave","isLastRow","texts","useLocalization","handleKeyDown","event","key","handleMenuContentKeyDown","stopPropagation","React","IconButton","appearance","table3","editing","actions","tooltip","icon","onKeyDown","menu","menuProps","Menu","Content","Item","disabled","onClick","save","dialog","DiscardChangesConfirmationDialog","clear"],"mappings":";;;;;;SAcgBA,kBAAkBA,CAACC,KAA8B;EAC7D,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,SAAS,EAAEC,aAAa;IAAEC,aAAa,EAAEC,UAAU;IAAEC;GAAW,GAAGP,KAAK;EACvG,MAAM;IAAEQ;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,aAAa,GAAIC,KAA0B;;IAE7C,IAAIJ,SAAS,IAAIN,UAAU,IAAIU,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;MAChDN,UAAU,EAAE;;GAEnB;EAED,MAAMO,wBAAwB,GAAIF,KAA0C;;IAExE,IAAIA,KAAK,CAACC,GAAG,KAAK,WAAW,IAAID,KAAK,CAACC,GAAG,KAAK,YAAY,EAAE;MACzDD,KAAK,CAACG,eAAe,EAAE;;GAE9B;EAED,oBACIC,6BAACC,UAAU;IACPC,UAAU,EAAC,aAAa;kBACZT,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,OAAO,CAACC,OAAO;IAChDC,IAAI,EAAC,MAAM;IACXC,SAAS,EAAEb,aAAa;IACxBc,IAAI,EAAEC,SAAS,kBACXV,6BAACW,IAAI,oBAAKD,SAAS,gBACfV,6BAACW,IAAI,CAACC,OAAO;MAACJ,SAAS,EAAEV;oBACrBE,6BAACW,IAAI,CAACE,IAAI;MAACN,IAAI,EAAC,MAAM;MAACO,QAAQ,EAAE,CAAC5B,UAAU,IAAIC,SAAS;MAAE4B,OAAO,EAAExB;OAC/DE,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,OAAO,CAACW,IAAI,CAC1B,eACZhB,6BAACW,IAAI,CAACE,IAAI;MACNN,IAAI,EAAC,OAAO;MACZO,QAAQ,EAAE,CAAC5B,UAAU;MACrB+B,MAAM,EAAEhC,KAAK,iBAAIe,6BAACkB,gCAAgC,oBAAKjC,KAAK;QAAEG,SAAS,EAAEC;;OACxEI,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,OAAO,CAACc,KAAK,CAC3B,CACD,CACZ;IAEb;AAEV;;;;"}
|
|
@@ -6,7 +6,7 @@ import { Button } from '../../../../Button/Button.js';
|
|
|
6
6
|
import { Shortcut } from '../../../../Shortcut/Shortcut.js';
|
|
7
7
|
|
|
8
8
|
function CreateNewRow(props) {
|
|
9
|
-
var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
|
|
9
|
+
var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum, _tableRef$current2;
|
|
10
10
|
const {
|
|
11
11
|
buttonRef,
|
|
12
12
|
onEditingCreate: handleEditingCreate,
|
|
@@ -52,16 +52,17 @@ function CreateNewRow(props) {
|
|
|
52
52
|
};
|
|
53
53
|
// allow programmatic access to creating rows from outside the table
|
|
54
54
|
React__default.useEffect(() => {
|
|
55
|
-
|
|
55
|
+
var _tableRef$current;
|
|
56
|
+
if (tableRef !== null && tableRef !== void 0 && (_tableRef$current = tableRef.current) !== null && _tableRef$current !== void 0 && _tableRef$current.instance) {
|
|
56
57
|
tableRef.current.instance.createRow = createRow;
|
|
57
58
|
}
|
|
58
|
-
}, [tableRef.current, createRow]);
|
|
59
|
+
}, [tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.instance, createRow]);
|
|
59
60
|
const handleCreate = function () {
|
|
60
61
|
return createRow();
|
|
61
62
|
};
|
|
62
63
|
const shortcut = {
|
|
63
64
|
key: 'Enter',
|
|
64
|
-
|
|
65
|
+
meta: true
|
|
65
66
|
};
|
|
66
67
|
let tooltip;
|
|
67
68
|
if (isSaving) {
|
package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreateNewRow.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateNewRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Table3EditingCreateHandler, Table3Ref } from '../../../types';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport clsx from 'clsx';\n\ntype CreateNewRowProps<TType = unknown> = {\n buttonRef: React.Ref<HTMLButtonElement>;\n onEditingCreate?: Table3EditingCreateHandler<TType>;\n scrollToIndex: (index: number) => void;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>) {\n const { buttonRef, onEditingCreate: handleEditingCreate, scrollToIndex, table, tableMeta, tableRef } = props;\n const { texts } = useLocalization();\n\n const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n const temporaryRowId: string = temporaryRows[0]?.[tableMeta.rowIdentityAccessor as string] ?? '';\n\n const isDisabled =\n !!table.getState().globalFilter ||\n !!table.getState().columnFilters?.length ||\n (!!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId));\n const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';\n\n const createRow = async (row?: Partial<TType>) => {\n if (!handleEditingCreate || isDisabled) {\n return;\n }\n\n const saved = await tableMeta.editing.saveChanges(table);\n\n if (!saved) {\n return;\n }\n\n const changeset = row ?? handleEditingCreate();\n\n try {\n if (changeset) {\n const rowId = tableMeta.editing.createRow(changeset);\n table.getRow(rowId).pin('bottom');\n\n // set the active row to the new row before toggling editing on\n const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;\n tableMeta.rowActive.setRowActiveIndex(nextRowIndex);\n\n tableMeta.editing.toggleEditing(true, table, scrollToIndex);\n tableMeta.editing.setLastFocusedCellIndex(0);\n }\n } catch (error) {\n console.error(error);\n }\n };\n\n // allow programmatic access to creating rows from outside the table\n React.useEffect(() => {\n if (tableRef
|
|
1
|
+
{"version":3,"file":"CreateNewRow.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateNewRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Table3EditingCreateHandler, Table3Ref } from '../../../types';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport clsx from 'clsx';\n\ntype CreateNewRowProps<TType = unknown> = {\n buttonRef: React.Ref<HTMLButtonElement>;\n onEditingCreate?: Table3EditingCreateHandler<TType>;\n scrollToIndex: (index: number) => void;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>) {\n const { buttonRef, onEditingCreate: handleEditingCreate, scrollToIndex, table, tableMeta, tableRef } = props;\n const { texts } = useLocalization();\n\n const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n const temporaryRowId: string = temporaryRows[0]?.[tableMeta.rowIdentityAccessor as string] ?? '';\n\n const isDisabled =\n !!table.getState().globalFilter ||\n !!table.getState().columnFilters?.length ||\n (!!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId));\n const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';\n\n const createRow = async (row?: Partial<TType>) => {\n if (!handleEditingCreate || isDisabled) {\n return;\n }\n\n const saved = await tableMeta.editing.saveChanges(table);\n\n if (!saved) {\n return;\n }\n\n const changeset = row ?? handleEditingCreate();\n\n try {\n if (changeset) {\n const rowId = tableMeta.editing.createRow(changeset);\n table.getRow(rowId).pin('bottom');\n\n // set the active row to the new row before toggling editing on\n const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;\n tableMeta.rowActive.setRowActiveIndex(nextRowIndex);\n\n tableMeta.editing.toggleEditing(true, table, scrollToIndex);\n tableMeta.editing.setLastFocusedCellIndex(0);\n }\n } catch (error) {\n console.error(error);\n }\n };\n\n // allow programmatic access to creating rows from outside the table\n React.useEffect(() => {\n if (tableRef?.current?.instance) {\n (tableRef.current as Table3Ref).instance.createRow = createRow as (row: unknown) => Promise<void>;\n }\n }, [tableRef?.current?.instance, createRow]);\n\n const handleCreate = async () => createRow();\n const shortcut = { key: 'Enter', meta: true };\n\n let tooltip;\n\n if (isSaving) {\n tooltip = texts.table3.editing.buttons.create.saving;\n } else if (isDisabled) {\n tooltip = texts.table3.editing.buttons.create.disabled;\n } else {\n tooltip = <Shortcut keys={shortcut} />;\n }\n\n const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;\n\n const className = clsx('group/row border-grey-300 !sticky z-[21]', {\n 'bottom-10': tableMeta.footer.isEnabled,\n 'bottom-0': !tableMeta.footer.isEnabled,\n 'border-t-2': isScrolled,\n 'border-b': !isScrolled,\n });\n\n return (\n <tr data-row-create className={className} tabIndex={-1}>\n <td className=\"!bg-grey-50 col-span-full !border-b-0 !px-1\">\n <Button\n appearance=\"transparent\"\n className=\"group-hover:bg-grey-200 sticky left-[4px]\"\n disabled={isDisabled}\n onClick={handleCreate}\n ref={buttonRef}\n shortcut={shortcut}\n tooltip={tooltip}>\n <Icon name=\"circle-plus\" />\n {texts.table3.editing.buttons.create.label}\n </Button>\n </td>\n </tr>\n );\n}\n"],"names":["CreateNewRow","props","buttonRef","onEditingCreate","handleEditingCreate","scrollToIndex","table","tableMeta","tableRef","texts","useLocalization","temporaryRows","editing","temporaryRowId","_temporaryRows$0$tabl","_temporaryRows$","rowIdentityAccessor","isDisabled","getState","globalFilter","_table$getState$colum","columnFilters","length","hasRowErrors","isSaving","getRowStatus","createRow","row","Promise","resolve","saveChanges","then","saved","changeset","rowId","getRow","pin","nextRowIndex","rowActive","setRowActiveIndex","toggleEditing","setLastFocusedCellIndex","error","console","e","reject","React","useEffect","_tableRef$current","current","instance","_tableRef$current2","handleCreate","shortcut","key","meta","tooltip","table3","buttons","create","saving","disabled","Shortcut","keys","isScrolled","scrollHeight","clientHeight","className","clsx","footer","isEnabled","tabIndex","Button","appearance","onClick","ref","Icon","name","label"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { useTable } from '../../primitives/Table/Core/useTable.js';
|
|
|
3
3
|
import { useTableEditingListener } from './listeners/useTableEditingListener.js';
|
|
4
4
|
import { useTableEditing } from './features/useTableEditing.js';
|
|
5
5
|
import { Cell } from './components/Columns/Cell/Cell.js';
|
|
6
|
-
import {
|
|
6
|
+
import { EditingActionsMenu } from './components/Columns/Internal/EditingActionsMenu.js';
|
|
7
7
|
import { Row } from './components/Row/Row.js';
|
|
8
8
|
|
|
9
9
|
const RENDERERS = {
|
|
@@ -28,10 +28,19 @@ function useTable3(props, ref) {
|
|
|
28
28
|
// Display EditingActionMenu instead of row actions while editing
|
|
29
29
|
rowActions: editing.isEditing ? [(_, rowId, table) => {
|
|
30
30
|
const tableMeta = table.options.meta;
|
|
31
|
-
return /*#__PURE__*/React__default.createElement(
|
|
31
|
+
return /*#__PURE__*/React__default.createElement(EditingActionsMenu, {
|
|
32
32
|
hasChanges: editing.hasChanges(rowId),
|
|
33
33
|
hasErrors: editing.hasRowErrors(rowId),
|
|
34
|
-
onDiscard: () =>
|
|
34
|
+
onDiscard: () => {
|
|
35
|
+
if (editing.temporaryRows.length) {
|
|
36
|
+
tableMeta.rowActive.setRowActiveIndex(undefined);
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
var _editing$createRowBut;
|
|
39
|
+
return (_editing$createRowBut = editing.createRowButtonRef.current) === null || _editing$createRowBut === void 0 ? void 0 : _editing$createRowBut.focus();
|
|
40
|
+
}, 50);
|
|
41
|
+
}
|
|
42
|
+
editing.discardChanges(rowId, table);
|
|
43
|
+
},
|
|
35
44
|
onEditingSave: function () {
|
|
36
45
|
try {
|
|
37
46
|
return Promise.resolve(editing.saveChanges(table, rowId)).then(function () {});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData, Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport {
|
|
1
|
+
{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData, Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionsMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\nimport { useTableRenderOptions } from '../../primitives/Table/Core/types';\n\nexport const RENDERERS = {\n row: Row,\n cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n interface TableMeta<TData extends RowData> {\n editing: ReturnType<typeof useTableEditing>;\n }\n}\n\ntype Table3Meta = {\n editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const editing = useTableEditing(\n props.enableEditing,\n props.onEditingSave,\n props.onEditingChange,\n props.rowIdentityAccessor,\n props.validator\n );\n const creationEnabled = editing.isEnabled && !!props.onEditingCreate;\n\n // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n const data: TType[] = React.useMemo(() => {\n if (editing.temporaryRows.length) {\n return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n }\n\n return props.data;\n }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n const extendedProps: Table3Props<TType> = {\n ...props,\n data,\n enableRowActions: editing.isEditing ? true : props.enableRowActions,\n // Display EditingActionMenu instead of row actions while editing\n rowActions: editing.isEditing\n ? ([\n (_, rowId, table: ReactTable<TType>) => {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n return (\n <EditingActionsMenu\n hasChanges={editing.hasChanges(rowId)}\n hasErrors={editing.hasRowErrors(rowId)}\n onDiscard={() => {\n if (editing.temporaryRows.length) {\n tableMeta.rowActive.setRowActiveIndex(undefined);\n setTimeout(() => editing.createRowButtonRef.current?.focus(), 50);\n }\n\n editing.discardChanges(rowId, table);\n }}\n onEditingSave={async () => {\n await editing.saveChanges(table, rowId);\n }}\n isLastRow={!creationEnabled && tableMeta.rowActive.rowActiveIndex === tableMeta.length - 1}\n />\n );\n },\n ] as TableRowActionRenderer<TType>[])\n : props.rowActions,\n };\n const meta = { editing };\n\n const options: useTableRenderOptions = {\n virtualiserPaddingEndOffset:\n props.enableEditing && props.onEditingCreate ? (editing.hasTemporaryRowErrors() ? 1.4 : 1) : 0,\n };\n\n const table = useTable<TType, Table3Meta>(extendedProps, ref, RENDERERS, meta, options);\n\n // listeners\n useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n React.useEffect(() => {\n if (table.ref.current) {\n (table.ref.current as Table3Ref).instance.toggleEditing = (enabled: boolean | undefined) =>\n table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n }\n }, [table.ref.current]);\n\n return table;\n}\n"],"names":["RENDERERS","row","Row","cell","Cell","useTable3","props","ref","editing","useTableEditing","enableEditing","onEditingSave","onEditingChange","rowIdentityAccessor","validator","creationEnabled","isEnabled","onEditingCreate","data","React","useMemo","temporaryRows","length","_props$data","concat","JSON","stringify","extendedProps","enableRowActions","isEditing","rowActions","_","rowId","table","tableMeta","options","meta","EditingActionsMenu","hasChanges","hasErrors","hasRowErrors","onDiscard","rowActive","setRowActiveIndex","undefined","setTimeout","_editing$createRowBut","createRowButtonRef","current","focus","discardChanges","saveChanges","then","e","Promise","reject","isLastRow","rowActiveIndex","virtualiserPaddingEndOffset","hasTemporaryRowErrors","useTable","useTableEditingListener","instance","renderer","scrollToIndex","useEffect","toggleEditing","enabled"],"mappings":"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"}
|
|
@@ -51,7 +51,11 @@ function TableGrid(props) {
|
|
|
51
51
|
style: table.style,
|
|
52
52
|
tabIndex: -1
|
|
53
53
|
}), /*#__PURE__*/React__default.createElement("thead", null, table.instance.getHeaderGroups().map(headerGroup => (/*#__PURE__*/React__default.createElement("tr", {
|
|
54
|
-
key: headerGroup.id
|
|
54
|
+
key: headerGroup.id,
|
|
55
|
+
onFocus: event => {
|
|
56
|
+
// prevents rowActive.handleFocus from running when clicking on column-header menus.
|
|
57
|
+
event.stopPropagation();
|
|
58
|
+
}
|
|
55
59
|
}, headerGroup.headers.map(props => (/*#__PURE__*/React__default.createElement(Header, {
|
|
56
60
|
key: props.id,
|
|
57
61
|
header: props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../../../../../../src/primitives/Table/Core/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport { Header } from './components/Header/Header';\nimport { Body } from './components/Body/Body';\nimport { Foot } from './components/Footer/Footer';\nimport { EmptyStateBody } from './components/Body/EmptyStateBody';\nimport { useTableReturnValue } from './useTable';\nimport { TableToolbar } from './components/Toolbar/Toolbar';\nimport { TableEmptyStateReason } from '../types';\nimport { ROW_HEIGHT_ESTIMATES } from './util/rows';\nimport './style.css';\n\ntype TableProps = {\n children: JSX.Element | Array<JSX.Element | null>;\n};\n\nexport function Table(props: TableProps) {\n return <>{props.children}</>;\n}\nTable.Toolbar = TableToolbar;\nTable.Grid = TableGrid;\n\nexport type TableGridProps<TType = unknown> = React.TableHTMLAttributes<HTMLTableElement> & {\n 'data-taco': string;\n enableHorizontalArrowKeyNavigation?: boolean;\n table: useTableReturnValue<TType>;\n};\n\nfunction getFilterReason<TType = unknown>(table: useTableReturnValue<TType>): TableEmptyStateReason | null {\n if (table.instance.getFilteredRowModel().rows.length === 0 && table.instance.getCoreRowModel().rows.length !== 0) {\n const state = table.instance.getState();\n\n if (table.meta.search.enableGlobalFilter && !!state.globalFilter) {\n return 'searching';\n }\n\n return 'filtering';\n }\n if (table.instance.getCoreRowModel().rows.length === 0) {\n return 'empty';\n }\n\n return null;\n}\n\nexport function TableGrid<TType = unknown>(props: TableGridProps<TType>) {\n const { enableHorizontalArrowKeyNavigation, table, ...attributes } = props;\n const handleFocus =\n table.meta.rowActive.rowActiveIndex === undefined\n ? (event: React.FocusEvent) => {\n table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);\n }\n : undefined;\n const filterReason = getFilterReason(table);\n\n return (\n <>\n <style>{table.stylesheet}</style>\n <FocusScope>\n <table\n {...attributes}\n id={table.id}\n data-table-font-size={table.meta.fontSize.size}\n data-table-grouped={!!table.state.grouping?.length}\n data-table-horizontally-scrolled={table.meta.columnFreezing.isHorizontallyScrolled ? true : undefined}\n data-table-status={table.meta.server.isEnabled ? (table.meta.server.isReady ? 'ready' : undefined) : 'ready'}\n data-table-pause-hover={table.meta.rowActive.isHoverStatePaused ? true : undefined}\n data-table-resizing={table.state.columnSizingInfo.isResizingColumn ? true : undefined}\n data-table-row-height={table.meta.rowHeight.height}\n onFocus={handleFocus}\n onScroll={table.meta.columnFreezing.handleScroll}\n ref={table.ref}\n style={table.style}\n tabIndex={-1}>\n <thead>\n {table.instance.getHeaderGroups().map(headerGroup => (\n <tr
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../../../../../../src/primitives/Table/Core/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport { Header } from './components/Header/Header';\nimport { Body } from './components/Body/Body';\nimport { Foot } from './components/Footer/Footer';\nimport { EmptyStateBody } from './components/Body/EmptyStateBody';\nimport { useTableReturnValue } from './useTable';\nimport { TableToolbar } from './components/Toolbar/Toolbar';\nimport { TableEmptyStateReason } from '../types';\nimport { ROW_HEIGHT_ESTIMATES } from './util/rows';\nimport './style.css';\n\ntype TableProps = {\n children: JSX.Element | Array<JSX.Element | null>;\n};\n\nexport function Table(props: TableProps) {\n return <>{props.children}</>;\n}\nTable.Toolbar = TableToolbar;\nTable.Grid = TableGrid;\n\nexport type TableGridProps<TType = unknown> = React.TableHTMLAttributes<HTMLTableElement> & {\n 'data-taco': string;\n enableHorizontalArrowKeyNavigation?: boolean;\n table: useTableReturnValue<TType>;\n};\n\nfunction getFilterReason<TType = unknown>(table: useTableReturnValue<TType>): TableEmptyStateReason | null {\n if (table.instance.getFilteredRowModel().rows.length === 0 && table.instance.getCoreRowModel().rows.length !== 0) {\n const state = table.instance.getState();\n\n if (table.meta.search.enableGlobalFilter && !!state.globalFilter) {\n return 'searching';\n }\n\n return 'filtering';\n }\n if (table.instance.getCoreRowModel().rows.length === 0) {\n return 'empty';\n }\n\n return null;\n}\n\nexport function TableGrid<TType = unknown>(props: TableGridProps<TType>) {\n const { enableHorizontalArrowKeyNavigation, table, ...attributes } = props;\n const handleFocus =\n table.meta.rowActive.rowActiveIndex === undefined\n ? (event: React.FocusEvent) => {\n table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);\n }\n : undefined;\n const filterReason = getFilterReason(table);\n\n return (\n <>\n <style>{table.stylesheet}</style>\n <FocusScope>\n <table\n {...attributes}\n id={table.id}\n data-table-font-size={table.meta.fontSize.size}\n data-table-grouped={!!table.state.grouping?.length}\n data-table-horizontally-scrolled={table.meta.columnFreezing.isHorizontallyScrolled ? true : undefined}\n data-table-status={table.meta.server.isEnabled ? (table.meta.server.isReady ? 'ready' : undefined) : 'ready'}\n data-table-pause-hover={table.meta.rowActive.isHoverStatePaused ? true : undefined}\n data-table-resizing={table.state.columnSizingInfo.isResizingColumn ? true : undefined}\n data-table-row-height={table.meta.rowHeight.height}\n onFocus={handleFocus}\n onScroll={table.meta.columnFreezing.handleScroll}\n ref={table.ref}\n style={table.style}\n tabIndex={-1}>\n <thead>\n {table.instance.getHeaderGroups().map(headerGroup => (\n <tr\n key={headerGroup.id}\n onFocus={event => {\n // prevents rowActive.handleFocus from running when clicking on column-header menus.\n event.stopPropagation();\n }}>\n {headerGroup.headers.map(props => (\n <Header key={props.id} header={props} scrollToIndex={table.renderer.scrollToIndex} />\n ))}\n </tr>\n ))}\n </thead>\n {filterReason ? (\n <EmptyStateBody emptyState={props.table.props.emptyState} reason={filterReason} />\n ) : (\n <>\n <Body\n enableHorizontalArrowKeyNavigation={enableHorizontalArrowKeyNavigation}\n table={table.instance}\n tableElement={table.ref.current}\n scrollToIndex={table.renderer.scrollToIndex}\n style={\n props.children\n ? {\n ...table.renderer.style,\n height:\n (table.renderer.style.height as number) +\n ROW_HEIGHT_ESTIMATES[table.meta.rowHeight.height],\n }\n : table.renderer.style\n }>\n {table.renderer.rows}\n {props.children}\n </Body>\n {table.meta.footer.isEnabled ? <Foot table={table.instance} /> : null}\n </>\n )}\n </table>\n </FocusScope>\n </>\n );\n}\n"],"names":["Table","props","React","children","Toolbar","TableToolbar","Grid","TableGrid","getFilterReason","table","instance","getFilteredRowModel","rows","length","getCoreRowModel","state","getState","meta","search","enableGlobalFilter","globalFilter","enableHorizontalArrowKeyNavigation","attributes","handleFocus","rowActive","rowActiveIndex","undefined","event","renderer","scrollToIndex","filterReason","stylesheet","FocusScope","id","fontSize","size","_table$state$grouping","grouping","columnFreezing","isHorizontallyScrolled","server","isEnabled","isReady","isHoverStatePaused","columnSizingInfo","isResizingColumn","rowHeight","height","onFocus","onScroll","handleScroll","ref","style","tabIndex","getHeaderGroups","map","headerGroup","key","stopPropagation","headers","Header","header","EmptyStateBody","emptyState","reason","Body","tableElement","current","ROW_HEIGHT_ESTIMATES","footer","Foot"],"mappings":"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"}
|
|
@@ -24,7 +24,9 @@ function GroupedCell(props) {
|
|
|
24
24
|
} = React__default.useContext(RowContext);
|
|
25
25
|
const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
|
|
26
26
|
const canShowActions = isActiveRow || isHovered && !tableMeta.rowActive.isHoverStatePaused;
|
|
27
|
-
|
|
27
|
+
// Set colSpan based on the count of visible cells, including '__actions' and non-internal columns, so that
|
|
28
|
+
// rowGroupActions aligns with rowActions.
|
|
29
|
+
const colSpan = cell.row.getVisibleCells().filter(c => c.column.id === '__actions' || !isInternalColumn(c.column.id)).length - 1;
|
|
28
30
|
const content = (_ref = (_columnMeta$renderer = (_columnMeta$renderer2 = columnMeta.renderer) === null || _columnMeta$renderer2 === void 0 ? void 0 : _columnMeta$renderer2.call(columnMeta, cell.getValue(), cell.row.original)) !== null && _columnMeta$renderer !== void 0 ? _columnMeta$renderer : cell.getValue()) !== null && _ref !== void 0 ? _ref : null;
|
|
29
31
|
const subRows = cell.getContext().row.subRows.map(row => row.original);
|
|
30
32
|
return /*#__PURE__*/React__default.createElement(MemoedGroupedCell, Object.assign({}, attributes, {
|
|
@@ -49,21 +51,26 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
|
|
|
49
51
|
table,
|
|
50
52
|
...attributes
|
|
51
53
|
} = props;
|
|
52
|
-
return
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
54
|
+
return (
|
|
55
|
+
/*#__PURE__*/
|
|
56
|
+
// pr-1 is needed to align group row actions with row actions in sibling rows, if present
|
|
57
|
+
React__default.createElement("td", Object.assign({}, attributes, {
|
|
58
|
+
className: "!pr-1",
|
|
59
|
+
ref: cellRef,
|
|
60
|
+
style: {
|
|
61
|
+
gridColumn: `span ${colSpan} / span ${colSpan}`
|
|
62
|
+
}
|
|
63
|
+
}), /*#__PURE__*/React__default.createElement("span", {
|
|
64
|
+
className: "grow"
|
|
65
|
+
}, children), rowActions !== null && rowActions !== void 0 && rowActions.length && canShowActions ? (/*#__PURE__*/React__default.createElement(Actions, {
|
|
66
|
+
actions: rowActions,
|
|
67
|
+
actionsLength: 4,
|
|
68
|
+
data: subRows,
|
|
69
|
+
isActiveRow: true,
|
|
70
|
+
rowId: rowId,
|
|
71
|
+
table: table
|
|
72
|
+
})) : null)
|
|
73
|
+
);
|
|
67
74
|
});
|
|
68
75
|
|
|
69
76
|
export { GroupedCell };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedCell.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { getCellAttributes } from '../util';\nimport { Actions as RowGroupActions } from '../../Internal/Actions';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { RowContext } from '../../../Row/RowContext';\nimport { TableRowActionGroupRenderer } from '../../../../../types';\nimport { TableCellRendererProps } from '../../../../types';\n\nexport function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, index, isHighlighted } = props;\n const { table } = cell.getContext();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const attributes = getCellAttributes(cell, index, isHighlighted);\n\n const { isHovered, rowIndex } = React.useContext(RowContext);\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n const canShowActions = isActiveRow || (isHovered && !tableMeta.rowActive.isHoverStatePaused);\n\n const colSpan
|
|
1
|
+
{"version":3,"file":"GroupedCell.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { getCellAttributes } from '../util';\nimport { Actions as RowGroupActions } from '../../Internal/Actions';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { RowContext } from '../../../Row/RowContext';\nimport { TableRowActionGroupRenderer } from '../../../../../types';\nimport { TableCellRendererProps } from '../../../../types';\n\nexport function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, index, isHighlighted } = props;\n const { table } = cell.getContext();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const attributes = getCellAttributes(cell, index, isHighlighted);\n\n const { isHovered, rowIndex } = React.useContext(RowContext);\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n const canShowActions = isActiveRow || (isHovered && !tableMeta.rowActive.isHoverStatePaused);\n\n // Set colSpan based on the count of visible cells, including '__actions' and non-internal columns, so that\n // rowGroupActions aligns with rowActions.\n const colSpan =\n cell.row.getVisibleCells().filter(c => c.column.id === '__actions' || !isInternalColumn(c.column.id)).length - 1;\n const content = columnMeta.renderer?.(cell.getValue<TType>(), cell.row.original) ?? cell.getValue() ?? null;\n const subRows = cell.getContext().row.subRows.map(row => row.original);\n\n return (\n <MemoedGroupedCell<TType>\n {...attributes}\n canShowActions={canShowActions}\n cellRef={cellRef}\n colSpan={colSpan}\n rowActions={tableMeta.rowGroups.rowActionsForGroup}\n rowId={cell.row.id}\n subRows={subRows}\n table={table}>\n {content}\n </MemoedGroupedCell>\n );\n}\n\ntype MemoedGroupedCellProps<TType = unknown> = React.TdHTMLAttributes<HTMLTableCellElement> & {\n canShowActions: boolean;\n cellRef: React.RefObject<HTMLTableCellElement>;\n colSpan: number;\n rowActions?: TableRowActionGroupRenderer<TType>[];\n rowId: string;\n subRows: TType[];\n table: ReactTable<TType>;\n};\n\nconst MemoedGroupedCell = React.memo(function MemoedGroupedCell<TType = unknown>(props: MemoedGroupedCellProps<TType>) {\n const { canShowActions, cellRef, children, colSpan, rowActions, rowId, subRows, table, ...attributes } = props;\n\n return (\n // pr-1 is needed to align group row actions with row actions in sibling rows, if present\n <td {...attributes} className=\"!pr-1\" ref={cellRef} style={{ gridColumn: `span ${colSpan} / span ${colSpan}` }}>\n <span className=\"grow\">{children}</span>\n {rowActions?.length && canShowActions ? (\n <RowGroupActions<TType>\n actions={rowActions as any}\n actionsLength={4}\n data={subRows}\n isActiveRow\n rowId={rowId}\n table={table}\n />\n ) : null}\n </td>\n );\n}) as <TType = unknown>(props: MemoedGroupedCellProps<TType>) => JSX.Element;\n"],"names":["GroupedCell","props","cell","cellRef","index","isHighlighted","table","getContext","tableMeta","options","meta","columnMeta","column","columnDef","attributes","getCellAttributes","isHovered","rowIndex","React","useContext","RowContext","isActiveRow","rowActive","rowActiveIndex","canShowActions","isHoverStatePaused","colSpan","row","getVisibleCells","filter","c","id","isInternalColumn","length","content","_ref","_columnMeta$renderer","_columnMeta$renderer2","renderer","call","getValue","original","subRows","map","MemoedGroupedCell","rowActions","rowGroups","rowActionsForGroup","rowId","memo","children","className","ref","style","gridColumn","RowGroupActions","actions","actionsLength","data"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js
CHANGED
|
@@ -68,7 +68,8 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
|
|
|
68
68
|
const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
|
|
69
69
|
const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;
|
|
70
70
|
const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;
|
|
71
|
-
|
|
71
|
+
const isRowGrouped = row.getIsGrouped();
|
|
72
|
+
if (!hideRowActions && !isRowGrouped && actions !== null && actions !== void 0 && actions.length && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
|
|
72
73
|
return /*#__PURE__*/React__default.createElement(Actions, {
|
|
73
74
|
actions: actions,
|
|
74
75
|
actionsLength: actionsLength,
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, CellContext as ReactTableCellContext, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { IconButton } from '../../../../../../components/IconButton/IconButton';\nimport { Menu } from '../../../../../../components/Menu/Menu';\nimport { Shortcut } from '../../../../../../components/Shortcut/Shortcut';\nimport { RowContext } from '../../Row/RowContext';\nimport { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { TableRowActionRenderer } from '../../../../types';\n\nexport type ActionsProps<TType = unknown> = {\n actions: TableRowActionRenderer<TType>[];\n actionsLength: number;\n data: any;\n isActiveRow: boolean;\n rowId: string;\n table: ReactTable<TType>;\n};\nexport function Actions<TType = unknown>(props: ActionsProps<TType>) {\n const { actions, actionsLength, data, isActiveRow, rowId, table } = props;\n const { texts } = useLocalization();\n // we don't want to document passing table, so it isn't on the type\n const visibleActions = (actions as ((row: TType, internalRowId: string, table: ReactTable<TType>) => JSX.Element | null)[])\n .map(action => action(data, rowId, table))\n .filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n const className = cn(\n 'flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden'\n );\n\n return (\n <span className={className}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'transparent',\n key: index,\n tabIndex: isActiveRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isActiveRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n}\n\nfunction Header() {\n return null;\n}\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n const { row, table } = context;\n const { isHovered, rowIndex, hideRowActions } = React.useContext(RowContext);\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const actions = tableMeta.rowActions.rowActions;\n const actionsLength = tableMeta.rowActions.rowActionsLength;\n\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;\n const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;\n\n if (!hideRowActions
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, CellContext as ReactTableCellContext, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { IconButton } from '../../../../../../components/IconButton/IconButton';\nimport { Menu } from '../../../../../../components/Menu/Menu';\nimport { Shortcut } from '../../../../../../components/Shortcut/Shortcut';\nimport { RowContext } from '../../Row/RowContext';\nimport { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { TableRowActionRenderer } from '../../../../types';\n\nexport type ActionsProps<TType = unknown> = {\n actions: TableRowActionRenderer<TType>[];\n actionsLength: number;\n data: any;\n isActiveRow: boolean;\n rowId: string;\n table: ReactTable<TType>;\n};\nexport function Actions<TType = unknown>(props: ActionsProps<TType>) {\n const { actions, actionsLength, data, isActiveRow, rowId, table } = props;\n const { texts } = useLocalization();\n // we don't want to document passing table, so it isn't on the type\n const visibleActions = (actions as ((row: TType, internalRowId: string, table: ReactTable<TType>) => JSX.Element | null)[])\n .map(action => action(data, rowId, table))\n .filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n const className = cn(\n 'flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden'\n );\n\n return (\n <span className={className}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'transparent',\n key: index,\n tabIndex: isActiveRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isActiveRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n}\n\nfunction Header() {\n return null;\n}\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n const { row, table } = context;\n const { isHovered, rowIndex, hideRowActions } = React.useContext(RowContext);\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const actions = tableMeta.rowActions.rowActions;\n const actionsLength = tableMeta.rowActions.rowActionsLength;\n\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;\n const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;\n const isRowGrouped = row.getIsGrouped();\n\n if (\n !hideRowActions &&\n !isRowGrouped &&\n actions?.length &&\n (isActiveRow || (isHovered && !isHoverStatePaused && !isResizingColumn))\n ) {\n return (\n <Actions<TType>\n actions={actions}\n actionsLength={actionsLength}\n data={row.original}\n isActiveRow={isActiveRow}\n rowId={row.id}\n table={table}\n />\n );\n }\n\n return null;\n}) as <TType = unknown>(context: ReactTableCellContext<TType, unknown>) => JSX.Element;\n\nexport const renderer: useTableManagerInternalColumn = {\n header: Header,\n renderer: Cell,\n meta: {\n align: 'right',\n className: cn(\n 'print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active=\"true\"]]/row:sticky right-0',\n 'group-[[data-row-active=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-row-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-row-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n enableSearch: false,\n header: '',\n },\n};\n"],"names":["Actions","props","actions","actionsLength","data","isActiveRow","rowId","table","texts","useLocalization","visibleActions","map","action","filter","actionsOnRow","length","slice","actionsInMenu","className","cn","React","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","columns","icon","menu","menuProps","Menu","Content","i","Item","Header","Cell","memo","MemoedCell","context","row","isHovered","rowIndex","hideRowActions","useContext","RowContext","tableMeta","options","meta","rowActions","rowActionsLength","rowActive","rowActiveIndex","isResizingColumn","getState","columnSizingInfo","isHoverStatePaused","isRowGrouped","getIsGrouped","original","id","renderer","header","align","enableSearch"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js
CHANGED
|
@@ -118,10 +118,13 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
|
|
|
118
118
|
'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
|
|
119
119
|
'hover:cursor-pointer': typeof attributes.onClick === 'function'
|
|
120
120
|
});
|
|
121
|
+
const isGrouped = row.getIsGrouped();
|
|
121
122
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", Object.assign({}, attributes, {
|
|
122
123
|
className: className,
|
|
123
124
|
ref: ref
|
|
124
|
-
}), children, row.getVisibleCells()
|
|
125
|
+
}), children, row.getVisibleCells()
|
|
126
|
+
// Filter out the row actions cell from rendering in Grouped Row
|
|
127
|
+
.filter(cell => !(isGrouped && cell.column.id === '__actions')).map((cell, cellIndex) => (/*#__PURE__*/React__default.createElement(Cell, {
|
|
125
128
|
key: cell.id,
|
|
126
129
|
cell: cell,
|
|
127
130
|
index: cellIndex,
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> & TableRowRendererProps<TType>;\n\nexport const DisplayRow = React.memo(function DisplayRow<TType = unknown>(props: DisplayRowProps<TType>) {\n const { children, cellRenderer: CellRenderer, index, measureRow, row, table, ...otherAttributes } = props;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const attributes: any = {\n ...otherAttributes,\n 'data-row-id': row.id,\n 'data-row-index': index,\n tabIndex: -1,\n };\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLTableRowElement>) => {\n const clickedElement = event.target as HTMLElement;\n\n if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n return;\n }\n\n tableMeta.rowClick.handleClick(event, row.original);\n },\n [row.original]\n );\n const handleClickCapture = React.useCallback(() => {\n tableMeta.rowActive.setRowActiveIndex(index);\n }, [index]);\n\n // row active\n if (tableMeta.rowActive.isEnabled) {\n attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes\n attributes.onPointerDown = handleClickCapture;\n }\n\n // row click\n if (tableMeta.rowClick.isEnabled(row.original)) {\n attributes.onClick = handleClick;\n }\n\n // row drag\n if (tableMeta.rowDrag.isEnabled) {\n attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n attributes.draggable = true;\n const GHOST_ELEMENT_ID = 'taco_table_dragging';\n\n attributes.onDragStart = (event: React.DragEvent): void => {\n let rows = [row];\n\n if (row.getCanSelect()) {\n rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n }\n\n const data = rows.map(row => row.original);\n\n tableMeta.rowDrag.setDragging?.(\n rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n );\n\n // set a default data value so that the consumer doesn't have to\n event.dataTransfer.setData('text', JSON.stringify(data));\n\n const showPlaceholder = (text: string) => {\n const ghost = document.createElement('div');\n ghost.id = GHOST_ELEMENT_ID;\n ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';\n ghost.innerText = text;\n document.body.appendChild(ghost);\n event.dataTransfer.setDragImage(ghost, 0, 0);\n };\n\n const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n tableMeta.rowDrag.handleRowDrag?.(data, showPlaceholder, setDataTransfer);\n };\n\n attributes.onDragEnd = (): void => {\n document.getElementById(GHOST_ELEMENT_ID)?.remove();\n tableMeta.rowDrag.setDragging?.({});\n };\n }\n\n // row drop\n const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n if (tableMeta.rowDrop.isEnabled) {\n attributes.onDragEnter = dropTargetProps?.onDragEnter;\n attributes.onDragLeave = dropTargetProps?.onDragLeave;\n attributes.onDragOver = dropTargetProps?.onDragOver;\n attributes.onDrop = dropTargetProps?.onDrop;\n attributes['data-row-dragged-over'] = isDraggedOver;\n }\n\n // row grouping\n if (table.options.enableGrouping) {\n attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n }\n\n // row selection\n if (row.getCanSelect()) {\n attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n }\n\n // row expansion\n let expandedRow;\n\n if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\n attributes['data-row-expanded'] = true;\n expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n }\n\n const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n if (rowMeta) {\n if (rowMeta.layout) {\n attributes['data-row-meta-layout'] = rowMeta.layout;\n }\n }\n\n const ref = React.useRef<HTMLTableRowElement>(null);\n const expansionRef = React.useRef<HTMLTableRowElement>(null);\n const isExpanded = !!attributes['data-row-expanded'];\n\n useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);\n\n const className = cn('group/row', otherAttributes.className, {\n 'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',\n 'hover:cursor-pointer': typeof attributes.onClick === 'function',\n });\n\n return (\n <>\n <tr {...attributes} className={className} ref={ref}>\n {children}\n {row.getVisibleCells().map((cell, cellIndex) => (\n <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n ))}\n </tr>\n {expandedRow ? (\n <tr data-row-parent-id={row.id} ref={expansionRef}>\n <td className=\"col-span-full\">{expandedRow}</td>\n </tr>\n ) : null}\n </>\n );\n}) as <TType = unknown>(props: TableRowRendererProps<TType>) => JSX.Element;\n\nfunction useSetVirtualisedRowHeight(\n measureRow: (size: number, expansionHeight?: number) => void,\n rowEl: HTMLTableRowElement | null,\n expansionEl: HTMLTableRowElement | null,\n isExpanded: boolean\n) {\n React.useEffect(() => {\n if (rowEl) {\n const height = rowEl.getBoundingClientRect().height;\n\n if (isExpanded && expansionEl) {\n measureRow(height, expansionEl.getBoundingClientRect().height);\n } else {\n measureRow(height);\n }\n }\n }, [isExpanded, rowEl, expansionEl]);\n}\n"],"names":["DisplayRow","React","memo","props","children","cellRenderer","CellRenderer","index","measureRow","row","table","otherAttributes","tableMeta","options","meta","attributes","id","tabIndex","handleClick","useCallback","event","clickedElement","target","_event$currentTarget","currentTarget","contains","isElementInteractive","rowClick","original","handleClickCapture","rowActive","setRowActiveIndex","isEnabled","rowActiveIndex","undefined","onPointerDown","onClick","rowDrag","dragging","draggable","GHOST_ELEMENT_ID","onDragStart","rows","getCanSelect","getIsSelected","getSelectedRowModel","data","map","_tableMeta$rowDrag$se","_tableMeta$rowDrag","setDragging","call","reduce","rowBeingDragged","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","_tableMeta$rowDrag$ha","_tableMeta$rowDrag2","handleRowDrag","onDragEnd","_document$getElementB","getElementById","remove","_tableMeta$rowDrag$se2","_tableMeta$rowDrag3","isDraggedOver","dropTargetProps","useDropTarget","_tableMeta$rowDrop$ha","_tableMeta$rowDrop","rowDrop","handleDrop","onDragEnter","onDragLeave","onDragOver","onDrop","enableGrouping","getIsGrouped","getIsAllSubRowsSelected","expandedRow","rowExpansion","getIsExpanded","_tableMeta$rowExpansi","_tableMeta$rowExpansi2","_tableMeta$rowExpansi3","rowExpansionRenderer","rowMeta","_meta","layout","ref","useRef","expansionRef","isExpanded","useSetVirtualisedRowHeight","current","cn","getVisibleCells","cell","cellIndex","Cell","key","renderer","rowEl","expansionEl","useEffect","height","getBoundingClientRect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> & TableRowRendererProps<TType>;\n\nexport const DisplayRow = React.memo(function DisplayRow<TType = unknown>(props: DisplayRowProps<TType>) {\n const { children, cellRenderer: CellRenderer, index, measureRow, row, table, ...otherAttributes } = props;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const attributes: any = {\n ...otherAttributes,\n 'data-row-id': row.id,\n 'data-row-index': index,\n tabIndex: -1,\n };\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLTableRowElement>) => {\n const clickedElement = event.target as HTMLElement;\n\n if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n return;\n }\n\n tableMeta.rowClick.handleClick(event, row.original);\n },\n [row.original]\n );\n const handleClickCapture = React.useCallback(() => {\n tableMeta.rowActive.setRowActiveIndex(index);\n }, [index]);\n\n // row active\n if (tableMeta.rowActive.isEnabled) {\n attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes\n attributes.onPointerDown = handleClickCapture;\n }\n\n // row click\n if (tableMeta.rowClick.isEnabled(row.original)) {\n attributes.onClick = handleClick;\n }\n\n // row drag\n if (tableMeta.rowDrag.isEnabled) {\n attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n attributes.draggable = true;\n const GHOST_ELEMENT_ID = 'taco_table_dragging';\n\n attributes.onDragStart = (event: React.DragEvent): void => {\n let rows = [row];\n\n if (row.getCanSelect()) {\n rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n }\n\n const data = rows.map(row => row.original);\n\n tableMeta.rowDrag.setDragging?.(\n rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n );\n\n // set a default data value so that the consumer doesn't have to\n event.dataTransfer.setData('text', JSON.stringify(data));\n\n const showPlaceholder = (text: string) => {\n const ghost = document.createElement('div');\n ghost.id = GHOST_ELEMENT_ID;\n ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';\n ghost.innerText = text;\n document.body.appendChild(ghost);\n event.dataTransfer.setDragImage(ghost, 0, 0);\n };\n\n const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n tableMeta.rowDrag.handleRowDrag?.(data, showPlaceholder, setDataTransfer);\n };\n\n attributes.onDragEnd = (): void => {\n document.getElementById(GHOST_ELEMENT_ID)?.remove();\n tableMeta.rowDrag.setDragging?.({});\n };\n }\n\n // row drop\n const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n if (tableMeta.rowDrop.isEnabled) {\n attributes.onDragEnter = dropTargetProps?.onDragEnter;\n attributes.onDragLeave = dropTargetProps?.onDragLeave;\n attributes.onDragOver = dropTargetProps?.onDragOver;\n attributes.onDrop = dropTargetProps?.onDrop;\n attributes['data-row-dragged-over'] = isDraggedOver;\n }\n\n // row grouping\n if (table.options.enableGrouping) {\n attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n }\n\n // row selection\n if (row.getCanSelect()) {\n attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n }\n\n // row expansion\n let expandedRow;\n\n if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\n attributes['data-row-expanded'] = true;\n expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n }\n\n const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n if (rowMeta) {\n if (rowMeta.layout) {\n attributes['data-row-meta-layout'] = rowMeta.layout;\n }\n }\n\n const ref = React.useRef<HTMLTableRowElement>(null);\n const expansionRef = React.useRef<HTMLTableRowElement>(null);\n const isExpanded = !!attributes['data-row-expanded'];\n\n useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);\n\n const className = cn('group/row', otherAttributes.className, {\n 'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',\n 'hover:cursor-pointer': typeof attributes.onClick === 'function',\n });\n\n const isGrouped = row.getIsGrouped();\n\n return (\n <>\n <tr {...attributes} className={className} ref={ref}>\n {children}\n {row\n .getVisibleCells()\n // Filter out the row actions cell from rendering in Grouped Row\n .filter(cell => !(isGrouped && cell.column.id === '__actions'))\n .map((cell, cellIndex) => (\n <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n ))}\n </tr>\n {expandedRow ? (\n <tr data-row-parent-id={row.id} ref={expansionRef}>\n <td className=\"col-span-full\">{expandedRow}</td>\n </tr>\n ) : null}\n </>\n );\n}) as <TType = unknown>(props: TableRowRendererProps<TType>) => JSX.Element;\n\nfunction useSetVirtualisedRowHeight(\n measureRow: (size: number, expansionHeight?: number) => void,\n rowEl: HTMLTableRowElement | null,\n expansionEl: HTMLTableRowElement | null,\n isExpanded: boolean\n) {\n React.useEffect(() => {\n if (rowEl) {\n const height = rowEl.getBoundingClientRect().height;\n\n if (isExpanded && expansionEl) {\n measureRow(height, expansionEl.getBoundingClientRect().height);\n } else {\n measureRow(height);\n }\n }\n }, [isExpanded, rowEl, expansionEl]);\n}\n"],"names":["DisplayRow","React","memo","props","children","cellRenderer","CellRenderer","index","measureRow","row","table","otherAttributes","tableMeta","options","meta","attributes","id","tabIndex","handleClick","useCallback","event","clickedElement","target","_event$currentTarget","currentTarget","contains","isElementInteractive","rowClick","original","handleClickCapture","rowActive","setRowActiveIndex","isEnabled","rowActiveIndex","undefined","onPointerDown","onClick","rowDrag","dragging","draggable","GHOST_ELEMENT_ID","onDragStart","rows","getCanSelect","getIsSelected","getSelectedRowModel","data","map","_tableMeta$rowDrag$se","_tableMeta$rowDrag","setDragging","call","reduce","rowBeingDragged","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","_tableMeta$rowDrag$ha","_tableMeta$rowDrag2","handleRowDrag","onDragEnd","_document$getElementB","getElementById","remove","_tableMeta$rowDrag$se2","_tableMeta$rowDrag3","isDraggedOver","dropTargetProps","useDropTarget","_tableMeta$rowDrop$ha","_tableMeta$rowDrop","rowDrop","handleDrop","onDragEnter","onDragLeave","onDragOver","onDrop","enableGrouping","getIsGrouped","getIsAllSubRowsSelected","expandedRow","rowExpansion","getIsExpanded","_tableMeta$rowExpansi","_tableMeta$rowExpansi2","_tableMeta$rowExpansi3","rowExpansionRenderer","rowMeta","_meta","layout","ref","useRef","expansionRef","isExpanded","useSetVirtualisedRowHeight","current","cn","isGrouped","getVisibleCells","filter","cell","column","cellIndex","Cell","key","renderer","rowEl","expansionEl","useEffect","height","getBoundingClientRect"],"mappings":"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"}
|