@economic/taco 0.0.1-alpha.0

package/dist/esm/src/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /** Label for the switch */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledSwitchProps extends SwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { label, onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group h-6 w-10 flex rounded-full inline-flex',\n        {\n            'mr-2': !!label,\n            'bg-grey-darker aria-checked:bg-blue focus:yt-focus': !props.disabled,\n            'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\n        },\n        props.className\n    );\n\n    const element = (\n        <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform transition-transform translate-x-1 group-aria-checked:translate-x-5 h-4 w-4 mt-1 bg-white rounded-full\" />\n        </PrimitiveSwitch.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn('flex items-center cursor-pointer', {\n            'cursor-not-allowed text-grey-dark': props.disabled,\n        });\n\n        return (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":";;;;;;IA4BaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;AACnC,MAAQC,KAAR,GAA2CF,KAA3C,CAAQE,KAAR;AAAA,MAAeC,QAAf,GAA2CH,KAA3C,CAAeG,QAAf;AAAA,MAA4BC,UAA5B,iCAA2CJ,KAA3C;;AAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,8CADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,0DAAsD,CAACF,KAAK,CAACO,QAFjE;AAGI,mEAA+DP,KAAK,CAACO;AAHzE,GAFgB,EAOhBP,KAAK,CAACK,SAPU,CAApB;AAUA,MAAMG,OAAO,GACTT,aAAA,CAACU,IAAD,oBAA0BL;AAAYC,IAAAA,SAAS,EAAEA;AAAWK,IAAAA,eAAe,EAAEP;AAAUF,IAAAA,GAAG,EAAEA;IAA5F,EACIF,aAAA,CAACU,KAAD;AAAuBJ,IAAAA,SAAS,EAAC;GAAjC,CADJ,CADJ;;AAMA,MAAIH,KAAJ,EAAW;AACP,QAAMS,cAAc,GAAGL,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCN,KAAK,CAACO;AADe,KAArC,CAAzB;AAIA,WACIR,aAAA,QAAA;AAAOM,MAAAA,SAAS,EAAEM;KAAlB,EACKH,OADL,EAEKN,KAFL,CADJ;AAMH;;AAED,SAAOM,OAAP;AACH,CAjCqB;;;;"}

package/dist/esm/src/components/Table/components/BaseTable.js

@@ -0,0 +1,55 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import cn from 'classnames';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
+import { Column } from '../util/renderColumn.js';
+
+var _excluded = ["autoFocus", "children", "disableSorting", "headerGroups", "headerRef", "bodyRef"];
+var DefaultEmptyState = function DefaultEmptyState() {
+  return null;
+};
+var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props, ref) {
+  var tableRef = useProxiedRef(ref);
+
+  var autoFocus = props.autoFocus,
+      children = props.children,
+      headerGroups = props.headerGroups,
+      headerRef = props.headerRef,
+      bodyRef = props.bodyRef,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  React__default.useEffect(function () {
+    if (autoFocus && tableRef.current) {
+      tableRef.current.focus();
+    }
+  }, []);
+  var className = cn('yt-table', props.className);
+  return React__default.createElement("div", Object.assign({}, otherProps, {
+    role: "table",
+    className: className,
+    ref: tableRef
+  }), React__default.createElement("div", {
+    role: "rowgroup",
+    className: "yt-table__head",
+    ref: headerRef
+  }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(function (headerGroup, index) {
+    return React__default.createElement("div", {
+      key: index,
+      role: "row",
+      className: "yt-table__row"
+    }, headerGroup.headers.map(function (cell, index) {
+      return React__default.createElement(Column, {
+        key: index,
+        index: index,
+        cell: cell
+      });
+    }));
+  })), React__default.createElement("div", {
+    role: "rowgroup",
+    className: "yt-table__body",
+    ref: bodyRef
+  }, children));
+});
+
+export { BaseTable, DefaultEmptyState };
+//# sourceMappingURL=BaseTable.js.map

