@economic/taco 2.4.3 → 2.5.0

package/dist/esm/packages/taco/src/utils/hooks/useDropTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropTarget.js","sources":["../../../../../../../src/utils/hooks/useDropTarget.ts"],"sourcesContent":["import React from 'react';\n\nexport type useDropTarget = [\n    boolean,\n    (\n        | undefined\n        | {\n              onDragEnter: React.DragEventHandler;\n              onDragLeave: React.DragEventHandler;\n              onDragOver: React.DragEventHandler;\n              onDrop: React.DragEventHandler;\n          }\n    )\n];\n\nexport const useDropTarget = (onDrop: React.DragEventHandler | undefined): useDropTarget => {\n    const [isDraggedOver, setDraggedOver] = React.useState(false);\n\n    const handleDragEnter = React.useCallback((event: React.DragEvent<HTMLElement>) => {\n        event.preventDefault();\n        setDraggedOver(true);\n    }, []);\n\n    const handleDragLeave = React.useCallback((event: React.DragEvent<HTMLElement>) => {\n        event.preventDefault();\n\n        if (event.target === event.currentTarget) {\n            setDraggedOver(false);\n        }\n    }, []);\n\n    const handleDragOver = React.useCallback((event: React.DragEvent<HTMLElement>) => {\n        event.preventDefault();\n    }, []);\n\n    const handleDrop = React.useCallback(\n        (event: React.DragEvent<HTMLElement>) => {\n            event.preventDefault();\n            event.persist();\n\n            setDraggedOver(false);\n\n            if (onDrop) {\n                onDrop(event);\n            }\n        },\n        [onDrop]\n    );\n\n    const props = onDrop\n        ? {\n              onDragEnter: handleDragEnter,\n              onDragLeave: handleDragLeave,\n              onDragOver: handleDragOver,\n              onDrop: handleDrop,\n          }\n        : undefined;\n\n    return [isDraggedOver, props];\n};\n"],"names":["useDropTarget","onDrop","isDraggedOver","setDraggedOver","React","useState","handleDragEnter","useCallback","event","preventDefault","handleDragLeave","target","currentTarget","handleDragOver","handleDrop","persist","props","onDragEnter","onDragLeave","onDragOver","undefined"],"mappings":";;MAeaA,aAAa,GAAIC,MAA0C;EACpE,MAAM,CAACC,aAAa,EAAEC,cAAc,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAE7D,MAAMC,eAAe,GAAGF,cAAK,CAACG,WAAW,CAAEC,KAAmC;IAC1EA,KAAK,CAACC,cAAc,EAAE;IACtBN,cAAc,CAAC,IAAI,CAAC;GACvB,EAAE,EAAE,CAAC;EAEN,MAAMO,eAAe,GAAGN,cAAK,CAACG,WAAW,CAAEC,KAAmC;IAC1EA,KAAK,CAACC,cAAc,EAAE;IAEtB,IAAID,KAAK,CAACG,MAAM,KAAKH,KAAK,CAACI,aAAa,EAAE;MACtCT,cAAc,CAAC,KAAK,CAAC;;GAE5B,EAAE,EAAE,CAAC;EAEN,MAAMU,cAAc,GAAGT,cAAK,CAACG,WAAW,CAAEC,KAAmC;IACzEA,KAAK,CAACC,cAAc,EAAE;GACzB,EAAE,EAAE,CAAC;EAEN,MAAMK,UAAU,GAAGV,cAAK,CAACG,WAAW,CAC/BC,KAAmC;IAChCA,KAAK,CAACC,cAAc,EAAE;IACtBD,KAAK,CAACO,OAAO,EAAE;IAEfZ,cAAc,CAAC,KAAK,CAAC;IAErB,IAAIF,MAAM,EAAE;MACRA,MAAM,CAACO,KAAK,CAAC;;GAEpB,EACD,CAACP,MAAM,CAAC,CACX;EAED,MAAMe,KAAK,GAAGf,MAAM,GACd;IACIgB,WAAW,EAAEX,eAAe;IAC5BY,WAAW,EAAER,eAAe;IAC5BS,UAAU,EAAEN,cAAc;IAC1BZ,MAAM,EAAEa;GACX,GACDM,SAAS;EAEf,OAAO,CAAClB,aAAa,EAAEc,KAAK,CAAC;AACjC;;;;"}
+{"version":3,"file":"useDropTarget.js","sources":["../../../../../../../src/utils/hooks/useDropTarget.ts"],"sourcesContent":["import React from 'react';\n\nexport type useDropTarget = [\n    boolean,\n    (\n        | undefined\n        | {\n              onDragEnter: React.DragEventHandler;\n              onDragLeave: React.DragEventHandler;\n              onDragOver: React.DragEventHandler;\n              onDrop: React.DragEventHandler;\n          }\n    )\n];\n\nexport const useDropTarget = (onDrop: React.DragEventHandler | undefined): useDropTarget => {\n    const [isDraggedOver, setDraggedOver] = React.useState(false);\n\n    const handleDragEnter = React.useCallback((event: React.DragEvent<HTMLElement>) => {\n        event.preventDefault();\n        setDraggedOver(true);\n    }, []);\n\n    const handleDragLeave = React.useCallback((event: React.DragEvent<HTMLElement>) => {\n        event.preventDefault();\n\n        if (\n            event.target === event.currentTarget ||\n            (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget as HTMLElement))\n        ) {\n            setDraggedOver(false);\n        }\n    }, []);\n\n    const handleDragOver = React.useCallback((event: React.DragEvent<HTMLElement>) => {\n        event.preventDefault();\n    }, []);\n\n    const handleDrop = React.useCallback(\n        (event: React.DragEvent<HTMLElement>) => {\n            event.preventDefault();\n            event.persist();\n\n            setDraggedOver(false);\n\n            if (onDrop) {\n                onDrop(event);\n            }\n        },\n        [onDrop]\n    );\n\n    const props = onDrop\n        ? {\n              onDragEnter: handleDragEnter,\n              onDragLeave: handleDragLeave,\n              onDragOver: handleDragOver,\n              onDrop: handleDrop,\n          }\n        : undefined;\n\n    return [isDraggedOver, props];\n};\n"],"names":["useDropTarget","onDrop","isDraggedOver","setDraggedOver","React","useState","handleDragEnter","useCallback","event","preventDefault","handleDragLeave","target","currentTarget","relatedTarget","contains","handleDragOver","handleDrop","persist","props","onDragEnter","onDragLeave","onDragOver","undefined"],"mappings":";;MAeaA,aAAa,GAAIC,MAA0C;EACpE,MAAM,CAACC,aAAa,EAAEC,cAAc,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAE7D,MAAMC,eAAe,GAAGF,cAAK,CAACG,WAAW,CAAEC,KAAmC;IAC1EA,KAAK,CAACC,cAAc,EAAE;IACtBN,cAAc,CAAC,IAAI,CAAC;GACvB,EAAE,EAAE,CAAC;EAEN,MAAMO,eAAe,GAAGN,cAAK,CAACG,WAAW,CAAEC,KAAmC;IAC1EA,KAAK,CAACC,cAAc,EAAE;IAEtB,IACID,KAAK,CAACG,MAAM,KAAKH,KAAK,CAACI,aAAa,IACnCJ,KAAK,CAACK,aAAa,IAAI,CAACL,KAAK,CAACI,aAAa,CAACE,QAAQ,CAACN,KAAK,CAACK,aAA4B,CAAE,EAC5F;MACEV,cAAc,CAAC,KAAK,CAAC;;GAE5B,EAAE,EAAE,CAAC;EAEN,MAAMY,cAAc,GAAGX,cAAK,CAACG,WAAW,CAAEC,KAAmC;IACzEA,KAAK,CAACC,cAAc,EAAE;GACzB,EAAE,EAAE,CAAC;EAEN,MAAMO,UAAU,GAAGZ,cAAK,CAACG,WAAW,CAC/BC,KAAmC;IAChCA,KAAK,CAACC,cAAc,EAAE;IACtBD,KAAK,CAACS,OAAO,EAAE;IAEfd,cAAc,CAAC,KAAK,CAAC;IAErB,IAAIF,MAAM,EAAE;MACRA,MAAM,CAACO,KAAK,CAAC;;GAEpB,EACD,CAACP,MAAM,CAAC,CACX;EAED,MAAMiB,KAAK,GAAGjB,MAAM,GACd;IACIkB,WAAW,EAAEb,eAAe;IAC5Bc,WAAW,EAAEV,eAAe;IAC5BW,UAAU,EAAEN,cAAc;IAC1Bd,MAAM,EAAEe;GACX,GACDM,SAAS;EAEf,OAAO,CAACpB,aAAa,EAAEgB,KAAK,CAAC;AACjC;;;;"}

