@economic/taco 1.41.0 → 2.0.0-alpha.173

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowDragHandler } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    if (context.table.options.enableMultiRowSelection) {\n        const isAllRowsSelected = context.table.getIsAllRowsSelected();\n        const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n        const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n        return (\n            <ColumnHeader {...context}>\n                <Tooltip title={title}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"hover:border-blue !mt-0\"\n                        key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n                        checked={isAllRowsSelected}\n                        indeterminate={isSomeRowsSelected}\n                        onChange={context.table.toggleAllRowsSelected}\n                        tabIndex={-1}\n                    />\n                </Tooltip>\n            </ColumnHeader>\n        );\n    } else {\n        return <ColumnHeader {...context}></ColumnHeader>;\n    }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n    function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n        const { texts } = useLocalization();\n        const { rowIndex } = React.useContext(RowContext);\n        const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n        const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n        const isSelected = context.row.getIsSelected();\n        const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n        if (context.table.options.enableMultiRowSelection) {\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n\n                if (event.shiftKey) {\n                    const [fromIndex, toIndex] = toggleBetween(\n                        tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n                        rowIndex\n                    );\n\n                    context.table\n                        .getRowModel()\n                        .rows.slice(fromIndex, toIndex + 1)\n                        .forEach(row => row.toggleSelected(true));\n                } else {\n                    context.row.toggleSelected();\n                }\n\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"!mt-0\"\n                        checked={isSelected}\n                        onClick={handleClick}\n                        // this is necessary to remove console spam from eslint\n                        onChange={() => false}\n                        tabIndex={isCurrentRow ? 0 : -1}\n                    />\n                </DisplayCell>\n            );\n        } else {\n            const className = cn('!mt-0', getRadioClassnames());\n\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n                context.row.toggleSelected();\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <button\n                        className={className}\n                        aria-checked={isSelected}\n                        onClick={handleClick}\n                        role=\"radio\"\n                        tabIndex={-1}\n                        type=\"button\">\n                        {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n                    </button>\n                </DisplayCell>\n            );\n        }\n    },\n    function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n        const oldTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n        const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n        // we memo because we don't want the row re-rendering and removing focus from the checkbox\n        // we can't default to the standard comparison because we need currentRow off the table meta\n        // and we don't really care about re-rendering in any other scenario\n        return (\n            newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n            newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n        );\n    }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n    onRowDrag?: Table3RowDragHandler<TType>\n): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: 'items-center !justify-end !p-0 !pr-0.5',\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: 'items-center !justify-end !p-0 !pr-0.5',\n        },\n        // options\n        enableResizing: false,\n        size: onRowDrag ? 22 : 32,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","onRowDrag","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":";;;;;;;;;;;MAaaA,SAAS,GAAG;AAEzB,SAASC,MAAM,CAAkBC,OAAsC;EACnE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAEnC,IAAIF,OAAO,CAACG,KAAK,CAACC,OAAO,CAACC,uBAAuB,EAAE;IAC/C,MAAMC,iBAAiB,GAAGN,OAAO,CAACG,KAAK,CAACI,oBAAoB,EAAE;IAC9D,MAAMC,kBAAkB,GAAGR,OAAO,CAACG,KAAK,CAACM,qBAAqB,EAAE;IAChE,MAAMC,KAAK,GAAGJ,iBAAiB,GAAGL,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,WAAW,GAAGb,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,MAAM,CAACE,SAAS;IAEjH,oBACIC,6BAACC,QAAY,oBAAKjB,OAAO,gBACrBgB,6BAACE,OAAO;MAACR,KAAK,EAAEA;oBACZM,6BAACG,QAAQ;oBACOT,KAAK;MACjBU,SAAS,EAAC,yBAAyB;MACnCC,GAAG,EAAEC,MAAM,IAAIhB,qBAAqBE,oBAAoB,CAAC;MACzDe,OAAO,EAAEjB,iBAAiB;MAC1BkB,aAAa,EAAEhB,kBAAkB;MACjCiB,QAAQ,EAAEzB,OAAO,CAACG,KAAK,CAACuB,qBAAqB;MAC7CC,QAAQ,EAAE,CAAC;MACb,CACI,CACC;GAEtB,MAAM;IACH,oBAAOX,6BAACC,QAAY,oBAAKjB,OAAO,EAAiB;;AAEzD;AAEA,MAAM4B,aAAa,GAAG,CAACC,YAAoB,EAAEC,UAAkB;EAC3D,MAAMC,SAAS,GAAGD,UAAU,GAAGD,YAAY,GAAGC,UAAU,GAAGD,YAAY;EACvE,MAAMG,OAAO,GAAGF,UAAU,GAAGD,YAAY,GAAGC,UAAU,GAAGD,YAAY;EAErE,OAAO,CAACE,SAAS,EAAEC,OAAO,CAAC;AAC/B,CAAC;AAED,MAAMC,IAAI,gBAAGjB,cAAK,CAACkB,IAAI,CACnB,SAASC,UAAU,CAAkBnC,OAAoC;EACrE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM;IAAEkC;GAAU,GAAGpB,cAAK,CAACqB,UAAU,CAACC,UAAU,CAAC;EACjD,MAAMC,SAAS,GAAGvC,OAAO,CAACG,KAAK,CAACC,OAAO,CAACoC,IAAwB;EAEhE,MAAMC,YAAY,GAAGF,SAAS,CAACG,UAAU,CAACC,eAAe,KAAKP,QAAQ;EACtE,MAAMQ,UAAU,GAAG5C,OAAO,CAAC6C,GAAG,CAACC,aAAa,EAAE;EAC9C,MAAMpC,KAAK,GAAGkC,UAAU,GAAG3C,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,MAAM,CAACkC,QAAQ,GAAG9C,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,MAAM,CAACA,MAAM;EAEpG,IAAIb,OAAO,CAACG,KAAK,CAACC,OAAO,CAACC,uBAAuB,EAAE;IAC/C,MAAM2C,WAAW,GAAIC,KAAuB;MACxCA,KAAK,CAACC,eAAe,EAAE;MAEvB,IAAID,KAAK,CAACE,QAAQ,EAAE;QAAA;QAChB,MAAM,CAACpB,SAAS,EAAEC,OAAO,CAAC,GAAGJ,aAAa,0BACtCW,SAAS,CAACa,YAAY,CAACC,oBAAoB,CAACC,OAAO,yEAAI,CAAC,EACxDlB,QAAQ,CACX;QAEDpC,OAAO,CAACG,KAAK,CACRoD,WAAW,EAAE,CACbC,IAAI,CAACC,KAAK,CAAC1B,SAAS,EAAEC,OAAO,GAAG,CAAC,CAAC,CAClC0B,OAAO,CAACb,GAAG,IAAIA,GAAG,CAACc,cAAc,CAAC,IAAI,CAAC,CAAC;OAChD,MAAM;QACH3D,OAAO,CAAC6C,GAAG,CAACc,cAAc,EAAE;;MAGhCpB,SAAS,CAACa,YAAY,CAACC,oBAAoB,CAACC,OAAO,GAAGlB,QAAQ;KACjE;IAED,oBACIpB,6BAAC4C,WAAW,oBAAK5D,OAAO,gBACpBgB,6BAACG,QAAQ;oBACOT,KAAK;MACjBU,SAAS,EAAC,OAAO;MACjBG,OAAO,EAAEqB,UAAU;MACnBiB,OAAO,EAAEb,WAAW;;MAEpBvB,QAAQ,EAAE,MAAM,KAAK;MACrBE,QAAQ,EAAEc,YAAY,GAAG,CAAC,GAAG,CAAC;MAChC,CACQ;GAErB,MAAM;IACH,MAAMrB,SAAS,GAAG0C,EAAE,CAAC,OAAO,EAAEC,kBAAkB,EAAE,CAAC;IAEnD,MAAMf,WAAW,GAAIC,KAAuB;MACxCA,KAAK,CAACC,eAAe,EAAE;MACvBlD,OAAO,CAAC6C,GAAG,CAACc,cAAc,EAAE;MAC5BpB,SAAS,CAACa,YAAY,CAACC,oBAAoB,CAACC,OAAO,GAAGlB,QAAQ;KACjE;IAED,oBACIpB,6BAAC4C,WAAW,oBAAK5D,OAAO,gBACpBgB;MACII,SAAS,EAAEA,SAAS;sBACNwB,UAAU;MACxBiB,OAAO,EAAEb,WAAW;MACpBgB,IAAI,EAAC,OAAO;MACZrC,QAAQ,EAAE,CAAC,CAAC;MACZsC,IAAI,EAAC;OACJrB,UAAU,gBAAG5B;MAAMI,SAAS,EAAC;MAAkC,GAAG,IAAI,CAClE,CACC;;AAG1B,CAAC,EACD,SAAS8C,aAAa,CAACC,QAAuC,EAAEC,QAAuC;EACnG,MAAMC,YAAY,GAAGD,QAAQ,CAACjE,KAAK,CAACC,OAAO,CAACoC,IAA0B;EACtE,MAAM8B,YAAY,GAAGF,QAAQ,CAACjE,KAAK,CAACC,OAAO,CAACoC,IAA0B;;;;EAKtE,OACI8B,YAAY,CAAC5B,UAAU,CAACC,eAAe,KAAK0B,YAAY,CAAC3B,UAAU,CAACC,eAAe,IACnFyB,QAAQ,CAACvB,GAAG,CAACC,aAAa,EAAE,KAAKqB,QAAQ,CAACtB,GAAG,CAACC,aAAa,EAAE;AAErE,CAAC,CACsE;SAE3DyB,wBAAwB,CACpCC,SAAuC;EAEvC,OAAO;IACHC,EAAE,EAAE3E,SAAS;IACb4E,MAAM,EAAE3E,MAAM;IACd4E,IAAI,EAAE1C,IAAI;IACV2C,MAAM,EAAEC,MAAM;IACdrC,IAAI,EAAE;MACFsC,KAAK,EAAE,QAAQ;MACf1D,SAAS,EAAE,wCAAwC;MACnD2D,cAAc,EAAE,KAAK;MACrBC,YAAY,EAAE,KAAK;MACnBC,cAAc,EAAE,KAAK;MACrBP,MAAM,EAAE,EAAE;MACVQ,eAAe,EAAE;KACpB;;IAEDC,cAAc,EAAE,KAAK;IACrBC,IAAI,EAAEZ,SAAS,GAAG,EAAE,GAAG;GAC1B;AACL;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/styles.js

@@ -0,0 +1,17 @@
+import cn from 'classnames';
+
+const MIN_COLUMN_SIZE = 80; // accounts for padding and sort controls
+const getCellAlignmentClasses = (alignment = 'left') => {
+  return cn({
+    'justify-start text-left': alignment === 'left',
+    'justify-end text-right': alignment === 'right',
+    'justify-center text-center': alignment === 'center'
+  });
+};
+// Hiding input number spin buttons
+const getInputAppearanceClassnames = () => {
+  return cn('[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none');
+};
+
+export { MIN_COLUMN_SIZE, getCellAlignmentClasses, getInputAppearanceClassnames };
+//# sourceMappingURL=styles.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../../src/components/Table3/components/columns/styles.ts"],"sourcesContent":["import cn from 'classnames';\nimport { ColumnAlignment } from '../../types';\n\nexport const MIN_COLUMN_SIZE = 80; // accounts for padding and sort controls\n\nexport const getCellAlignmentClasses = (alignment: ColumnAlignment = 'left') => {\n    return cn({\n        'justify-start text-left': alignment === 'left',\n        'justify-end text-right': alignment === 'right',\n        'justify-center text-center': alignment === 'center',\n    });\n};\n\n// Hiding input number spin buttons\nexport const getInputAppearanceClassnames = () => {\n    return cn(\n        '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none'\n    );\n};\n"],"names":["MIN_COLUMN_SIZE","getCellAlignmentClasses","alignment","cn","getInputAppearanceClassnames"],"mappings":";;MAGaA,eAAe,GAAG,GAAG;MAErBC,uBAAuB,GAAG,CAACC,YAA6B,MAAM;EACvE,OAAOC,EAAE,CAAC;IACN,yBAAyB,EAAED,SAAS,KAAK,MAAM;IAC/C,wBAAwB,EAAEA,SAAS,KAAK,OAAO;IAC/C,4BAA4B,EAAEA,SAAS,KAAK;GAC/C,CAAC;AACN;AAEA;MACaE,4BAA4B,GAAG;EACxC,OAAOD,EAAE,CACL,sHAAsH,CACzH;AACL;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/rows/ExpandedRow.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+
+const ExpandedRow = /*#__PURE__*/React__default.memo(function ExpandedRow(props) {
+  var _renderer;
+  const {
+    data,
+    renderer,
+    registerSize
+  } = props;
+  const ref = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (ref.current && registerSize) {
+      registerSize(ref.current.getBoundingClientRect().height);
+    }
+  }, []);
+  const content = (_renderer = renderer(data)) === null || _renderer === void 0 ? void 0 : _renderer();
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "border-grey-300 bg-grey-50 col-span-full border-b p-4",
+    ref: ref
+  }, content);
+});
+
+export { ExpandedRow };
+//# sourceMappingURL=ExpandedRow.js.map