package/dist/esm/src/components/Table/components/BaseTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTable.js","sources":["../../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { HeaderGroup } from 'react-table';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n    const tableRef = useProxiedRef<HTMLDivElement>(ref);\n    const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n    React.useEffect(() => {\n        if (autoFocus && tableRef.current) {\n            tableRef.current.focus();\n        }\n    }, []);\n\n    const className = cn('yt-table', props.className);\n\n    return (\n        <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n            <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n                {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n                    <div key={index} role=\"row\" className=\"yt-table__row\">\n                        {headerGroup.headers.map((cell: any, index: number) => (\n                            <Column key={index} index={index} cell={cell} />\n                        ))}\n                    </div>\n                ))}\n            </div>\n\n            <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n                {children}\n            </div>\n        </div>\n    );\n});\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useProxiedRef","autoFocus","children","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;;;IAQaA,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,SAAuB,IAAvB;AAAA;IAEpBC,SAAS,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,SAAT,CAAmBG,KAAnB,EAA6CC,GAA7C;AACtC,MAAMC,QAAQ,GAAGC,aAAa,CAAiBF,GAAjB,CAA9B;;AACA,MAAQG,SAAR,GAAoGJ,KAApG,CAAQI,SAAR;AAAA,MAAmBC,QAAnB,GAAoGL,KAApG,CAAmBK,QAAnB;AAAA,MAAgDC,YAAhD,GAAoGN,KAApG,CAAgDM,YAAhD;AAAA,MAA8DC,SAA9D,GAAoGP,KAApG,CAA8DO,SAA9D;AAAA,MAAyEC,OAAzE,GAAoGR,KAApG,CAAyEQ,OAAzE;AAAA,MAAqFC,UAArF,iCAAoGT,KAApG;;AAEAF,EAAAA,cAAK,CAACY,SAAN,CAAgB;AACZ,QAAIN,SAAS,IAAIF,QAAQ,CAACS,OAA1B,EAAmC;AAC/BT,MAAAA,QAAQ,CAACS,OAAT,CAAiBC,KAAjB;AACH;AACJ,GAJD,EAIG,EAJH;AAMA,MAAMC,SAAS,GAAGC,EAAE,CAAC,UAAD,EAAad,KAAK,CAACa,SAAnB,CAApB;AAEA,SACIf,4BAAA,MAAA,oBAASW;AAAYM,IAAAA,IAAI,EAAC;AAAQF,IAAAA,SAAS,EAAEA;AAAWZ,IAAAA,GAAG,EAAEC;IAA7D,EACIJ,4BAAA,MAAA;AAAKiB,IAAAA,IAAI,EAAC;AAAWF,IAAAA,SAAS,EAAC;AAAiBZ,IAAAA,GAAG,EAAEM;GAArD,EACKD,YADL,aACKA,YADL,uBACKA,YAAY,CAAEU,GAAd,CAAkB,UAACC,WAAD,EAAmCC,KAAnC;AAAA,WACfpB,4BAAA,MAAA;AAAKqB,MAAAA,GAAG,EAAED;AAAOH,MAAAA,IAAI,EAAC;AAAMF,MAAAA,SAAS,EAAC;KAAtC,EACKI,WAAW,CAACG,OAAZ,CAAoBJ,GAApB,CAAwB,UAACK,IAAD,EAAYH,KAAZ;AAAA,aACrBpB,4BAAA,CAACwB,MAAD;AAAQH,QAAAA,GAAG,EAAED;AAAOA,QAAAA,KAAK,EAAEA;AAAOG,QAAAA,IAAI,EAAEA;OAAxC,CADqB;AAAA,KAAxB,CADL,CADe;AAAA,GAAlB,CADL,CADJ,EAWIvB,4BAAA,MAAA;AAAKiB,IAAAA,IAAI,EAAC;AAAWF,IAAAA,SAAS,EAAC;AAAiBZ,IAAAA,GAAG,EAAEO;GAArD,EACKH,QADL,CAXJ,CADJ;AAiBH,CA7BwB;;;;"}

package/dist/esm/src/components/Table/components/PaginatedTable.js

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { Table } from './Table.js';
+
+var PaginatedTable = /*#__PURE__*/React__default.forwardRef(function PaginatedTable(props, ref) {
+  return React__default.createElement(Table, Object.assign({}, props, {
+    disablePagination: false,
+    ref: ref
+  }));
+});
+
+PaginatedTable.Column = function () {
+  return null;
+};
+
+PaginatedTable.Group = function () {
+  return null;
+};
+
+export { PaginatedTable };
+//# sourceMappingURL=PaginatedTable.js.map

package/dist/esm/src/components/Table/components/PaginatedTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedTable.js","sources":["../../../../../../src/components/Table/components/PaginatedTable.tsx"],"sourcesContent":["import React from 'react';\nimport { ForwardedGenericTableWithStatics, TableProps, TableRef } from '../types';\nimport { Table } from './Table';\n\nexport const PaginatedTable = React.forwardRef(function PaginatedTable<T>(props: TableProps<T>, ref: React.Ref<TableRef>) {\n    return <Table {...props} disablePagination={false} ref={ref} />;\n}) as ForwardedGenericTableWithStatics;\n\nPaginatedTable.Column = () => null;\nPaginatedTable.Group = () => null;\n"],"names":["PaginatedTable","React","forwardRef","props","ref","Table","disablePagination","Column","Group"],"mappings":";;;IAIaA,cAAc,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,cAAT,CAA2BG,KAA3B,EAAiDC,GAAjD;AAC3C,SAAOH,4BAAA,CAACI,KAAD,oBAAWF;AAAOG,IAAAA,iBAAiB,EAAE;AAAOF,IAAAA,GAAG,EAAEA;IAAjD,CAAP;AACH,CAF6B;;AAI9BJ,cAAc,CAACO,MAAf,GAAwB;AAAA,SAAM,IAAN;AAAA,CAAxB;;AACAP,cAAc,CAACQ,KAAf,GAAuB;AAAA,SAAM,IAAN;AAAA,CAAvB;;;;"}

package/dist/esm/src/components/Table/components/Table.js

@@ -0,0 +1,64 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
+import { Pagination } from '../../Pagination/Pagination.js';
+import { useTable } from '../hooks/useTable.js';
+import { Row } from '../util/renderRow.js';
+import { BaseTable, DefaultEmptyState } from './BaseTable.js';
+
+var _excluded = ["emptyStateRenderer"];
+var Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
+  var _props$emptyStateRend = props.emptyStateRenderer,
+      emptyStateRenderer = _props$emptyStateRend === void 0 ? DefaultEmptyState : _props$emptyStateRend,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var tableRef = useProxiedRef(ref);
+
+  var _useTable = useTable(otherProps, tableRef),
+      rowProps = _useTable.rowProps,
+      tableProps = _useTable.tableProps,
+      rows = _useTable.rows,
+      prepareRow = _useTable.prepareRow,
+      pagination = _useTable.pagination,
+      instance = _useTable.instance;
+
+  var paginationElement;
+
+  if (pagination) {
+    paginationElement = React__default.createElement(Pagination, {
+      className: "my-4 w-full",
+      length: pagination.length,
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      setPageIndex: pagination.setPageIndex,
+      setPageSize: pagination.setPageSize,
+      showPageControls: pagination.length > pagination.pageSize,
+      dangerouslyHijackGlobalKeyboardNavigation: props.dangerouslyHijackGlobalKeyboardNavigation
+    });
+  }
+
+  return React__default.createElement(React__default.Fragment, null, paginationElement, React__default.createElement(BaseTable, Object.assign({}, tableProps, {
+    ref: tableRef,
+    tabIndex: 0
+  }), rows.length ? rows.map(function (row, index) {
+    prepareRow(row, index);
+    return React__default.createElement(Row, Object.assign({}, rowProps, {
+      key: index,
+      index: index,
+      row: row,
+      instance: instance,
+      headerGroups: tableProps.headerGroups
+    }));
+  }) : emptyStateRenderer()), paginationElement);
+});
+
+Table.Column = function () {
+  return null;
+};
+
+Table.Group = function () {
+  return null;
+};
+
+export { Table };
+//# sourceMappingURL=Table.js.map