package/dist/index.css

@@ -673,6 +673,11 @@
     @apply bg-grey-100;
 }
 
+/* dragged over row */
+[data-pause-hover='false'] [data-taco='table2-body'] [role='row'][data-dragged-over='true'] [role='cell'] {
+    @apply bg-grey-100;
+}
+
 /* current row */
 [data-taco='table2-body'] [role='row'][data-current='true'] [role='cell'] {
     @apply bg-grey-200;

package/dist/taco.cjs.development.js

@@ -7832,7 +7832,7 @@ const useDropTarget = onDrop => {
   }, []);
   const handleDragLeave = React__default.useCallback(event => {
     event.preventDefault();
-    if (event.target === event.currentTarget) {
+    if (event.target === event.currentTarget || event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) {
       setDraggedOver(false);
     }
   }, []);
@@ -12918,7 +12918,7 @@ const Cell = function Cell(props) {
       return (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.classList.remove('pb-4');
     };
   }, [isIndicatorVisible, isLastRow]);
-  const className = cn('[&>[data-taco="tag"]]:-my-0.5', {
+  const className = cn('[&>[data-taco="tag"]]:-my-0.5', '[[data-dragged-over="true"]_&]:bg-grey-100', {
     'border-b': !isLastRow,
     'sticky z-[1]': isFrozen,
     // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
@@ -14656,13 +14656,14 @@ const InternalRow = ({
   const meta = table.options.meta;
   const isActiveRow = meta.activeRowIndex === rowIndex;
   const isDragging = meta.dragging[row.id];
-  const [, dropTargetProps] = useDropTarget(event => onRowDrop(event, row.original));
+  const [isDraggedOver, dropTargetProps] = useDropTarget(event => onRowDrop(event, row.original));
   const attributes = {
     ...props,
     ...(typeof onRowDrop === 'function' ? dropTargetProps : undefined),
     'aria-current': isActiveRow ? true : undefined,
     'aria-grabbed': isDragging ? true : undefined,
     'data-row-index': rowIndex,
+    'data-dragged-over': isDraggedOver,
     draggable: meta.enableRowDragging ? true : undefined,
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
@@ -16386,7 +16387,9 @@ const getInputAppearanceClassnames = () => {
 const useCssGrid = table => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
-  const length = table.getRowModel().rows.length;
+  const rowsLength = table.getRowModel().rows.length;
+  const expandedRowsLength = Object.keys(table.getState().expanded).length;
+  const length = rowsLength + expandedRowsLength;
   const gridTemplateColumns = React__default.useMemo(() => {
     return allVisibleColumns.reduce((accum, column, index) => {
       let size;
@@ -16419,6 +16422,8 @@ const useCssGrid = table => {
     }, '');
   }, [allVisibleColumns, columnSizing]);
   const gridTemplateRows = React__default.useMemo(() => {
+    // 1fr makes sure that there is always a free space between the rows and footer when table height exceeds the
+    // cumulative height of all rows
     return `min-content repeat(${length}, min-content) 1fr min-content`;
   }, [length]);
   const style = {
@@ -16501,6 +16506,7 @@ const DEFAULT_ALL_DISABLED = {
   enableColumnOrdering: false,
   enableColumnResizing: false,
   enableFontSize: false,
+  enableFooter: false,
   enablePrinting: false,
   enableRowDrag: false,
   enableRowDrop: false,
@@ -16521,6 +16527,7 @@ const presets = {
     enableColumnOrdering: true,
     enableColumnResizing: true,
     enableFontSize: true,
+    enableFooter: true,
     enablePrinting: false,
     enableRowDrag: true,
     enableRowDrop: true,
@@ -16540,6 +16547,7 @@ const presets = {
     enableColumnOrdering: true,
     enableColumnResizing: true,
     enableFontSize: true,
+    enableFooter: true,
     enablePrinting: false,
     enableRowDrag: true,
     enableRowDrop: true,
@@ -16555,7 +16563,7 @@ const presets = {
   }
 };
 function useTablePreset(props) {
-  var _props$enableRowExpan, _props$enableRowSelec, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnOr, _props$enableColumnRe, _props$enableFontSize, _props$enablePrinting, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowHeigh, _props$enableRowSelec2, _props$enableEditing, _props$enableFilterin, _props$enableSearch, _props$enableSorting;
+  var _props$enableRowExpan, _props$enableRowSelec, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnOr, _props$enableColumnRe, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowHeigh, _props$enableRowSelec2, _props$enableEditing, _props$enableFilterin, _props$enableSearch, _props$enableSorting;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_ALL_DISABLED;
   const enableRowExpansion = (_props$enableRowExpan = props.enableRowExpansion) !== null && _props$enableRowExpan !== void 0 ? _props$enableRowExpan : presetOptions.enableRowExpansion;
   const enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : presetOptions.enableRowSelection;
@@ -16574,6 +16582,7 @@ function useTablePreset(props) {
     enableColumnOrdering: (_props$enableColumnOr = props.enableColumnOrdering) !== null && _props$enableColumnOr !== void 0 ? _props$enableColumnOr : presetOptions.enableColumnOrdering,
     enableColumnResizing: (_props$enableColumnRe = props.enableColumnResizing) !== null && _props$enableColumnRe !== void 0 ? _props$enableColumnRe : presetOptions.enableColumnResizing,
     enableFontSize: (_props$enableFontSize = props.enableFontSize) !== null && _props$enableFontSize !== void 0 ? _props$enableFontSize : presetOptions.enableFontSize,
+    enableFooter: (_props$enableFooter = props.enableFooter) !== null && _props$enableFooter !== void 0 ? _props$enableFooter : presetOptions.enableFooter,
     enablePrinting: (_props$enablePrinting = props.enablePrinting) !== null && _props$enablePrinting !== void 0 ? _props$enablePrinting : presetOptions.enablePrinting,
     enableRowDrag: ((_props$enableRowDrag = props.enableRowDrag) !== null && _props$enableRowDrag !== void 0 ? _props$enableRowDrag : presetOptions.enableRowDrag) && !!props.onRowDrag,
     enableRowDrop: ((_props$enableRowDrop = props.enableRowDrop) !== null && _props$enableRowDrop !== void 0 ? _props$enableRowDrop : presetOptions.enableRowDrop) && !!props.onRowDrop,
@@ -18263,9 +18272,12 @@ function useTacoSettings() {
   return React__default.useContext(TacoContext);
 }
 
-function useSettings(id, defaultSettings = {}, onChangeSettings) {
+function useUniqueTableId(tableId) {
   const tacoSettings = useTacoSettings();
-  const uniqueId = `taco.${tacoSettings.uniqueUserIdentifier}.table3.${id}.settings`;
+  return `taco.${tacoSettings.uniqueUserIdentifier}.table3.${tableId}.settings`;
+}
+function useSettings(id, defaultSettings = {}, onChangeSettings) {
+  const uniqueId = useUniqueTableId(id);
   const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, defaultSettings);
   return React__default.useMemo(() => {
     if (onChangeSettings) {
@@ -18393,6 +18405,7 @@ function useTable$2(props) {
       columnOrdering,
       currentRow,
       editing,
+      enableFooter: options.enableFooter,
       fontSize,
       hoverState,
       isUsingServer: !!props.loadPage,
@@ -18659,7 +18672,7 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
     }
     setIsHovered(false);
   };
-  const [, dropTargetProps] = useDropTarget(event => onDrop === null || onDrop === void 0 ? void 0 : onDrop(event, row.original));
+  const [isDraggedOver, dropTargetProps] = useDropTarget(event => onDrop === null || onDrop === void 0 ? void 0 : onDrop(event, row.original));
   const className = cn('group/row contents',
   // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state
   // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing
@@ -18669,6 +18682,7 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, onDrop ? dropTargetProps : undefined, {
     className: className,
     "data-row-index": index,
+    "data-dragged-over": isDraggedOver,
     onClick: handleClick,
     onClickCapture: handleClickCapture,
     onMouseEnter: handleMouseEnter,
@@ -19929,6 +19943,8 @@ function PrintButton(props) {
   const {
     printWarningDialogVisibility
   } = tableMeta.printing;
+  const printTableId = `${tableProps.id}_print`;
+  const printTableLocalStorageKey = useUniqueTableId(printTableId);
   const defaultSettings = React__default.useMemo(() => ({
     columnFreezingIndex: tableMeta.columnFreezing.frozenColumnIndex,
     columnOrder: state.columnOrder,
@@ -19945,7 +19961,7 @@ function PrintButton(props) {
   const iframeTableProps = {
     ...tableProps,
     defaultSettings,
-    id: `${tableProps.id}_print`
+    id: printTableId
   };
   useGlobalKeyDown({
     key: 'p',
@@ -19961,6 +19977,9 @@ function PrintButton(props) {
     var _loadingToastRef$curr;
     setIsPrinting(false);
     (_loadingToastRef$curr = loadingToastRef.current) === null || _loadingToastRef$curr === void 0 ? void 0 : _loadingToastRef$curr.close();
+    // Remove print table settings after printing. Doing this will not only remove unwanted localstorage space, but
+    // will also make sure that the table that is getting printed will always have the fresh table settings
+    localStorage.removeItem(printTableLocalStorageKey);
   };
   const handleBeforePrint = () => {
     var _loadingToastRef$curr2;
@@ -20478,6 +20497,8 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     "data-taco": "table2-body",
     role: "rowgroup"
   }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
+    className: "border-grey-300 col-span-full -mt-px border-t"
+  }), tableMeta.enableFooter ? /*#__PURE__*/React__default.createElement("div", {
     className: "group/footer contents",
     "data-taco": "table2-footer",
     role: "rowgroup"
@@ -20490,7 +20511,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }, reactTable$1.flexRender(footer.column.columnDef.footer, footer.getContext()))))), length ? /*#__PURE__*/React__default.createElement(Summary$1, {
     length: length,
     table: table
-  }) : null)) : /*#__PURE__*/React__default.createElement("div", {
+  }) : null) : null) : /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-full min-h-[theme(spacing.8)]"
   }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null)));
 });