package/dist/esm/packages/taco/src/components/Table3/components/rows/ExpandedRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandedRow.js","sources":["../../../../../../../../../src/components/Table3/components/rows/ExpandedRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table3RowExpansionRenderer } from '../../types';\n\nexport type ExpandedRowProps<TType = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    data: TType;\n    renderer: Table3RowExpansionRenderer<TType>;\n    registerSize?: (size: number) => void;\n};\n\nexport const ExpandedRow = React.memo(function ExpandedRow<TType = unknown>(props: ExpandedRowProps<TType>) {\n    const { data, renderer, registerSize } = props;\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref.current && registerSize) {\n            registerSize(ref.current.getBoundingClientRect().height);\n        }\n    }, []);\n\n    const content = renderer(data)?.();\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <div className=\"border-grey-300 bg-grey-50 col-span-full border-b p-4\" ref={ref}>\n            {content}\n        </div>\n    );\n});\n"],"names":["ExpandedRow","React","memo","props","data","renderer","registerSize","ref","useRef","useEffect","current","getBoundingClientRect","height","content","className"],"mappings":";;MASaA,WAAW,gBAAGC,cAAK,CAACC,IAAI,CAAC,SAASF,WAAW,CAAkBG,KAA8B;;EACtG,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;GAAc,GAAGH,KAAK;EAC9C,MAAMI,GAAG,GAAGN,cAAK,CAACO,MAAM,CAAiB,IAAI,CAAC;EAE9CP,cAAK,CAACQ,SAAS,CAAC;IACZ,IAAIF,GAAG,CAACG,OAAO,IAAIJ,YAAY,EAAE;MAC7BA,YAAY,CAACC,GAAG,CAACG,OAAO,CAACC,qBAAqB,EAAE,CAACC,MAAM,CAAC;;GAE/D,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAO,gBAAGR,QAAQ,CAACD,IAAI,CAAC,8CAAd,WAAkB;EAElC,IAAI,CAACS,OAAO,EAAE;IACV,OAAO,IAAI;;EAGf,oBACIZ;IAAKa,SAAS,EAAC,uDAAuD;IAACP,GAAG,EAAEA;KACvEM,OAAO,CACN;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js