package/dist/esm/src/components/Table/components/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { TableProps, InternalTableRow, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { Pagination } from '../../Pagination/Pagination';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\n\nexport const Table = React.forwardRef(function Table<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const { emptyStateRenderer = DefaultEmptyState, ...otherProps } = props;\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { rowProps, tableProps, rows, prepareRow, pagination, instance } = useTable(otherProps, tableRef);\n\n    let paginationElement;\n\n    if (pagination) {\n        paginationElement = (\n            <Pagination\n                className=\"my-4 w-full\"\n                length={pagination.length}\n                pageIndex={pagination.pageIndex}\n                pageSize={pagination.pageSize}\n                setPageIndex={pagination.setPageIndex}\n                setPageSize={pagination.setPageSize}\n                showPageControls={pagination.length > pagination.pageSize}\n                dangerouslyHijackGlobalKeyboardNavigation={props.dangerouslyHijackGlobalKeyboardNavigation}\n            />\n        );\n    }\n\n    return (\n        <>\n            {paginationElement}\n            <BaseTable {...tableProps} ref={tableRef} tabIndex={0}>\n                {rows.length\n                    ? rows.map((row: InternalTableRow, index: number) => {\n                          prepareRow(row, index);\n                          return (\n                              <Row\n                                  {...rowProps}\n                                  key={index}\n                                  index={index}\n                                  row={row}\n                                  instance={instance}\n                                  headerGroups={tableProps.headerGroups}\n                              />\n                          );\n                      })\n                    : emptyStateRenderer()}\n            </BaseTable>\n            {paginationElement}\n        </>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nTable.Column = () => null;\nTable.Group = () => null;\n"],"names":["Table","React","forwardRef","props","ref","emptyStateRenderer","DefaultEmptyState","otherProps","tableRef","useProxiedRef","useTable","rowProps","tableProps","rows","prepareRow","pagination","instance","paginationElement","Pagination","className","length","pageIndex","pageSize","setPageIndex","setPageSize","showPageControls","dangerouslyHijackGlobalKeyboardNavigation","BaseTable","tabIndex","map","row","index","Row","key","headerGroups","Column","Group"],"mappings":";;;;;;;;;IASaA,KAAK,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,KAAT,CAClCG,KADkC,EAElCC,GAFkC;AAIlC,8BAAkED,KAAlE,CAAQE,kBAAR;AAAA,MAAQA,kBAAR,sCAA6BC,iBAA7B;AAAA,MAAmDC,UAAnD,iCAAkEJ,KAAlE;;AACA,MAAMK,QAAQ,GAAQC,aAAa,CAAiBL,GAAjB,CAAnC;;AACA,kBAAyEM,QAAQ,CAACH,UAAD,EAAaC,QAAb,CAAjF;AAAA,MAAQG,QAAR,aAAQA,QAAR;AAAA,MAAkBC,UAAlB,aAAkBA,UAAlB;AAAA,MAA8BC,IAA9B,aAA8BA,IAA9B;AAAA,MAAoCC,UAApC,aAAoCA,UAApC;AAAA,MAAgDC,UAAhD,aAAgDA,UAAhD;AAAA,MAA4DC,QAA5D,aAA4DA,QAA5D;;AAEA,MAAIC,iBAAJ;;AAEA,MAAIF,UAAJ,EAAgB;AACZE,IAAAA,iBAAiB,GACbhB,4BAAA,CAACiB,UAAD;AACIC,MAAAA,SAAS,EAAC;AACVC,MAAAA,MAAM,EAAEL,UAAU,CAACK;AACnBC,MAAAA,SAAS,EAAEN,UAAU,CAACM;AACtBC,MAAAA,QAAQ,EAAEP,UAAU,CAACO;AACrBC,MAAAA,YAAY,EAAER,UAAU,CAACQ;AACzBC,MAAAA,WAAW,EAAET,UAAU,CAACS;AACxBC,MAAAA,gBAAgB,EAAEV,UAAU,CAACK,MAAX,GAAoBL,UAAU,CAACO;AACjDI,MAAAA,yCAAyC,EAAEvB,KAAK,CAACuB;KARrD,CADJ;AAYH;;AAED,SACIzB,4BAAA,wBAAA,MAAA,EACKgB,iBADL,EAEIhB,4BAAA,CAAC0B,SAAD,oBAAef;AAAYR,IAAAA,GAAG,EAAEI;AAAUoB,IAAAA,QAAQ,EAAE;IAApD,EACKf,IAAI,CAACO,MAAL,GACKP,IAAI,CAACgB,GAAL,CAAS,UAACC,GAAD,EAAwBC,KAAxB;AACLjB,IAAAA,UAAU,CAACgB,GAAD,EAAMC,KAAN,CAAV;AACA,WACI9B,4BAAA,CAAC+B,GAAD,oBACQrB;AACJsB,MAAAA,GAAG,EAAEF;AACLA,MAAAA,KAAK,EAAEA;AACPD,MAAAA,GAAG,EAAEA;AACLd,MAAAA,QAAQ,EAAEA;AACVkB,MAAAA,YAAY,EAAEtB,UAAU,CAACsB;MAN7B,CADJ;AAUH,GAZD,CADL,GAcK7B,kBAAkB,EAf5B,CAFJ,EAmBKY,iBAnBL,CADJ;AAuBH,CAhDoB;;AAkDrBjB,KAAK,CAACmC,MAAN,GAAe;AAAA,SAAM,IAAN;AAAA,CAAf;;AACAnC,KAAK,CAACoC,KAAN,GAAc;AAAA,SAAM,IAAN;AAAA,CAAd;;;;"}

package/dist/esm/src/components/Table/components/WindowedTable.js

@@ -0,0 +1,203 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import cn from 'classnames';
+import { useLocalization } from '../../Provider/Provider.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
+import { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener.js';
+import { useTable } from '../hooks/useTable.js';
+import { Row } from '../util/renderRow.js';
+import { BaseTable, DefaultEmptyState } from './BaseTable.js';
+import { VariableSizeList, areEqual } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
+
+var _excluded = ["height"],
+    _excluded2 = ["emptyStateRenderer", "length", "loadMore"];
+var ROW_HEIGHT = 40;
+var VariableRow = /*#__PURE__*/React__default.memo(function (_ref) {
+  var data = _ref.data,
+      index = _ref.index,
+      _ref$style = _ref.style,
+      style = _objectWithoutPropertiesLoose(_ref$style, _excluded);
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var rows = data.rows,
+      setRowHeight = data.setRowHeight,
+      rowProps = data.rowProps,
+      tableProps = data.tableProps,
+      instance = data.instance,
+      prepareRow = data.prepareRow,
+      rowHeights = data.rowHeights;
+  var row = rows[index];
+  var ref = React__default.useRef(null);
+  React__default.useEffect(function () {
+    if (ref !== null && ref !== void 0 && ref.current) {
+      setRowHeight(index, ref.current.getBoundingClientRect().height);
+    }
+  }, [rowHeights[index]]);
+
+  if (row) {
+    prepareRow(row, index);
+    return React__default.createElement(Row, Object.assign({}, rowProps, {
+      style: style,
+      key: index,
+      index: index,
+      row: row,
+      instance: instance,
+      headerGroups: tableProps.headerGroups,
+      setRowHeight: setRowHeight,
+      ref: ref
+    }));
+  }
+
+  return React__default.createElement("div", {
+    className: "yt-table__row",
+    role: "row",
+    style: style
+  }, React__default.createElement("div", {
+    className: "yt-table__cell text-grey-dark"
+  }, texts.table.loading));
+}, areEqual);
+
+var getAverageRowHeight = function getAverageRowHeight(rowHeights) {
+  if (rowHeights === void 0) {
+    rowHeights = {};
+  }
+
+  var keys = Object.keys(rowHeights);
+  var estimatedHeight = keys.reduce(function (p, i) {
+    return p + rowHeights[i];
+  }, 0);
+  return estimatedHeight / keys.length;
+};
+
+var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTable(props, ref) {
+  var tableRef = useProxiedRef(ref);
+
+  var _props$emptyStateRend = props.emptyStateRenderer,
+      emptyStateRenderer = _props$emptyStateRend === void 0 ? DefaultEmptyState : _props$emptyStateRend,
+      length = props.length,
+      loadMore = props.loadMore,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  var _useTable = useTable(_extends({}, otherProps, {
+    windowed: true
+  }), tableRef),
+      rowProps = _useTable.rowProps,
+      tableProps = _useTable.tableProps,
+      rows = _useTable.rows,
+      prepareRow = _useTable.prepareRow,
+      instance = _useTable.instance,
+      state = _useTable.state; // determine heights for windowing calculations
+
+
+  var headerRef = React__default.useRef(null);
+  var rowsRef = React__default.useRef(null);
+  var tableDimensions = useBoundingClientRectListener(tableRef);
+  var headerDimensions = useBoundingClientRectListener(headerRef);
+  var height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null; // variable row height calculations
+
+  var estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;
+  var rowHeights = React__default.useRef({});
+  var setRowHeight = React__default.useCallback(function (index, size) {
+    if (rowHeights.current[index] !== size) {
+      var _extends2;
+
+      rowHeights.current = _extends({}, rowHeights.current, (_extends2 = {}, _extends2[index] = size, _extends2));
+
+      if (rowsRef.current) {
+        rowsRef.current.resetAfterIndex(0);
+      }
+    }
+  }, []);
+  var getRowHeight = React__default.useCallback(function (index) {
+    return rowHeights.current[index] || estimatedRowHeight;
+  }, []);
+  React__default.useEffect(function () {
+    if (rowsRef && rowsRef.current && rowProps.activeIndex !== undefined) {
+      rowsRef.current.scrollToItem(rowProps.activeIndex);
+    }
+  }, [rowProps.activeIndex]); // trigger recalculation of variable row heights if the data changes
+
+  React__default.useEffect(function () {
+    rowHeights.current = {};
+
+    if (rowsRef.current) {
+      rowsRef.current.resetAfterIndex(0);
+    }
+  }, [rows.length]);
+  var contentHeight = estimatedRowHeight * props.data.length || 0;
+  var isScrollbarVisible = height !== null ? contentHeight > height : false;
+  var className = cn(tableProps.className, 'yt-table--windowed', {
+    'table-with-scrollbar': isScrollbarVisible
+  });
+  var list;
+  var itemData = {
+    rows: rows,
+    setRowHeight: setRowHeight,
+    rowProps: rowProps,
+    tableProps: tableProps,
+    instance: instance,
+    prepareRow: prepareRow,
+    state: state,
+    rowHeights: rowHeights.current
+  };
+
+  if (height && rows.length) {
+    var listProps = {
+      height: height,
+      itemData: itemData,
+      estimatedItemSize: getAverageRowHeight(rowHeights.current),
+      itemSize: getRowHeight,
+      width: '100%'
+    };
+
+    if (loadMore && length) {
+      var isLoaded = function isLoaded(index) {
+        return !!rows[index];
+      };
+
+      list = React__default.createElement(InfiniteLoader, {
+        isItemLoaded: isLoaded,
+        itemCount: length,
+        loadMoreItems: loadMore
+      }, function (_ref2) {
+        var onItemsRendered = _ref2.onItemsRendered,
+            _ref3 = _ref2.ref;
+        return React__default.createElement(VariableSizeList, Object.assign({}, listProps, {
+          itemCount: length,
+          onItemsRendered: onItemsRendered,
+          ref: function ref(list) {
+            _ref3(list);
+
+            rowsRef.current = list;
+          }
+        }), VariableRow);
+      });
+    } else {
+      list = React__default.createElement(VariableSizeList, Object.assign({}, listProps, {
+        itemCount: rows.length,
+        ref: rowsRef
+      }), VariableRow);
+    }
+  }
+
+  return React__default.createElement(BaseTable, Object.assign({}, tableProps, {
+    className: className,
+    headerRef: headerRef,
+    tabIndex: 0,
+    ref: tableRef
+  }), list ? list : emptyStateRenderer());
+});
+
+WindowedTable.Column = function () {
+  return null;
+};
+
+WindowedTable.Group = function () {
+  return null;
+};
+
+export { WindowedTable };
+//# sourceMappingURL=WindowedTable.js.map

package/dist/esm/src/components/Table/components/WindowedTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowedTable.js","sources":["../../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n    const { texts } = useLocalization();\n    const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n    const row = rows[index];\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            setRowHeight(index, ref.current.getBoundingClientRect().height);\n        }\n    }, [rowHeights[index]]);\n\n    if (row) {\n        prepareRow(row, index);\n\n        return (\n            <Row\n                {...rowProps}\n                style={style}\n                key={index}\n                index={index}\n                row={row}\n                instance={instance}\n                headerGroups={tableProps.headerGroups}\n                setRowHeight={setRowHeight}\n                ref={ref}\n            />\n        );\n    }\n\n    return (\n        <div className=\"yt-table__row\" role=\"row\" style={style}>\n            <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n        </div>\n    );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n    const keys = Object.keys(rowHeights);\n    const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n    return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n    const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n    // determine heights for windowing calculations\n    const headerRef = React.useRef<HTMLDivElement>(null);\n    const rowsRef = React.useRef<any>(null);\n    const tableDimensions = useBoundingClientRectListener(tableRef);\n    const headerDimensions = useBoundingClientRectListener(headerRef);\n    const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n    // variable row height calculations\n    const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n    const rowHeights = React.useRef<Record<string, number>>({});\n    const setRowHeight = React.useCallback((index: number, size: number) => {\n        if (rowHeights.current[index] !== size) {\n            rowHeights.current = {\n                ...rowHeights.current,\n                [index]: size,\n            };\n\n            if (rowsRef.current) {\n                rowsRef.current.resetAfterIndex(0);\n            }\n        }\n    }, []);\n    const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n    React.useEffect(() => {\n        if (rowsRef && rowsRef.current && rowProps.activeIndex !== undefined) {\n            rowsRef.current.scrollToItem(rowProps.activeIndex);\n        }\n    }, [rowProps.activeIndex]);\n\n    // trigger recalculation of variable row heights if the data changes\n    React.useEffect(() => {\n        rowHeights.current = {};\n\n        if (rowsRef.current) {\n            rowsRef.current.resetAfterIndex(0);\n        }\n    }, [rows.length]);\n\n    const contentHeight = estimatedRowHeight * props.data.length || 0;\n    const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n    const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n    let list;\n\n    const itemData = {\n        rows,\n        setRowHeight,\n        rowProps,\n        tableProps,\n        instance,\n        prepareRow,\n        state,\n        rowHeights: rowHeights.current,\n    };\n\n    if (height && rows.length) {\n        const listProps = {\n            height,\n            itemData,\n            estimatedItemSize: getAverageRowHeight(rowHeights.current),\n            itemSize: getRowHeight,\n            width: '100%',\n        };\n\n        if (loadMore && length) {\n            const isLoaded = (index: number) => !!rows[index];\n\n            list = (\n                <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n                    {({ onItemsRendered, ref }: any) => (\n                        <VariableSizeList\n                            {...listProps}\n                            itemCount={length}\n                            onItemsRendered={onItemsRendered}\n                            ref={list => {\n                                ref(list);\n                                rowsRef.current = list;\n                            }}\n                        >\n                            {VariableRow}\n                        </VariableSizeList>\n                    )}\n                </InfiniteLoader>\n            );\n        } else {\n            list = (\n                <VariableSizeList {...listProps} itemCount={rows.length} ref={rowsRef}>\n                    {VariableRow}\n                </VariableSizeList>\n            );\n        }\n    }\n\n    return (\n        <BaseTable {...tableProps} className={className} headerRef={headerRef} tabIndex={0} ref={tableRef}>\n            {list ? list : emptyStateRenderer()}\n        </BaseTable>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","useLocalization","texts","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","height","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","useTable","windowed","state","headerRef","rowsRef","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","tabIndex","Column","Group"],"mappings":"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"}

