@economic/taco 1.0.5 → 1.0.6

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

@@ -0,0 +1,37 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { Root, Thumb } from '@radix-ui/react-switch';
+
+const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
+  const {
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  const className = cn('group h-5 w-9 flex rounded-full inline-flex', {
+    'mr-2': !!label,
+    'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
+    'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
+  }, props.className);
+  const element = createElement(Root, Object.assign({}, otherProps, {
+    className: className,
+    onCheckedChange: onChange,
+    ref: ref
+  }), createElement(Thumb, {
+    className: "'will-change-transform group-aria-checked:translate-x-[1.1rem] mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50"
+  }));
+
+  if (label) {
+    const labelClassName = cn('flex items-center cursor-pointer', {
+      'cursor-not-allowed text-grey-dark': props.disabled
+    });
+    return createElement("label", {
+      className: labelClassName
+    }, element, label);
+  }
+
+  return element;
+});
+
+export { Switch };
+//# sourceMappingURL=Switch.js.map

package/dist/esm/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';\r\nimport cn from 'classnames';\r\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\r\n\r\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n    /** Label for the switch */\r\n    label?: React.ReactNode;\r\n    /* Whether user input is required */\r\n    required?: boolean;\r\n};\r\n\r\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\r\n    checked?: never;\r\n    onChange?: never;\r\n    /* The default checked state (uncontrolled) */\r\n    defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledSwitchProps extends SwitchBaseProps {\r\n    defaultChecked?: never;\r\n    /* The current checked state (controlled) */\r\n    checked: boolean;\r\n    /* Handler called when the checked state changes */\r\n    onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\r\n\r\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const { label, onChange, ...otherProps } = props;\r\n\r\n    const className = cn(\r\n        'group h-5 w-9 flex rounded-full inline-flex',\r\n        {\r\n            'mr-2': !!label,\r\n            'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus':\r\n                !props.disabled,\r\n            'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    const element = (\r\n        <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\r\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform group-aria-checked:translate-x-[1.1rem] mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50\" />\r\n        </PrimitiveSwitch.Root>\r\n    );\r\n\r\n    if (label) {\r\n        const labelClassName = cn('flex items-center cursor-pointer', {\r\n            'cursor-not-allowed text-grey-dark': props.disabled,\r\n        });\r\n\r\n        return (\r\n            <label className={labelClassName}>\r\n                {element}\r\n                {label}\r\n            </label>\r\n        );\r\n    }\r\n\r\n    return element;\r\n});\r\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":";;;;MA4BaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;AACnC,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmB,OAAGC;AAAtB,MAAqCJ,KAA3C;AAEA,QAAMK,SAAS,GAAGC,EAAE,CAChB,6CADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,8GACI,CAACF,KAAK,CAACO,QAHf;AAII,mEAA+DP,KAAK,CAACO;AAJzE,GAFgB,EAQhBP,KAAK,CAACK,SARU,CAApB;AAWA,QAAMG,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,UAAMS,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,CAlCqB;;;;"}

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