@@ -0,0 +1,255 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { useFocusManager } from '@react-aria/focus';
+import { useDropTarget } from '../../../../utils/hooks/useDropTarget.js';
+import { RowContext, useRowContext } from './RowContext.js';
+import { focusableSelector } from '../../util/editing.js';
+
+function Row(props) {
+  const tableMeta = props.table.options.meta;
+  const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;
+  const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];
+  // we use non-css hovered state to determine whether to render actions or not, for performance
+  const [isHovered, setIsHovered] = React__default.useState(false);
+  // rows are heavily memoized because performance in our table is critical
+  // be careful and selective about props that you pass to the row
+  const memoedProps = {
+    // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is
+    'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,
+    'data-current': isCurrentRow,
+    'data-selected': props.row.getIsSelected(),
+    draggable: tableMeta.rowDrag.isEnabled,
+    index: props.index,
+    onClick: tableMeta.rowClick.handleClick,
+    onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined
+  };
+  let output = /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, props, memoedProps));
+  if (tableMeta.editing.isEditing && (isCurrentRow || isHovered && !tableMeta.hoverState.isPaused)) {
+    output = /*#__PURE__*/React__default.createElement(EditingRow, Object.assign({}, props, memoedProps, {
+      isLastRow: props.isLastRow,
+      setCurrentRowIndex: tableMeta.currentRow.setCurrentRowIndex
+    }));
+  }
+  // we store the row index in context because in a virtualised table the row index and the
+  // react table row index do not match when, for example, sorting is applied
+  const contextValue = React__default.useMemo(() => ({
+    isHovered,
+    setIsHovered,
+    rowIndex: props.index
+  }), [isHovered, props.index]);
+  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
+    value: contextValue
+  }, output);
+}
+// turns out we might need some kind of "state" for the focused column, but it doesn't need to be react state that re-renders
+let lastIndex;
+function getColumnIndex(focusedElement) {
+  if (focusedElement) {
+    var _focusedElement$close;
+    return (_focusedElement$close = focusedElement.closest('[role=cell]')) === null || _focusedElement$close === void 0 ? void 0 : _focusedElement$close.getAttribute('data-column-index');
+  }
+  return null;
+}
+// This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)
+let previouslyHoveredIndex;
+const unhoverPreviousRow = tableRef => {
+  if (previouslyHoveredIndex !== undefined) {
+    var _tableRef$current;
+    const mouseoutEvent = new MouseEvent('mouseout', {
+      view: window,
+      bubbles: true,
+      cancelable: true
+    });
+    const previouslyHovered = tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector(`[data-row-index="${previouslyHoveredIndex}"]`);
+    previouslyHovered === null || previouslyHovered === void 0 ? void 0 : previouslyHovered.dispatchEvent(mouseoutEvent);
+  }
+};
+function EditingRow(props) {
+  const {
+    isLastRow,
+    setCurrentRowIndex,
+    virtualiser,
+    ...attributes
+  } = props;
+  const focusManager = useFocusManager();
+  const focusManagerOptions = {
+    tabbable: true
+  };
+  const tableMeta = props.table.options.meta;
+  const handleClickCapture = event => {
+    lastIndex = getColumnIndex(event.target);
+  };
+  const handleArrowLeftKey = event => {
+    let focusedElement;
+    if (event.key === 'ArrowLeft' || event.key === 'Tab' && event.shiftKey) {
+      // Need to stop propagation because "Tab" will be handled twice(default browser and programmatic one)
+      // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,
+      // so we don't need default browser behaviour.
+      event.stopPropagation();
+      event.preventDefault();
+      // "CTRL + ArrowLeft" or "META + ArrowLeft" should focus first focusable element of the row
+      if (event.ctrlKey || event.metaKey) {
+        event.target.blur();
+        focusedElement = focusManager.focusFirst(focusManagerOptions);
+        lastIndex = getColumnIndex(focusedElement);
+      } else {
+        // Should focus previous focusable element, if there is one
+        focusedElement = focusManager.focusPrevious(focusManagerOptions);
+        // Should move to prevoius row and select last focusable element in that row,
+        // if there is no previous focusable element in current row
+        if (props.index !== 0 && (!focusedElement || !event.currentTarget.contains(focusedElement))) {
+          tableMeta.hoverState.pause(true);
+          setCurrentRowIndex(props.index - 1);
+          setTimeout(() => {
+            focusedElement = focusManager.focusLast(focusManagerOptions);
+            // Need to update lastIndex when row got changed and last element got selected.
+            lastIndex = getColumnIndex(focusedElement);
+          }, 1);
+        } else {
+          lastIndex = getColumnIndex(focusedElement);
+        }
+      }
+    }
+  };
+  const handleArrowRightKey = event => {
+    let focusedElement;
+    if (event.key === 'ArrowRight' || event.key === 'Tab' && !event.shiftKey) {
+      // Need to stop propagation because "Tab" will be handled twice(default browser and programmatic one)
+      // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,
+      // so we don't need default browser behaviour.
+      event.stopPropagation();
+      event.preventDefault();
+      // "CTRL + ArrowRight" or "META + ArrowRight" should focus last focusable element of the row
+      if (event.ctrlKey || event.metaKey) {
+        event.target.blur();
+        focusedElement = focusManager.focusLast(focusManagerOptions);
+        lastIndex = getColumnIndex(focusedElement);
+      } else {
+        // Should focus next focusable element, if there is one
+        focusedElement = focusManager.focusNext(focusManagerOptions);
+        // Should move to next row and select first focusable element in that row,
+        // if there is no next focusable element in current row
+        if (!isLastRow && (!focusedElement || !event.currentTarget.contains(focusedElement))) {
+          tableMeta.hoverState.pause(true);
+          setCurrentRowIndex(props.index + 1);
+          setTimeout(() => {
+            focusedElement = focusManager.focusFirst(focusManagerOptions);
+            // Need to update lastIndex when row got changed and first element got selected.
+            lastIndex = getColumnIndex(focusedElement);
+          }, 1);
+        } else {
+          lastIndex = getColumnIndex(focusedElement);
+        }
+      }
+    }
+  };
+  React__default.useEffect(() => {
+    // if some row stuck in hovered state, we heed to unhover it when hover state is paused
+    if (tableMeta.hoverState.isPaused) {
+      unhoverPreviousRow(props.tableRef);
+    }
+  }, [tableMeta.hoverState.isPaused]);
+  const handleKeyDown = event => {
+    if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {
+      return;
+    }
+    handleArrowLeftKey(event);
+    handleArrowRightKey(event);
+  };
+  // this ensures we focus either on a field or on the same column when keyboard navigating up/down
+  React__default.useEffect(() => {
+    if (tableMeta.currentRow.currentRowIndex === props.index) {
+      if (lastIndex !== undefined) {
+        var _props$tableRef$curre, _lastIndexCell$queryS;
+        const lastIndexCell = (_props$tableRef$curre = props.tableRef.current) === null || _props$tableRef$curre === void 0 ? void 0 : _props$tableRef$curre.querySelector(`[role="row"][data-current="true"] [data-column-index="${lastIndex}"]`);
+        lastIndexCell === null || lastIndexCell === void 0 ? void 0 : (_lastIndexCell$queryS = lastIndexCell.querySelector(focusableSelector)) === null || _lastIndexCell$queryS === void 0 ? void 0 : _lastIndexCell$queryS.focus();
+      } else {
+        focusManager.focusFirst(focusManagerOptions);
+      }
+    }
+    // Need to subscribe to current row index and check is it a current row,
+    // for a situation where hovered row is the next row after current row...
+    // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.
+  }, [tableMeta.currentRow.currentRowIndex]);
+  return /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, attributes, {
+    onClickCapture: handleClickCapture,
+    onKeyDown: handleKeyDown
+  }));
+}
+const clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];
+const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
+  const {
+    index,
+    isLastRow: _1,
+    onClick,
+    onClickCapture,
+    onDrop,
+    row,
+    table,
+    tableRef,
+    ...attributes
+  } = props;
+  const ref = React__default.useRef(null);
+  const tableMeta = table.options.meta;
+  const {
+    setIsHovered
+  } = useRowContext();
+  // we use capture because it also picks up clicks on e.g. select checkboxes
+  const handleClickCapture = event => {
+    if (typeof onClickCapture === 'function') {
+      onClickCapture(event);
+    }
+    tableMeta.currentRow.setCurrentRowIndex(index);
+  };
+  const handleClick = event => {
+    if (typeof onClick === 'function') {
+      var _ref$current;
+      const clickedElement = event.target;
+      if (!((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(event.target)) || clickableElements.includes(clickedElement.tagName.toLowerCase()) || clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))) {
+        return;
+      }
+      onClick(row.original);
+    }
+  };
+  const handleMouseEnter = () => {
+    // When user moving mouse to fast, then some of the rows are getting stuck in hover state,
+    // because mouseleave event never got triggered, to avoid this to happen we're saving the index of last hovered row,
+    // so that we can unhover it when new row got hovered, and saving it in a variable outside of react to save in performance,
+    // since it would be very performance heavy to use state which is bound to mouse events.
+    if (previouslyHoveredIndex !== undefined) {
+      if (previouslyHoveredIndex !== index) {
+        unhoverPreviousRow(tableRef);
+        previouslyHoveredIndex = index;
+      }
+    } else {
+      previouslyHoveredIndex = index;
+    }
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    if (previouslyHoveredIndex === index) {
+      previouslyHoveredIndex = undefined;
+    }
+    setIsHovered(false);
+  };
+  const [, 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
+  '[[role="table"][data-resizing="true"]_&]:pointer-events-none', {
+    'hover:cursor-pointer': typeof onClick === 'function'
+  });
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, onDrop ? dropTargetProps : undefined, {
+    className: className,
+    "data-row-index": index,
+    onClick: handleClick,
+    onClickCapture: handleClickCapture,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    role: "row",
+    ref: ref
+  }));
+});
+
+export { Row };
+//# sourceMappingURL=Row.js.map