package/dist/esm/src/components/Table/hooks/plugins/useRowActions.js

@@ -0,0 +1,255 @@
+import React__default from 'react';
+import { Group } from '../../../Group/Group.js';
+import { IconButton } from '../../../IconButton/IconButton.js';
+import keycode from 'keycode';
+import { Menu } from '../../../Menu/Menu.js';
+import { sanitizeRowProps } from '../../util.js';
+import { InView } from 'react-intersection-observer';
+
+var hasActions = function hasActions(inlineEditingUniqueId, handlers, actions) {
+  return !!actions || handlers.onRowCreate || handlers.onRowCopy || handlers.onRowDelete || !!inlineEditingUniqueId || handlers.onRowEdit;
+};
+
+var getActions = function getActions(actions, row) {
+  if (row === void 0) {
+    row = undefined;
+  }
+
+  var primary = [];
+  var secondary = [];
+
+  if (actions) {
+    var visibleActions = actions.filter(function (x) {
+      return !!x;
+    });
+
+    if (row) {
+      visibleActions = visibleActions.filter(function (action) {
+        if (action.visible !== undefined) {
+          if (typeof action.visible === 'function') {
+            return action.visible(row);
+          }
+
+          return action.visible;
+        }
+
+        return true;
+      });
+    }
+
+    visibleActions.forEach(function (action) {
+      if (action.showOnRow) {
+        primary.push(action);
+      } else {
+        secondary.push(action);
+      }
+    });
+  }
+
+  return [primary, secondary];
+};
+
+var getLength = function getLength(inlineEditingUniqueId, handlers, actions) {
+  var _getActions = getActions(actions),
+      primaryActions = _getActions[0],
+      secondaryActions = _getActions[1];
+
+  var length = primaryActions.length + (secondaryActions.length ? 1 : 0);
+
+  if (handlers.onRowCreate) {
+    length++;
+  }
+
+  if (handlers.onRowCopy) {
+    length++;
+  }
+
+  if (handlers.onRowDelete) {
+    length++;
+  }
+
+  if (!!inlineEditingUniqueId || handlers.onRowEdit) {
+    length++;
+
+    if (length < 2) {
+      length++;
+    }
+  }
+
+  return length;
+};
+
+var getActionProps = function getActionProps(action, row) {
+  return {
+    'aria-label': typeof action.tooltip === 'function' ? action.tooltip(row) : action.tooltip,
+    disabled: typeof action.disabled === 'function' ? action.disabled(row) : action.disabled,
+    onClick: function onClick(event) {
+      event.persist();
+      action.onClick(row, event);
+    }
+  };
+};
+
+var EditModeActions = function EditModeActions() {
+  React__default.useEffect(function () {
+    var listener = function listener(event) {
+      var _event$target, _event$target$form;
+
+      if (event.keyCode === keycode('escape') && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$form = _event$target.form) !== null && _event$target$form !== void 0 && _event$target$form.reset) {
+        event.preventDefault();
+        event.target.form.reset();
+      }
+    };
+
+    document.addEventListener('keydown', listener);
+    return function () {
+      document.removeEventListener('keydown', listener);
+    };
+  }, []);
+  return React__default.createElement(Group, null, React__default.createElement(IconButton, {
+    appearance: "primary",
+    icon: "tick",
+    type: "submit",
+    className: "mr-2"
+  }), React__default.createElement(IconButton, {
+    appearance: "ghost",
+    icon: "close",
+    type: "reset"
+  }));
+};
+
+var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, actions, rowExpansionRenderer, texts, windowed) {
+  if (windowed === void 0) {
+    windowed = false;
+  }
+
+  var inlineEditing = !!inlineEditingUniqueId;
+  var actionsLength = getLength(inlineEditingUniqueId, handlers, actions);
+
+  var plugin = function plugin(hooks) {
+    if (hasActions(inlineEditingUniqueId, handlers, actions)) {
+      hooks.visibleColumns.push(function (columns) {
+        return [].concat(columns, [{
+          id: '_actions',
+          className: 'yt-table__cell__actions',
+          flex: "0 0 calc((" + actionsLength + " * 2rem) + .5rem)",
+          Cell: function Cell(_ref) {
+            var row = _ref.row;
+
+            if (row.isEditing) {
+              return React__default.createElement(EditModeActions, null);
+            }
+
+            var sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);
+
+            var _getActions2 = getActions(actions, sanitizedRow),
+                primaryActions = _getActions2[0],
+                secondaryActions = _getActions2[1];
+
+            var output = React__default.createElement(React__default.Fragment, null, handlers.onRowCreate && React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "plus-circle",
+              "aria-label": texts.table.newSubRow,
+              tooltip: texts.table.newSubRow,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                event.persist();
+                row.setActive();
+
+                if (!row.isExpanded) {
+                  row.toggleRowExpanded();
+                }
+
+                handlers.onRowCreate(sanitizedRow, event);
+              }
+            }), (inlineEditing || handlers.onRowEdit) && React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "edit",
+              "aria-label": texts.table.edit,
+              tooltip: texts.table.edit,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                row.setActive();
+
+                if (inlineEditing) {
+                  row.toggleRowEditing();
+                } else if (handlers.onRowEdit) {
+                  event.persist();
+                  handlers.onRowEdit(sanitizedRow, event);
+                }
+              }
+            }), handlers.onRowCopy && React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "copy",
+              "aria-label": texts.table.copy,
+              tooltip: texts.table.copy,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                event.persist();
+                row.setActive();
+                handlers.onRowCopy(sanitizedRow, event);
+              }
+            }), handlers.onRowDelete && React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "delete",
+              "aria-label": texts.table.del,
+              tooltip: texts.table.del,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                event.persist();
+                row.setActive();
+                handlers.onRowDelete(sanitizedRow, event);
+              }
+            }), primaryActions.map(function (action, index) {
+              return React__default.createElement(IconButton, Object.assign({}, getActionProps(action, sanitizedRow), {
+                key: index,
+                appearance: "discrete",
+                icon: typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon,
+                tooltip: typeof action.tooltip === 'function' ? action.tooltip(sanitizedRow) : action.tooltip
+              }));
+            }), secondaryActions.length ? React__default.createElement(Menu, null, React__default.createElement(Menu.Trigger, null, React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "ellipsis-vertical",
+              "aria-label": texts.table.actions,
+              tooltip: texts.table.actions,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                row.setActive();
+              }
+            })), React__default.createElement(Menu.Content, null, secondaryActions.map(function (action, index) {
+              return React__default.createElement(Menu.Item, Object.assign({
+                key: index,
+                icon: typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon
+              }, getActionProps(action, sanitizedRow)), action.text);
+            }))) : null);
+
+            if (windowed) {
+              return React__default.createElement(Group, null, output);
+            }
+
+            return React__default.createElement(InView, {
+              rootMargin: "100px 0px"
+            }, function (_ref2) {
+              var inView = _ref2.inView,
+                  ref = _ref2.ref;
+              return React__default.createElement(Group, {
+                ref: ref
+              }, inView ? output : null);
+            });
+          }
+        }]);
+      });
+    }
+  };
+
+  plugin.pluginName = 'useRowActions';
+  return plugin;
+};
+
+export { useRowActions };
+//# sourceMappingURL=useRowActions.js.map