@@ -0,0 +1,48 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
+import { Column } from '../util/renderColumn.js';
+
+const DefaultEmptyState = () => null;
+const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props, ref) {
+  const tableRef = useProxiedRef(ref);
+  const {
+    autoFocus,
+    children,
+    disableSorting: _,
+    headerGroups,
+    headerRef,
+    bodyRef,
+    ...otherProps
+  } = props;
+  React__default.useEffect(() => {
+    if (autoFocus && tableRef.current) {
+      tableRef.current.focus();
+    }
+  }, []);
+  const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', 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((headerGroup, index) => React__default.createElement("div", {
+    key: index,
+    role: "row",
+    className: "border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
+  }, headerGroup.headers.map((cell, index) => 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/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';\r\nimport cn from 'classnames';\r\nimport { HeaderGroup } from 'react-table';\r\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\r\nimport { InternalBaseTable } from '../types';\r\nimport './Table.css';\r\nimport { Column } from '../util/renderColumn';\r\n\r\nexport const DefaultEmptyState = (): React.ReactNode => null;\r\n\r\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\r\n    const tableRef = useProxiedRef<HTMLDivElement>(ref);\r\n    const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && tableRef.current) {\r\n            tableRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\r\n\r\n    return (\r\n        <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\r\n            <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\r\n                {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\r\n                    <div\r\n                        key={index}\r\n                        role=\"row\"\r\n                        className=\"border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold\"\r\n                    >\r\n                        {headerGroup.headers.map((cell: any, index: number) => (\r\n                            <Column key={index} index={index} cell={cell} />\r\n                        ))}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n\r\n            <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\r\n                {children}\r\n            </div>\r\n        </div>\r\n    );\r\n});\r\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useProxiedRef","autoFocus","children","disableSorting","_","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;MAQaA,iBAAiB,GAAG,MAAuB;MAE3CC,SAAS,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,SAAT,CAAmBG,KAAnB,EAA6CC,GAA7C;AACtC,QAAMC,QAAQ,GAAGC,aAAa,CAAiBF,GAAjB,CAA9B;AACA,QAAM;AAAEG,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuBC,IAAAA,cAAc,EAAEC,CAAvC;AAA0CC,IAAAA,YAA1C;AAAwDC,IAAAA,SAAxD;AAAmEC,IAAAA,OAAnE;AAA4E,OAAGC;AAA/E,MAA8FX,KAApG;AAEAF,EAAAA,cAAK,CAACc,SAAN,CAAgB;AACZ,QAAIR,SAAS,IAAIF,QAAQ,CAACW,OAA1B,EAAmC;AAC/BX,MAAAA,QAAQ,CAACW,OAAT,CAAiBC,KAAjB;AACH;AACJ,GAJD,EAIG,EAJH;AAMA,QAAMC,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DhB,KAAK,CAACe,SAAjE,CAApB;AAEA,SACIjB,4BAAA,MAAA,oBAASa;AAAYM,IAAAA,IAAI,EAAC;AAAQF,IAAAA,SAAS,EAAEA;AAAWd,IAAAA,GAAG,EAAEC;IAA7D,EACIJ,4BAAA,MAAA;AAAKmB,IAAAA,IAAI,EAAC;AAAWF,IAAAA,SAAS,EAAC;AAAiBd,IAAAA,GAAG,EAAEQ;GAArD,EACKD,YADL,aACKA,YADL,uBACKA,YAAY,CAAEU,GAAd,CAAkB,CAACC,WAAD,EAAmCC,KAAnC,KACftB,4BAAA,MAAA;AACIuB,IAAAA,GAAG,EAAED;AACLH,IAAAA,IAAI,EAAC;AACLF,IAAAA,SAAS,EAAC;GAHd,EAKKI,WAAW,CAACG,OAAZ,CAAoBJ,GAApB,CAAwB,CAACK,IAAD,EAAYH,KAAZ,KACrBtB,4BAAA,CAAC0B,MAAD;AAAQH,IAAAA,GAAG,EAAED;AAAOA,IAAAA,KAAK,EAAEA;AAAOG,IAAAA,IAAI,EAAEA;GAAxC,CADH,CALL,CADH,CADL,CADJ,EAeIzB,4BAAA,MAAA;AAAKmB,IAAAA,IAAI,EAAC;AAAWF,IAAAA,SAAS,EAAC;AAAiBd,IAAAA,GAAG,EAAES;GAArD,EACKL,QADL,CAfJ,CADJ;AAqBH,CAjCwB;;;;"}

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

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

package/dist/esm/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';\r\nimport { ForwardedGenericTableWithStatics, TableProps, TableRef } from '../types';\r\nimport { Table } from './Table';\r\n\r\nexport const PaginatedTable = React.forwardRef(function PaginatedTable<T>(props: TableProps<T>, ref: React.Ref<TableRef>) {\r\n    return <Table {...props} disablePagination={false} ref={ref} />;\r\n}) as ForwardedGenericTableWithStatics;\r\n\r\nPaginatedTable.Column = () => null;\r\nPaginatedTable.Group = () => null;\r\n"],"names":["PaginatedTable","React","forwardRef","props","ref","Table","disablePagination","Column","Group"],"mappings":";;;MAIaA,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,MAAM,IAA9B;;AACAP,cAAc,CAACQ,KAAf,GAAuB,MAAM,IAA7B;;;;"}

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

@@ -0,0 +1,56 @@
+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';
+
+const Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
+  const {
+    emptyStateRenderer = DefaultEmptyState,
+    ...otherProps
+  } = props;
+  const tableRef = useProxiedRef(ref);
+  const {
+    rowProps,
+    tableProps,
+    rows,
+    prepareRow,
+    pagination,
+    instance
+  } = useTable(otherProps, tableRef);
+  let 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
+  }), rows.length ? rows.map((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 = () => null;
+
+Table.Group = () => null;
+
+export { Table };
+//# sourceMappingURL=Table.js.map

package/dist/esm/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';\r\nimport { PluginHook } from 'react-table';\r\nimport { TableProps, InternalTableRow, ForwardedGenericTableWithStatics, TableRef } from '../types';\r\nimport { useTable } from '../hooks/useTable';\r\nimport { Pagination } from '../../Pagination/Pagination';\r\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\r\nimport { Row } from '../util/renderRow';\r\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\r\n\r\nexport const Table = React.forwardRef(function Table<T>(\r\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\r\n    ref: React.Ref<TableRef>\r\n) {\r\n    const { emptyStateRenderer = DefaultEmptyState, ...otherProps } = props;\r\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\r\n    const { rowProps, tableProps, rows, prepareRow, pagination, instance } = useTable(otherProps, tableRef);\r\n\r\n    let paginationElement;\r\n\r\n    if (pagination) {\r\n        paginationElement = (\r\n            <Pagination\r\n                className=\"my-4 w-full\"\r\n                length={pagination.length}\r\n                pageIndex={pagination.pageIndex}\r\n                pageSize={pagination.pageSize}\r\n                setPageIndex={pagination.setPageIndex}\r\n                setPageSize={pagination.setPageSize}\r\n                showPageControls={pagination.length > pagination.pageSize}\r\n                dangerouslyHijackGlobalKeyboardNavigation={props.dangerouslyHijackGlobalKeyboardNavigation}\r\n            />\r\n        );\r\n    }\r\n\r\n    return (\r\n        <>\r\n            {paginationElement}\r\n            <BaseTable {...tableProps} ref={tableRef}>\r\n                {rows.length\r\n                    ? rows.map((row: InternalTableRow, index: number) => {\r\n                          prepareRow(row, index);\r\n                          return (\r\n                              <Row\r\n                                  {...rowProps}\r\n                                  key={index}\r\n                                  index={index}\r\n                                  row={row}\r\n                                  instance={instance}\r\n                                  headerGroups={tableProps.headerGroups}\r\n                              />\r\n                          );\r\n                      })\r\n                    : emptyStateRenderer()}\r\n            </BaseTable>\r\n            {paginationElement}\r\n        </>\r\n    );\r\n}) as ForwardedGenericTableWithStatics;\r\n\r\nTable.Column = () => null;\r\nTable.Group = () => null;\r\n"],"names":["Table","React","forwardRef","props","ref","emptyStateRenderer","DefaultEmptyState","otherProps","tableRef","useProxiedRef","rowProps","tableProps","rows","prepareRow","pagination","instance","useTable","paginationElement","Pagination","className","length","pageIndex","pageSize","setPageIndex","setPageSize","showPageControls","dangerouslyHijackGlobalKeyboardNavigation","BaseTable","map","row","index","Row","key","headerGroups","Column","Group"],"mappings":";;;;;;;MASaA,KAAK,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,KAAT,CAClCG,KADkC,EAElCC,GAFkC;AAIlC,QAAM;AAAEC,IAAAA,kBAAkB,GAAGC,iBAAvB;AAA0C,OAAGC;AAA7C,MAA4DJ,KAAlE;AACA,QAAMK,QAAQ,GAAQC,aAAa,CAAiBL,GAAjB,CAAnC;AACA,QAAM;AAAEM,IAAAA,QAAF;AAAYC,IAAAA,UAAZ;AAAwBC,IAAAA,IAAxB;AAA8BC,IAAAA,UAA9B;AAA0CC,IAAAA,UAA1C;AAAsDC,IAAAA;AAAtD,MAAmEC,QAAQ,CAACT,UAAD,EAAaC,QAAb,CAAjF;AAEA,MAAIS,iBAAJ;;AAEA,MAAIH,UAAJ,EAAgB;AACZG,IAAAA,iBAAiB,GACbhB,4BAAA,CAACiB,UAAD;AACIC,MAAAA,SAAS,EAAC;AACVC,MAAAA,MAAM,EAAEN,UAAU,CAACM;AACnBC,MAAAA,SAAS,EAAEP,UAAU,CAACO;AACtBC,MAAAA,QAAQ,EAAER,UAAU,CAACQ;AACrBC,MAAAA,YAAY,EAAET,UAAU,CAACS;AACzBC,MAAAA,WAAW,EAAEV,UAAU,CAACU;AACxBC,MAAAA,gBAAgB,EAAEX,UAAU,CAACM,MAAX,GAAoBN,UAAU,CAACQ;AACjDI,MAAAA,yCAAyC,EAAEvB,KAAK,CAACuB;KARrD,CADJ;AAYH;;AAED,SACIzB,4BAAA,wBAAA,MAAA,EACKgB,iBADL,EAEIhB,4BAAA,CAAC0B,SAAD,oBAAehB;AAAYP,IAAAA,GAAG,EAAEI;IAAhC,EACKI,IAAI,CAACQ,MAAL,GACKR,IAAI,CAACgB,GAAL,CAAS,CAACC,GAAD,EAAwBC,KAAxB;AACLjB,IAAAA,UAAU,CAACgB,GAAD,EAAMC,KAAN,CAAV;AACA,WACI7B,4BAAA,CAAC8B,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,GAcK5B,kBAAkB,EAf5B,CAFJ,EAmBKY,iBAnBL,CADJ;AAuBH,CAhDoB;;AAkDrBjB,KAAK,CAACkC,MAAN,GAAe,MAAM,IAArB;;AACAlC,KAAK,CAACmC,KAAN,GAAc,MAAM,IAApB;;;;"}

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

@@ -0,0 +1,186 @@
+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';
+
+const ROW_HEIGHT = 40;
+const VariableRow = /*#__PURE__*/React__default.memo(({
+  data,
+  index,
+  style: {
+    height: _,
+    ...style
+  }
+}) => {
+  const {
+    texts
+  } = useLocalization();
+  const {
+    rows,
+    setRowHeight,
+    rowProps,
+    tableProps,
+    instance,
+    prepareRow,
+    rowHeights
+  } = data;
+  const row = rows[index];
+  const ref = React__default.useRef(null);
+  React__default.useEffect(() => {
+    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);
+
+const getAverageRowHeight = (rowHeights = {}) => {
+  const keys = Object.keys(rowHeights);
+  const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);
+  return estimatedHeight / keys.length;
+};
+
+const WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTable(props, ref) {
+  const tableRef = useProxiedRef(ref);
+  const {
+    emptyStateRenderer = DefaultEmptyState,
+    length,
+    loadMore,
+    ...otherProps
+  } = props;
+  const {
+    rowProps,
+    tableProps,
+    rows,
+    prepareRow,
+    instance,
+    state
+  } = useTable({ ...otherProps,
+    windowed: true
+  }, tableRef); // determine heights for windowing calculations
+
+  const headerRef = React__default.useRef(null);
+  const rowsRef = React__default.useRef(null);
+  const tableDimensions = useBoundingClientRectListener(tableRef);
+  const headerDimensions = useBoundingClientRectListener(headerRef);
+  const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null; // variable row height calculations
+
+  const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;
+  const rowHeights = React__default.useRef({});
+  const setRowHeight = React__default.useCallback((index, size) => {
+    if (rowHeights.current[index] !== size) {
+      rowHeights.current = { ...rowHeights.current,
+        [index]: size
+      };
+
+      if (rowsRef.current) {
+        rowsRef.current.resetAfterIndex(0);
+      }
+    }
+  }, []);
+  const getRowHeight = React__default.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);
+  React__default.useEffect(() => {
+    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(() => {
+    rowHeights.current = {};
+
+    if (rowsRef.current) {
+      rowsRef.current.resetAfterIndex(0);
+    }
+  }, [rows.length]);
+  const contentHeight = estimatedRowHeight * props.data.length || 0;
+  const isScrollbarVisible = height !== null ? contentHeight > height : false;
+  const className = cn(tableProps.className, 'yt-table--windowed', {
+    'table-with-scrollbar': isScrollbarVisible
+  });
+  let list;
+  const itemData = {
+    rows,
+    setRowHeight,
+    rowProps,
+    tableProps,
+    instance,
+    prepareRow,
+    state,
+    rowHeights: rowHeights.current
+  };
+
+  if (height && rows.length) {
+    const listProps = {
+      height,
+      itemData,
+      estimatedItemSize: getAverageRowHeight(rowHeights.current),
+      itemSize: getRowHeight,
+      width: '100%'
+    };
+
+    if (loadMore && length) {
+      const isLoaded = index => !!rows[index];
+
+      list = React__default.createElement(InfiniteLoader, {
+        isItemLoaded: isLoaded,
+        itemCount: length,
+        loadMoreItems: loadMore
+      }, ({
+        onItemsRendered,
+        ref
+      }) => React__default.createElement(VariableSizeList, Object.assign({}, listProps, {
+        itemCount: length,
+        onItemsRendered: onItemsRendered,
+        ref: list => {
+          ref(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,
+    ref: tableRef
+  }), list ? list : emptyStateRenderer());
+});
+
+WindowedTable.Column = () => null;
+
+WindowedTable.Group = () => null;
+
+export { WindowedTable };
+//# sourceMappingURL=WindowedTable.js.map

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

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

@@ -0,0 +1,236 @@
+import React__default from 'react';
+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';
+
+const actionGroupClassName = '-mt-1 -mb-1 h-8 flex';
+
+const hasActions = (inlineEditingUniqueId, handlers, actions) => {
+  return !!actions || handlers.onRowCreate || handlers.onRowCopy || handlers.onRowDelete || !!inlineEditingUniqueId || handlers.onRowEdit;
+};
+
+const getActions = (actions, row = undefined) => {
+  const primary = [];
+  const secondary = [];
+
+  if (actions) {
+    let visibleActions = actions.filter(x => !!x);
+
+    if (row) {
+      visibleActions = visibleActions.filter(action => {
+        if (action.visible !== undefined) {
+          if (typeof action.visible === 'function') {
+            return action.visible(row);
+          }
+
+          return action.visible;
+        }
+
+        return true;
+      });
+    }
+
+    visibleActions.forEach(action => {
+      if (action.showOnRow) {
+        primary.push(action);
+      } else {
+        secondary.push(action);
+      }
+    });
+  }
+
+  return [primary, secondary];
+};
+
+const getLength = (inlineEditingUniqueId, handlers, actions) => {
+  const [primaryActions, secondaryActions] = getActions(actions);
+  let 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;
+};
+
+const 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: event => {
+      action.onClick(row, event);
+    }
+  };
+};
+
+const EditModeActions = () => {
+  React__default.useEffect(() => {
+    const 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 () => {
+      document.removeEventListener('keydown', listener);
+    };
+  }, []);
+  return React__default.createElement("div", {
+    className: actionGroupClassName
+  }, React__default.createElement(IconButton, {
+    appearance: "primary",
+    icon: "tick",
+    type: "submit",
+    className: "mr-2"
+  }), React__default.createElement(IconButton, {
+    appearance: "ghost",
+    icon: "close",
+    type: "reset"
+  }));
+};
+
+const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRenderer, texts, windowed = false) => {
+  const inlineEditing = !!inlineEditingUniqueId;
+  const actionsLength = getLength(inlineEditingUniqueId, handlers, actions);
+
+  const plugin = hooks => {
+    if (hasActions(inlineEditingUniqueId, handlers, actions)) {
+      hooks.visibleColumns.push(columns => [...columns, {
+        id: '_actions',
+        className: 'flex justify-end px-1 overflow-visible',
+        flex: `0 0 calc((${actionsLength} * 2rem) + .5rem)`,
+        Cell: ({
+          row
+        }) => {
+          if (row.isEditing) {
+            return React__default.createElement(EditModeActions, null);
+          }
+
+          const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);
+          const [primaryActions, secondaryActions] = getActions(actions, sanitizedRow);
+          const output = React__default.createElement(React__default.Fragment, null, handlers.onRowCreate && React__default.createElement(IconButton, {
+            appearance: "discrete",
+            icon: "circle-plus",
+            "aria-label": texts.table.newSubRow,
+            tooltip: texts.table.newSubRow,
+            disabled: inlineEditing && !row.canEdit,
+            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: 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: 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: event => {
+              event.stopPropagation();
+              event.persist();
+              row.setActive();
+              handlers.onRowDelete(sanitizedRow, event);
+            }
+          }), primaryActions.map((action, index) => 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: event => {
+              event.stopPropagation();
+              row.setActive();
+            }
+          })), React__default.createElement(Menu.Content, null, secondaryActions.map((action, index) => React__default.createElement(Menu.Item, Object.assign({
+            key: index,
+            icon: typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon
+          }, getActionProps(action, sanitizedRow)), typeof action.text === 'function' ? action.text(sanitizedRow) : action.text)))) : null);
+
+          if (windowed) {
+            return React__default.createElement("div", {
+              className: actionGroupClassName
+            }, output);
+          }
+
+          return React__default.createElement(InView, {
+            rootMargin: "100px 0px"
+          }, ({
+            inView,
+            ref
+          }) => React__default.createElement("div", {
+            className: actionGroupClassName,
+            ref: ref
+          }, inView ? output : null));
+        }
+      }]);
+    }
+  };
+
+  plugin.pluginName = 'useRowActions';
+  return plugin;
+};
+
+export { useRowActions };
+//# sourceMappingURL=useRowActions.js.map