package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table3/components/rows/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { Row as RTRow, Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { RowContext, useRowContext } from './RowContext';\nimport { useDropTarget } from '../../../../utils/hooks/useDropTarget';\nimport { Table3RowClickHandler, Table3RowDropHandler } from '../../types';\nimport { useFocusManager } from '@react-aria/focus';\nimport { focusableSelector } from '../../util/editing';\n\ntype RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop'> & {\n    index: number;\n    isLastRow: boolean;\n    onClick?: Table3RowClickHandler<TType>;\n    onDrop?: Table3RowDropHandler<TType>;\n    row: RTRow<TType>;\n    table: RTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport function Row<TType = unknown>(props: RowProps<TType>) {\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;\n    const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];\n    // we use non-css hovered state to determine whether to render actions or not, for performance\n    const [isHovered, setIsHovered] = React.useState(false);\n\n    // rows are heavily memoized because performance in our table is critical\n    // be careful and selective about props that you pass to the row\n    const memoedProps = {\n        // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is\n        'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,\n        'data-current': isCurrentRow,\n        'data-selected': props.row.getIsSelected(),\n        draggable: tableMeta.rowDrag.isEnabled,\n        index: props.index,\n        onClick: tableMeta.rowClick.handleClick,\n        onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,\n    };\n\n    let output = <MemoedRow<TType> {...props} {...memoedProps} />;\n\n    if (tableMeta.editing.isEditing && (isCurrentRow || (isHovered && !tableMeta.hoverState.isPaused))) {\n        output = (\n            <EditingRow\n                {...props}\n                {...memoedProps}\n                isLastRow={props.isLastRow}\n                setCurrentRowIndex={tableMeta.currentRow.setCurrentRowIndex}\n            />\n        );\n    }\n\n    // we store the row index in context because in a virtualised table the row index and the\n    // react table row index do not match when, for example, sorting is applied\n    const contextValue = React.useMemo(() => ({ isHovered, setIsHovered, rowIndex: props.index }), [isHovered, props.index]);\n\n    return <RowContext.Provider value={contextValue}>{output}</RowContext.Provider>;\n}\n\n// turns out we might need some kind of \"state\" for the focused column, but it doesn't need to be react state that re-renders\nlet lastIndex;\n\nfunction getColumnIndex(focusedElement: Element) {\n    if (focusedElement) {\n        return focusedElement.closest('[role=cell]')?.getAttribute('data-column-index');\n    }\n\n    return null;\n}\n\n// This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)\nlet previouslyHoveredIndex: number | undefined;\nconst unhoverPreviousRow = (tableRef: React.RefObject<HTMLDivElement>) => {\n    if (previouslyHoveredIndex !== undefined) {\n        const mouseoutEvent = new MouseEvent('mouseout', { view: window, bubbles: true, cancelable: true });\n        const previouslyHovered = tableRef?.current?.querySelector(`[data-row-index=\"${previouslyHoveredIndex}\"]`);\n        previouslyHovered?.dispatchEvent(mouseoutEvent);\n    }\n};\n\nfunction EditingRow(props) {\n    const { isLastRow, setCurrentRowIndex, virtualiser, ...attributes } = props;\n    const focusManager = useFocusManager();\n    const focusManagerOptions = { tabbable: true };\n    const tableMeta = props.table.options.meta as TableMeta<unknown>;\n\n    const handleClickCapture = (event: React.FocusEvent) => {\n        lastIndex = getColumnIndex(event.target);\n    };\n\n    const handleArrowLeftKey = event => {\n        let focusedElement: Element;\n        if (event.key === 'ArrowLeft' || (event.key === 'Tab' && event.shiftKey)) {\n            // Need to stop propagation because \"Tab\" will be handled twice(default browser and programmatic one)\n            // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,\n            // so we don't need default browser behaviour.\n            event.stopPropagation();\n            event.preventDefault();\n\n            // \"CTRL + ArrowLeft\" or \"META + ArrowLeft\" should focus first focusable element of the row\n            if (event.ctrlKey || event.metaKey) {\n                event.target.blur();\n                focusedElement = focusManager.focusFirst(focusManagerOptions);\n                lastIndex = getColumnIndex(focusedElement);\n            } else {\n                // Should focus previous focusable element, if there is one\n                focusedElement = focusManager.focusPrevious(focusManagerOptions);\n\n                // Should move to prevoius row and select last focusable element in that row,\n                // if there is no previous focusable element in current row\n                if (props.index !== 0 && (!focusedElement || !event.currentTarget.contains(focusedElement))) {\n                    tableMeta.hoverState.pause(true);\n                    setCurrentRowIndex(props.index - 1);\n                    setTimeout(() => {\n                        focusedElement = focusManager.focusLast(focusManagerOptions);\n                        // Need to update lastIndex when row got changed and last element got selected.\n                        lastIndex = getColumnIndex(focusedElement);\n                    }, 1);\n                } else {\n                    lastIndex = getColumnIndex(focusedElement);\n                }\n            }\n        }\n    };\n\n    const handleArrowRightKey = event => {\n        let focusedElement: Element;\n        if (event.key === 'ArrowRight' || (event.key === 'Tab' && !event.shiftKey)) {\n            // Need to stop propagation because \"Tab\" will be handled twice(default browser and programmatic one)\n            // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,\n            // so we don't need default browser behaviour.\n            event.stopPropagation();\n            event.preventDefault();\n\n            // \"CTRL + ArrowRight\" or \"META + ArrowRight\" should focus last focusable element of the row\n            if (event.ctrlKey || event.metaKey) {\n                event.target.blur();\n                focusedElement = focusManager.focusLast(focusManagerOptions);\n                lastIndex = getColumnIndex(focusedElement);\n            } else {\n                // Should focus next focusable element, if there is one\n                focusedElement = focusManager.focusNext(focusManagerOptions);\n\n                // Should move to next row and select first focusable element in that row,\n                // if there is no next focusable element in current row\n                if (!isLastRow && (!focusedElement || !event.currentTarget.contains(focusedElement))) {\n                    tableMeta.hoverState.pause(true);\n                    setCurrentRowIndex(props.index + 1);\n                    setTimeout(() => {\n                        focusedElement = focusManager.focusFirst(focusManagerOptions);\n                        // Need to update lastIndex when row got changed and first element got selected.\n\n                        lastIndex = getColumnIndex(focusedElement);\n                    }, 1);\n                } else {\n                    lastIndex = getColumnIndex(focusedElement);\n                }\n            }\n        }\n    };\n\n    React.useEffect(() => {\n        // if some row stuck in hovered state, we heed to unhover it when hover state is paused\n        if (tableMeta.hoverState.isPaused) {\n            unhoverPreviousRow(props.tableRef);\n        }\n    }, [tableMeta.hoverState.isPaused]);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {\n            return;\n        }\n\n        handleArrowLeftKey(event);\n        handleArrowRightKey(event);\n    };\n\n    // this ensures we focus either on a field or on the same column when keyboard navigating up/down\n    React.useEffect(() => {\n        if (tableMeta.currentRow.currentRowIndex === props.index) {\n            if (lastIndex !== undefined) {\n                const lastIndexCell = props.tableRef.current?.querySelector(\n                    `[role=\"row\"][data-current=\"true\"] [data-column-index=\"${lastIndex}\"]`\n                );\n                lastIndexCell?.querySelector(focusableSelector)?.focus();\n            } else {\n                focusManager.focusFirst(focusManagerOptions);\n            }\n        }\n        // Need to subscribe to current row index and check is it a current row,\n        // for a situation where hovered row is the next row after current row...\n        // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.\n    }, [tableMeta.currentRow.currentRowIndex]);\n\n    return <MemoedRow {...attributes} onClickCapture={handleClickCapture} onKeyDown={handleKeyDown} />;\n}\n\n// Memoization\n\nexport type MemoedRowProps<TType = unknown> = RowProps<TType> & {\n    'aria-grabbed'?: boolean;\n    'data-current': boolean;\n    'data-selected': boolean;\n    draggable: boolean;\n    index: number;\n};\n\nconst clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];\n\nconst MemoedRow = React.memo(function MemoedRow<TType = unknown>(props: MemoedRowProps<TType>) {\n    const { index, isLastRow: _1, onClick, onClickCapture, onDrop, row, table, tableRef, ...attributes } = props;\n    const ref = React.useRef<HTMLDivElement | null>(null);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { setIsHovered } = useRowContext();\n\n    // we use capture because it also picks up clicks on e.g. select checkboxes\n    const handleClickCapture = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n        if (typeof onClickCapture === 'function') {\n            onClickCapture(event);\n        }\n\n        tableMeta.currentRow.setCurrentRowIndex(index);\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (typeof onClick === 'function') {\n            const clickedElement = event.target as HTMLElement;\n\n            if (\n                !ref.current?.contains(event.target as HTMLElement) ||\n                clickableElements.includes(clickedElement.tagName.toLowerCase()) ||\n                clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))\n            ) {\n                return;\n            }\n\n            onClick(row.original);\n        }\n    };\n\n    const handleMouseEnter = () => {\n        // When user moving mouse to fast, then some of the rows are getting stuck in hover state,\n        // because mouseleave event never got triggered, to avoid this to happen we're saving the index of last hovered row,\n        // so that we can unhover it when new row got hovered, and saving it in a variable outside of react to save in performance,\n        // since it would be very performance heavy to use state which is bound to mouse events.\n        if (previouslyHoveredIndex !== undefined) {\n            if (previouslyHoveredIndex !== index) {\n                unhoverPreviousRow(tableRef);\n                previouslyHoveredIndex = index;\n            }\n        } else {\n            previouslyHoveredIndex = index;\n        }\n        setIsHovered(true);\n    };\n    const handleMouseLeave = () => {\n        if (previouslyHoveredIndex === index) {\n            previouslyHoveredIndex = undefined;\n        }\n        setIsHovered(false);\n    };\n\n    const [, dropTargetProps] = useDropTarget(event => onDrop?.(event, row.original));\n\n    const className = cn(\n        'group/row contents',\n        // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state\n        // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        {\n            'hover:cursor-pointer': typeof onClick === 'function',\n        }\n    );\n\n    return (\n        <div\n            {...attributes}\n            {...(onDrop ? dropTargetProps : undefined)}\n            className={className}\n            data-row-index={index}\n            onClick={handleClick}\n            onClickCapture={handleClickCapture}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            role=\"row\"\n            ref={ref}\n        />\n    );\n}) as <TType = unknown>(props: MemoedRowProps<TType>) => JSX.Element;\n"],"names":["Row","props","tableMeta","table","options","meta","isCurrentRow","currentRow","currentRowIndex","index","isDraggingRow","rowDrag","dragging","row","id","isHovered","setIsHovered","React","useState","memoedProps","isEnabled","undefined","getIsSelected","draggable","onClick","rowClick","handleClick","onDrop","rowDrop","handleDrop","output","MemoedRow","editing","isEditing","hoverState","isPaused","EditingRow","isLastRow","setCurrentRowIndex","contextValue","useMemo","rowIndex","RowContext","Provider","value","lastIndex","getColumnIndex","focusedElement","closest","getAttribute","previouslyHoveredIndex","unhoverPreviousRow","tableRef","mouseoutEvent","MouseEvent","view","window","bubbles","cancelable","previouslyHovered","current","querySelector","dispatchEvent","virtualiser","attributes","focusManager","useFocusManager","focusManagerOptions","tabbable","handleClickCapture","event","target","handleArrowLeftKey","key","shiftKey","stopPropagation","preventDefault","ctrlKey","metaKey","blur","focusFirst","focusPrevious","currentTarget","contains","pause","setTimeout","focusLast","handleArrowRightKey","focusNext","useEffect","handleKeyDown","isDefaultPrevented","isPropagationStopped","detailModeEditing","lastIndexCell","focusableSelector","focus","onClickCapture","onKeyDown","clickableElements","memo","_1","ref","useRef","useRowContext","clickedElement","includes","tagName","toLowerCase","map","tag","join","original","handleMouseEnter","handleMouseLeave","dropTargetProps","useDropTarget","className","cn","onMouseEnter","onMouseLeave","role"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/rows/RowContext.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+
+const RowContext = /*#__PURE__*/React__default.createContext({
+  isHovered: false,
+  setIsHovered: () => {
+    /* empty */
+  },
+  rowIndex: 0
+});
+const useRowContext = () => React__default.useContext(RowContext);
+
+export { RowContext, useRowContext };
+//# sourceMappingURL=RowContext.js.map

package/dist/esm/packages/taco/src/components/Table3/components/rows/RowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowContext.js","sources":["../../../../../../../../../src/components/Table3/components/rows/RowContext.tsx"],"sourcesContent":["import React from 'react';\n\ntype RowContextValue = {\n    isHovered: boolean;\n    setIsHovered: (value: boolean) => void;\n    rowIndex: number;\n};\n\nexport const RowContext = React.createContext<RowContextValue>({\n    isHovered: false,\n    setIsHovered: () => {\n        /* empty */\n    },\n    rowIndex: 0,\n});\n\nexport const useRowContext = () => React.useContext(RowContext);\n"],"names":["RowContext","React","createContext","isHovered","setIsHovered","rowIndex","useRowContext","useContext"],"mappings":";;MAQaA,UAAU,gBAAGC,cAAK,CAACC,aAAa,CAAkB;EAC3DC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAE;;GAEb;EACDC,QAAQ,EAAE;CACb;MAEYC,aAAa,GAAG,MAAML,cAAK,CAACM,UAAU,CAACP,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/rows/SkeletonRow.js

@@ -0,0 +1,43 @@
+import React__default from 'react';
+import { useInView } from 'react-intersection-observer';
+
+function SkeletonCell(props) {
+  const {
+    loadPage,
+    pageIndex,
+    table
+  } = props;
+  const {
+    ref,
+    inView
+  } = useInView({
+    threshold: 0,
+    triggerOnce: true,
+    initialInView: pageIndex === 0
+  });
+  React__default.useEffect(() => {
+    if (inView) {
+      loadPage(pageIndex, table.getState().sorting, table.getState().columnFilters, table.getState().globalFilter);
+    }
+  }, [inView]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "border-grey-300 flex h-10 items-center border-b px-2",
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "bg-grey-100 text-grey-700 h-4 w-full text-center text-xs"
+  }));
+}
+function SkeletonRow(props) {
+  const {
+    columns,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "contents"
+  }, columns.map(column => /*#__PURE__*/React__default.createElement(SkeletonCell, Object.assign({
+    key: column.id
+  }, otherProps))));
+}
+
+export { SkeletonRow };
+//# sourceMappingURL=SkeletonRow.js.map

package/dist/esm/packages/taco/src/components/Table3/components/rows/SkeletonRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonRow.js","sources":["../../../../../../../../../src/components/Table3/components/rows/SkeletonRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useInView } from 'react-intersection-observer';\nimport { Table3LoadPageHandler } from '../../types';\nimport { Column as RTColumn, Table as RTable } from '@tanstack/react-table';\n\ntype SkeletonCellProps<TType = unknown> = {\n    loadPage: Table3LoadPageHandler;\n    pageIndex: number;\n    table: RTable<TType>;\n};\nfunction SkeletonCell<TType = unknown>(props: SkeletonCellProps<TType>) {\n    const { loadPage, pageIndex, table } = props;\n    const { ref, inView } = useInView({\n        threshold: 0,\n        triggerOnce: true,\n        initialInView: pageIndex === 0,\n    });\n\n    React.useEffect(() => {\n        if (inView) {\n            loadPage(pageIndex, table.getState().sorting, table.getState().columnFilters, table.getState().globalFilter);\n        }\n    }, [inView]);\n\n    return (\n        <div className=\"border-grey-300 flex h-10 items-center border-b px-2\" ref={ref}>\n            <span className=\"bg-grey-100 text-grey-700 h-4 w-full text-center text-xs\" />\n        </div>\n    );\n}\n\nexport type SkeletonRowProps<TType = unknown> = {\n    columns: RTColumn<TType, unknown>[];\n    loadPage: Table3LoadPageHandler;\n    pageIndex: number;\n    table: RTable<TType>;\n};\n\nexport function SkeletonRow<TType = unknown>(props: SkeletonRowProps<TType>) {\n    const { columns, ...otherProps } = props;\n\n    return (\n        <div className=\"contents\">\n            {columns.map(column => (\n                <SkeletonCell key={column.id} {...otherProps} />\n            ))}\n        </div>\n    );\n}\n"],"names":["SkeletonCell","props","loadPage","pageIndex","table","ref","inView","useInView","threshold","triggerOnce","initialInView","React","useEffect","getState","sorting","columnFilters","globalFilter","className","SkeletonRow","columns","otherProps","map","column","key","id"],"mappings":";;;AAUA,SAASA,YAAY,CAAkBC,KAA+B;EAClE,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;GAAO,GAAGH,KAAK;EAC5C,MAAM;IAAEI,GAAG;IAAEC;GAAQ,GAAGC,SAAS,CAAC;IAC9BC,SAAS,EAAE,CAAC;IACZC,WAAW,EAAE,IAAI;IACjBC,aAAa,EAAEP,SAAS,KAAK;GAChC,CAAC;EAEFQ,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIN,MAAM,EAAE;MACRJ,QAAQ,CAACC,SAAS,EAAEC,KAAK,CAACS,QAAQ,EAAE,CAACC,OAAO,EAAEV,KAAK,CAACS,QAAQ,EAAE,CAACE,aAAa,EAAEX,KAAK,CAACS,QAAQ,EAAE,CAACG,YAAY,CAAC;;GAEnH,EAAE,CAACV,MAAM,CAAC,CAAC;EAEZ,oBACIK;IAAKM,SAAS,EAAC,sDAAsD;IAACZ,GAAG,EAAEA;kBACvEM;IAAMM,SAAS,EAAC;IAA6D,CAC3E;AAEd;SASgBC,WAAW,CAAkBjB,KAA8B;EACvE,MAAM;IAAEkB,OAAO;IAAE,GAAGC;GAAY,GAAGnB,KAAK;EAExC,oBACIU;IAAKM,SAAS,EAAC;KACVE,OAAO,CAACE,GAAG,CAACC,MAAM,iBACfX,6BAACX,YAAY;IAACuB,GAAG,EAAED,MAAM,CAACE;KAAQJ,UAAU,EAC/C,CAAC,CACA;AAEd;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/rows/styles.js

@@ -0,0 +1,9 @@
+const rowHeightSizeEstimates = {
+  short: 33,
+  medium: 41,
+  tall: 49,
+  'extra-tall': 57
+};
+
+export { rowHeightSizeEstimates };
+//# sourceMappingURL=styles.js.map

package/dist/esm/packages/taco/src/components/Table3/components/rows/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../../src/components/Table3/components/rows/styles.ts"],"sourcesContent":["export const rowHeightSizeEstimates = {\n    short: 33,\n    medium: 41,\n    tall: 49,\n    'extra-tall': 57,\n};\n"],"names":["rowHeightSizeEstimates","short","medium","tall"],"mappings":"MAAaA,sBAAsB,GAAG;EAClCC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE,EAAE;EACR,YAAY,EAAE;;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/ColumnSettings.js

@@ -0,0 +1,105 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../../Icon/Icon.js';
+import { useLocalization } from '../../../Provider/Localization.js';
+import { Button } from '../../../Button/Button.js';
+import { Checkbox } from '../../../Checkbox/Checkbox.js';
+import { Input } from '../../../Input/Input.js';
+import { Popover } from '../../../Popover/Popover.js';
+import { isInternalColumn } from '../../util/columns.js';
+import { ensureOrdering } from '../../hooks/features/useColumnOrdering.js';
+import { Container } from '../../../../primitives/Sortable/components/Container.js';
+import { arrayMove } from '@dnd-kit/sortable';
+import { Item } from '../../../../primitives/Sortable/components/Item.js';
+import { List } from '../../../../primitives/Sortable/components/List.js';
+
+const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
+  var _column$columnDef$met;
+  const {
+    column,
+    draggable = false,
+    ...dragAttributes
+  } = props;
+  const canHide = column.getCanHide();
+  const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {
+    'hover:bg-grey-200': canHide || draggable,
+    'hover:cursor-pointer': canHide,
+    'active:cursor-move active:bg-grey-300': draggable
+  });
+  const attributes = draggable ? dragAttributes : undefined;
+  const isVisible = column.getIsVisible();
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    key: column.id,
+    className: className,
+    onClick: () => column.toggleVisibility(!isVisible),
+    ref: ref
+  }), draggable ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: "drag",
+    className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5"
+  }) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex-grow truncate"
+  }, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
+    checked: isVisible,
+    onChange: () => column.toggleVisibility(!isVisible)
+  }) : null);
+});
+function ColumnSettings(props) {
+  const {
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const [query, setQuery] = React__default.useState('');
+  const allColumns = table.getAllLeafColumns();
+  const tableMeta = table.options.meta;
+  const columns = React__default.useMemo(() => allColumns.filter(column => !isInternalColumn(column.id)).filter(column => {
+    var _column$columnDef$met2;
+    return query !== null && query !== void 0 && query.length ? (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header.toLowerCase().includes(query.toLowerCase()) : true;
+  }), [allColumns, query]);
+  const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
+  const handleReorder = (activeId, overId) => {
+    if (columns.find(column => {
+      var _column$columnDef$met3;
+      return column.id === overId && ((_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.enableOrdering) === false;
+    })) {
+      return;
+    }
+    table.setColumnOrder(currentOrder => ensureOrdering(allColumns, arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId))));
+  };
+  return /*#__PURE__*/React__default.createElement(Button, {
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex w-60 flex-col gap-2"
+    }, table.options.enableHiding ? /*#__PURE__*/React__default.createElement(Input, {
+      onChange: event => setQuery(event.target.value),
+      placeholder: texts.table3.columnSettings.search,
+      value: query
+    }) : null, tableMeta.columnOrdering.isEnabled && columns.length && !(query !== null && query !== void 0 && query.length) ? /*#__PURE__*/React__default.createElement(Container, {
+      reorder: handleReorder
+    }, /*#__PURE__*/React__default.createElement(List, {
+      id: "columns",
+      className: listClassName
+    }, columns.map(column => {
+      var _column$columnDef$met4, _column$columnDef$met5;
+      return /*#__PURE__*/React__default.createElement(Item, {
+        key: column.id,
+        id: column.id,
+        disabled: !((_column$columnDef$met4 = column.columnDef.meta) !== null && _column$columnDef$met4 !== void 0 && _column$columnDef$met4.enableOrdering),
+        asChild: true
+      }, /*#__PURE__*/React__default.createElement(Column, {
+        column: column,
+        draggable: (_column$columnDef$met5 = column.columnDef.meta) === null || _column$columnDef$met5 === void 0 ? void 0 : _column$columnDef$met5.enableOrdering
+      }));
+    }))) : /*#__PURE__*/React__default.createElement("div", {
+      className: listClassName
+    }, columns.length ? columns.map(column => /*#__PURE__*/React__default.createElement(Column, {
+      column: column,
+      key: column.id
+    })) : texts.table3.columnSettings.noResults))))
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "columns"
+  }), texts.table3.columnSettings.button);
+}
+
+export { ColumnSettings };
+//# sourceMappingURL=ColumnSettings.js.map

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/ColumnSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSettings.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/ColumnSettings.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTable, Column as RTColumn, TableMeta } from '@tanstack/react-table';\nimport { isInternalColumn } from '../../util/columns';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Checkbox } from '../../../Checkbox/Checkbox';\nimport { Popover } from '../../../Popover/Popover';\nimport { Input } from '../../../Input/Input';\nimport * as SortablePrimitive from '../../../../primitives/Sortable/Sortable';\nimport { Icon } from '../../../Icon/Icon';\nimport { ensureOrdering } from '../../hooks/features/useColumnOrdering';\nimport { Button } from '../../../Button/Button';\n\ntype ColumnProps<TType = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    column: RTColumn<TType, unknown>;\n    draggable?: boolean;\n};\n\nconst Column = React.forwardRef(function Column<TType = unknown>(props: ColumnProps<TType>, ref: React.Ref<HTMLDivElement>) {\n    const { column, draggable = false, ...dragAttributes } = props;\n    const canHide = column.getCanHide();\n\n    const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {\n        'hover:bg-grey-200': canHide || draggable,\n        'hover:cursor-pointer': canHide,\n        'active:cursor-move active:bg-grey-300': draggable,\n    });\n\n    const attributes = draggable ? dragAttributes : undefined;\n    const isVisible = column.getIsVisible();\n\n    return (\n        <div {...attributes} key={column.id} className={className} onClick={() => column.toggleVisibility(!isVisible)} ref={ref}>\n            {draggable ? <Icon name=\"drag\" className=\"text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5\" /> : null}\n            <span className=\"flex-grow truncate\">{column.columnDef.meta?.header}</span>\n            {canHide ? <Checkbox checked={isVisible} onChange={() => column.toggleVisibility(!isVisible)} /> : null}\n        </div>\n    );\n});\n\nexport type ColumnSettingsProps<TType = unknown> = {\n    table: RTable<TType>;\n};\n\nexport function ColumnSettings<TType = unknown>(props: ColumnSettingsProps<TType>) {\n    const { table } = props;\n    const { texts } = useLocalization();\n    const [query, setQuery] = React.useState('');\n    const allColumns = table.getAllLeafColumns();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columns = React.useMemo(\n        () =>\n            allColumns\n                .filter(column => !isInternalColumn(column.id))\n                .filter(column =>\n                    query?.length ? column.columnDef.meta?.header.toLowerCase().includes(query.toLowerCase()) : true\n                ),\n        [allColumns, query]\n    );\n\n    const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';\n\n    const handleReorder = (activeId, overId) => {\n        if (columns.find(column => column.id === overId && column.columnDef.meta?.enableOrdering === false)) {\n            return;\n        }\n\n        table.setColumnOrder(currentOrder =>\n            ensureOrdering(\n                allColumns,\n                SortablePrimitive.arrayMove(\n                    currentOrder,\n                    currentOrder.findIndex(c => c === activeId),\n                    currentOrder.findIndex(c => c === overId)\n                )\n            )\n        );\n    };\n\n    return (\n        <Button\n            popover={popoverProps => (\n                <Popover {...popoverProps}>\n                    <Popover.Content>\n                        <div className=\"flex w-60 flex-col gap-2\">\n                            {table.options.enableHiding ? (\n                                <Input\n                                    onChange={event => setQuery(event.target.value)}\n                                    placeholder={texts.table3.columnSettings.search}\n                                    value={query}\n                                />\n                            ) : null}\n                            {tableMeta.columnOrdering.isEnabled && columns.length && !query?.length ? (\n                                <SortablePrimitive.Container reorder={handleReorder}>\n                                    <SortablePrimitive.List id=\"columns\" className={listClassName}>\n                                        {columns.map(column => (\n                                            <SortablePrimitive.Item\n                                                key={column.id}\n                                                id={column.id}\n                                                disabled={!column.columnDef.meta?.enableOrdering}\n                                                asChild>\n                                                <Column\n                                                    column={column as any}\n                                                    draggable={column.columnDef.meta?.enableOrdering}\n                                                />\n                                            </SortablePrimitive.Item>\n                                        ))}\n                                    </SortablePrimitive.List>\n                                </SortablePrimitive.Container>\n                            ) : (\n                                <div className={listClassName}>\n                                    {columns.length\n                                        ? columns.map(column => <Column column={column as any} key={column.id} />)\n                                        : texts.table3.columnSettings.noResults}\n                                </div>\n                            )}\n                        </div>\n                    </Popover.Content>\n                </Popover>\n            )}>\n            <Icon name=\"columns\" />\n            {texts.table3.columnSettings.button}\n        </Button>\n    );\n}\n"],"names":["Column","React","forwardRef","props","ref","column","draggable","dragAttributes","canHide","getCanHide","className","cn","attributes","undefined","isVisible","getIsVisible","key","id","onClick","toggleVisibility","Icon","name","columnDef","meta","header","Checkbox","checked","onChange","ColumnSettings","table","texts","useLocalization","query","setQuery","useState","allColumns","getAllLeafColumns","tableMeta","options","columns","useMemo","filter","isInternalColumn","length","toLowerCase","includes","listClassName","handleReorder","activeId","overId","find","enableOrdering","setColumnOrder","currentOrder","ensureOrdering","SortablePrimitive","findIndex","c","Button","popover","popoverProps","Popover","Content","enableHiding","Input","event","target","value","placeholder","table3","columnSettings","search","columnOrdering","isEnabled","reorder","map","disabled","asChild","noResults","button"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAMA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,MAAM,CAAkBG,KAAyB,EAAEC,GAA8B;;EACtH,MAAM;IAAEC,MAAM;IAAEC,SAAS,GAAG,KAAK;IAAE,GAAGC;GAAgB,GAAGJ,KAAK;EAC9D,MAAMK,OAAO,GAAGH,MAAM,CAACI,UAAU,EAAE;EAEnC,MAAMC,SAAS,GAAGC,EAAE,CAAC,0DAA0D,EAAE;IAC7E,mBAAmB,EAAEH,OAAO,IAAIF,SAAS;IACzC,sBAAsB,EAAEE,OAAO;IAC/B,uCAAuC,EAAEF;GAC5C,CAAC;EAEF,MAAMM,UAAU,GAAGN,SAAS,GAAGC,cAAc,GAAGM,SAAS;EACzD,MAAMC,SAAS,GAAGT,MAAM,CAACU,YAAY,EAAE;EAEvC,oBACId,sDAASW,UAAU;IAAEI,GAAG,EAAEX,MAAM,CAACY,EAAE;IAAEP,SAAS,EAAEA,SAAS;IAAEQ,OAAO,EAAE,MAAMb,MAAM,CAACc,gBAAgB,CAAC,CAACL,SAAS,CAAC;IAAEV,GAAG,EAAEA;MAC/GE,SAAS,gBAAGL,6BAACmB,IAAI;IAACC,IAAI,EAAC,MAAM;IAACX,SAAS,EAAC;IAA8D,GAAG,IAAI,eAC9GT;IAAMS,SAAS,EAAC;8BAAsBL,MAAM,CAACiB,SAAS,CAACC,IAAI,0DAArB,sBAAuBC,MAAM,CAAQ,EAC1EhB,OAAO,gBAAGP,6BAACwB,QAAQ;IAACC,OAAO,EAAEZ,SAAS;IAAEa,QAAQ,EAAE,MAAMtB,MAAM,CAACc,gBAAgB,CAAC,CAACL,SAAS;IAAK,GAAG,IAAI,CACrG;AAEd,CAAC,CAAC;SAMcc,cAAc,CAAkBzB,KAAiC;EAC7E,MAAM;IAAE0B;GAAO,GAAG1B,KAAK;EACvB,MAAM;IAAE2B;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGhC,cAAK,CAACiC,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAMC,UAAU,GAAGN,KAAK,CAACO,iBAAiB,EAAE;EAC5C,MAAMC,SAAS,GAAGR,KAAK,CAACS,OAAO,CAACf,IAAwB;EACxD,MAAMgB,OAAO,GAAGtC,cAAK,CAACuC,OAAO,CACzB,MACIL,UAAU,CACLM,MAAM,CAACpC,MAAM,IAAI,CAACqC,gBAAgB,CAACrC,MAAM,CAACY,EAAE,CAAC,CAAC,CAC9CwB,MAAM,CAACpC,MAAM;IAAA;IAAA,OACV2B,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEW,MAAM,6BAAGtC,MAAM,CAACiB,SAAS,CAACC,IAAI,2DAArB,uBAAuBC,MAAM,CAACoB,WAAW,EAAE,CAACC,QAAQ,CAACb,KAAK,CAACY,WAAW,EAAE,CAAC,GAAG,IAAI;IACnG,EACT,CAACT,UAAU,EAAEH,KAAK,CAAC,CACtB;EAED,MAAMc,aAAa,GAAG,+CAA+C;EAErE,MAAMC,aAAa,GAAG,CAACC,QAAQ,EAAEC,MAAM;IACnC,IAAIV,OAAO,CAACW,IAAI,CAAC7C,MAAM;MAAA;MAAA,OAAIA,MAAM,CAACY,EAAE,KAAKgC,MAAM,IAAI,2BAAA5C,MAAM,CAACiB,SAAS,CAACC,IAAI,2DAArB,uBAAuB4B,cAAc,MAAK,KAAK;MAAC,EAAE;MACjG;;IAGJtB,KAAK,CAACuB,cAAc,CAACC,YAAY,IAC7BC,cAAc,CACVnB,UAAU,EACVoB,SAA2B,CACvBF,YAAY,EACZA,YAAY,CAACG,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKT,QAAQ,CAAC,EAC3CK,YAAY,CAACG,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKR,MAAM,CAAC,CAC5C,CACJ,CACJ;GACJ;EAED,oBACIhD,6BAACyD,MAAM;IACHC,OAAO,EAAEC,YAAY,iBACjB3D,6BAAC4D,OAAO,oBAAKD,YAAY,gBACrB3D,6BAAC4D,OAAO,CAACC,OAAO,qBACZ7D;MAAKS,SAAS,EAAC;OACVmB,KAAK,CAACS,OAAO,CAACyB,YAAY,gBACvB9D,6BAAC+D,KAAK;MACFrC,QAAQ,EAAEsC,KAAK,IAAIhC,QAAQ,CAACgC,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;MAC/CC,WAAW,EAAEtC,KAAK,CAACuC,MAAM,CAACC,cAAc,CAACC,MAAM;MAC/CJ,KAAK,EAAEnC;MACT,GACF,IAAI,EACPK,SAAS,CAACmC,cAAc,CAACC,SAAS,IAAIlC,OAAO,CAACI,MAAM,IAAI,EAACX,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEW,MAAM,iBACnE1C,6BAACsD,SAA2B;MAACmB,OAAO,EAAE3B;oBAClC9C,6BAACsD,IAAsB;MAACtC,EAAE,EAAC,SAAS;MAACP,SAAS,EAAEoC;OAC3CP,OAAO,CAACoC,GAAG,CAACtE,MAAM;MAAA;MAAA,oBACfJ,6BAACsD,IAAsB;QACnBvC,GAAG,EAAEX,MAAM,CAACY,EAAE;QACdA,EAAE,EAAEZ,MAAM,CAACY,EAAE;QACb2D,QAAQ,EAAE,4BAACvE,MAAM,CAACiB,SAAS,CAACC,IAAI,mDAArB,uBAAuB4B,cAAc;QAChD0B,OAAO;sBACP5E,6BAACD,MAAM;QACHK,MAAM,EAAEA,MAAa;QACrBC,SAAS,4BAAED,MAAM,CAACiB,SAAS,CAACC,IAAI,2DAArB,uBAAuB4B;QACpC,CACmB;KAC5B,CAAC,CACmB,CACC,gBAE9BlD;MAAKS,SAAS,EAAEoC;OACXP,OAAO,CAACI,MAAM,GACTJ,OAAO,CAACoC,GAAG,CAACtE,MAAM,iBAAIJ,6BAACD,MAAM;MAACK,MAAM,EAAEA,MAAa;MAAEW,GAAG,EAAEX,MAAM,CAACY;MAAM,CAAC,GACxEa,KAAK,CAACuC,MAAM,CAACC,cAAc,CAACQ,SAAS,CAElD,CACC,CACQ;kBAG1B7E,6BAACmB,IAAI;IAACC,IAAI,EAAC;IAAY,EACtBS,KAAK,CAACuC,MAAM,CAACC,cAAc,CAACS,MAAM,CAC9B;AAEjB;;;;"}