@google-psat/design-system 0.9.0-1

package/dist/components/table/components/index.jsx

@@ -0,0 +1,118 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importStar(require("react"));
+const re_resizable_1 = require("re-resizable");
+/**
+ * Internal dependencies.
+ */
+const tableHeader_1 = __importDefault(require("./tableHeader"));
+const tableBody_1 = __importDefault(require("./tableBody"));
+const columnMenu_1 = __importDefault(require("./columnMenu"));
+const useTable_1 = require("../useTable");
+const tableTopBar_1 = __importDefault(require("./tableTopBar"));
+const chips_1 = __importDefault(require("./filtersSidebar/chips"));
+const filtersSidebar_1 = __importDefault(require("./filtersSidebar"));
+const Table = ({ selectedKey, isFiltersSidebarOpen = false, hideFiltering = false, extraInterfaceToTopBar, }) => {
+    const { tableContainerRef } = (0, useTable_1.useTable)(({ state }) => ({
+        tableContainerRef: state.tableContainerRef,
+    }));
+    const [showColumnsMenu, setShowColumnsMenu] = (0, react_1.useState)(false);
+    const [showFilterSidebar, setShowFilterSidebar] = (0, react_1.useState)(isFiltersSidebarOpen);
+    const [columnPosition, setColumnPosition] = (0, react_1.useState)({
+        x: 0,
+        y: 0,
+    });
+    const [isRowFocused, setIsRowFocused] = (0, react_1.useState)(false);
+    const tableRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const handleClickOutside = (event) => {
+            if (tableRef.current &&
+                !tableRef.current.contains(event.target)) {
+                setIsRowFocused(true);
+            }
+        };
+        (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.addEventListener('click', handleClickOutside, true);
+        return () => {
+            var _a;
+            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', handleClickOutside, true);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (selectedKey === undefined) {
+            setIsRowFocused(false);
+        }
+        else {
+            setIsRowFocused(true);
+        }
+    }, [selectedKey]);
+    const handleRightClick = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        document.body.style.overflow = showColumnsMenu ? 'auto' : 'hidden';
+        setShowColumnsMenu(!showColumnsMenu);
+    }, [showColumnsMenu]);
+    return (<div className="w-full h-full flex flex-col">
+      <tableTopBar_1.default showFilterSidebar={showFilterSidebar} hideFiltering={hideFiltering} setShowFilterSidebar={setShowFilterSidebar} extraInterface={extraInterfaceToTopBar}/>
+      <chips_1.default />
+      <div className="w-full flex-1 overflow-hidden h-full flex divide-x divide-american-silver dark:divide-quartz">
+        {showFilterSidebar && (<re_resizable_1.Resizable minWidth="100px" maxWidth="50%" enable={{
+                right: true,
+            }}>
+            <filtersSidebar_1.default />
+          </re_resizable_1.Resizable>)}
+        <div ref={tableContainerRef} className="relative h-full w-full overflow-auto">
+          <columnMenu_1.default open={showColumnsMenu} onClose={setShowColumnsMenu} position={columnPosition}/>
+          <div className="h-full w-full overflow-hidden min-w-[70rem] flex flex-col" ref={tableRef}>
+            <tableHeader_1.default setColumnPosition={setColumnPosition} onRightClick={handleRightClick} setIsRowFocused={setIsRowFocused}/>
+            <tableBody_1.default isRowFocused={isRowFocused} setIsRowFocused={setIsRowFocused} selectedKey={selectedKey}/>
+          </div>
+        </div>
+      </div>
+    </div>);
+};
+exports.default = Table;
+//# sourceMappingURL=index.jsx.map

package/dist/components/table/components/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../../src/components/table/components/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/table/components/tableBody/bodyCell.jsx

@@ -0,0 +1,54 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const BodyCell = ({ cell, width, isRowFocused, row, hasIcon = false, showIcon = false, icon, isHighlighted = false, }) => {
+    var _a;
+    const IconElement = icon === null || icon === void 0 ? void 0 : icon.Element;
+    const cellValue = (_a = cell === null || cell === void 0 ? void 0 : cell()) !== null && _a !== void 0 ? _a : '';
+    return (<div tabIndex={0} style={{ minWidth: width }} onDoubleClick={(e) => {
+            var _a, _b;
+            const target = e.target;
+            const range = new Range();
+            range.selectNodeContents(target);
+            (_a = document.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+            (_b = document.getSelection()) === null || _b === void 0 ? void 0 : _b.addRange(range);
+        }} onKeyDown={(e) => {
+            if (['Meta', 'Control', 'c'].includes(e.key)) {
+                e.stopPropagation();
+            }
+        }} className={`flex box-border outline-0 px-1 py-px h-5 text-xs ${isHighlighted
+            ? `${isRowFocused ? 'text-white' : 'dark:text-dirty-red text-dirty-red'}`
+            : 'dark:text-bright-gray'} cursor-default flex-1`}>
+      {hasIcon && (<div className="h-full grid place-items-center min-w-[15px] pr-1">
+          {Boolean(showIcon) && IconElement && (<IconElement {...{
+                originalData: row.originalData,
+            }}/>)}
+        </div>)}
+      <div className="truncate" title={typeof cellValue === 'string' ? cellValue : ''}>
+        {cellValue}
+      </div>
+    </div>);
+};
+exports.default = BodyCell;
+//# sourceMappingURL=bodyCell.jsx.map

package/dist/components/table/components/tableBody/bodyCell.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"bodyCell.jsx","sourceRoot":"","sources":["../../../../../src/components/table/components/tableBody/bodyCell.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;AAEH;;GAEG;AACH,kDAA0B;AAqB1B,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,GAAG,EACH,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,aAAa,GAAG,KAAK,GACP,EAAE,EAAE;;IAClB,MAAM,WAAW,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAC;IAClC,MAAM,SAAS,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,EAAI,mCAAI,EAAE,CAAC;IAEjC,OAAO,CACL,CAAC,GAAG,CACF,QAAQ,CAAC,CAAC,CAAC,CAAC,CACZ,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAC3B,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;;YACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;YACvC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;YAC1B,KAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;YAEjC,MAAA,QAAQ,CAAC,YAAY,EAAE,0CAAE,eAAe,EAAE,CAAC;YAC3C,MAAA,QAAQ,CAAC,YAAY,EAAE,0CAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC,CAAC,CACF,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC7C,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CACF,SAAS,CAAC,CAAC,oDACT,aAAa;YACX,CAAC,CAAC,GACE,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,oCAChC,EAAE;YACJ,CAAC,CAAC,uBACN,wBAAwB,CAAC,CAEzB;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,GAAG,CAAC,SAAS,CAAC,kDAAkD,CAC/D;UAAA,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,WAAW,IAAI,CACnC,CAAC,WAAW,CACV,IAAI;gBACF,YAAY,EAAE,GAAG,CAAC,YAAY;aAC/B,CAAC,EACF,CACH,CACH;QAAA,EAAE,GAAG,CAAC,CACP,CACD;MAAA,CAAC,GAAG,CACF,SAAS,CAAC,UAAU,CACpB,KAAK,CAAC,CAAC,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAEtD;QAAA,CAAC,SAAS,CACZ;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/dist/components/table/components/tableBody/bodyRow.jsx

@@ -0,0 +1,64 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * Internal dependencies.
+ */
+const bodyCell_1 = __importDefault(require("./bodyCell"));
+const BodyRow = ({ row, columns, index, selectedKey, isRowFocused, getExtraClasses, hasVerticalBar, getRowObjectKey, onRowClick, onKeyDown, onRowContextMenu, }) => {
+    var _a;
+    const rowKey = getRowObjectKey(row);
+    const isHighlighted = (_a = row.originalData) === null || _a === void 0 ? void 0 : _a.highlighted;
+    const classes = (0, classnames_1.default)(rowKey !== selectedKey &&
+        (index % 2
+            ? isHighlighted
+                ? 'bg-dirty-pink'
+                : 'bg-anti-flash-white dark:bg-charleston-green'
+            : isHighlighted
+                ? 'bg-dirty-pink text-dirty-red dark:text-dirty-red text-dirty-red'
+                : 'bg-white dark:bg-raisin-black'), rowKey === selectedKey &&
+        (isRowFocused
+            ? isHighlighted
+                ? 'bg-dirty-red'
+                : 'bg-gainsboro dark:bg-outer-space'
+            : isHighlighted
+                ? 'bg-dirty-pink text-dirty-red'
+                : 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'));
+    const extraClasses = getExtraClasses();
+    return (<div id={index.toString()} className={(0, classnames_1.default)('outline-0 flex divide-x divide-american-silver dark:divide-quartz relative', {
+            [classes]: extraClasses.length === 0,
+        }, {
+            [extraClasses]: extraClasses.length > 0,
+        })} onClick={onRowClick} onKeyDown={(e) => onKeyDown(e, index)} onContextMenu={(e) => onRowContextMenu(e, row)} data-testid="body-row">
+      {/* Vertical bar for for some indication, styles can also be made dynamic.*/}
+      {hasVerticalBar && (<span className="absolute block top-0 bottom-0 left-0 border-l-2 border-emerald-600 dark:border-leaf-green-dark"/>)}
+      {columns.map(({ accessorKey, width, enableBodyCellPrefixIcon, showBodyCellPrefixIcon, bodyCellPrefixIcon, }, idx) => {
+            var _a;
+            return (<bodyCell_1.default key={idx} onRowClick={onRowClick} cell={(_a = row[accessorKey]) === null || _a === void 0 ? void 0 : _a.value} width={width || 0} isHighlighted={isHighlighted} isRowFocused={rowKey === selectedKey} row={row} hasIcon={enableBodyCellPrefixIcon} showIcon={showBodyCellPrefixIcon ? showBodyCellPrefixIcon(row) : false} icon={bodyCellPrefixIcon !== null && bodyCellPrefixIcon !== void 0 ? bodyCellPrefixIcon : undefined}/>);
+        })}
+    </div>);
+};
+exports.default = BodyRow;
+//# sourceMappingURL=bodyRow.jsx.map

package/dist/components/table/components/tableBody/bodyRow.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"bodyRow.jsx","sourceRoot":"","sources":["../../../../../src/components/table/components/tableBody/bodyRow.tsx"],"names":[],"mappings":"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"}

package/dist/components/table/components/tableBody/index.jsx

@@ -0,0 +1,148 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * Internal dependencies.
+ */
+const bodyRow_1 = __importDefault(require("./bodyRow"));
+const useTable_1 = require("../../useTable");
+const TableBody = ({ isRowFocused, setIsRowFocused, selectedKey, }) => {
+    const { rows, columns, onRowClick, onRowContextMenu, getRowObjectKey, conditionalTableRowClassesHandler, hasVerticalBar, } = (0, useTable_1.useTable)(({ state, actions }) => ({
+        rows: state.rows,
+        columns: state.columns,
+        onRowClick: actions.onRowClick,
+        onRowContextMenu: actions.onRowContextMenu,
+        getRowObjectKey: actions.getRowObjectKey,
+        conditionalTableRowClassesHandler: actions.conditionalTableRowClassesHandler,
+        hasVerticalBar: actions.hasVerticalBar,
+    }));
+    const tableBodyRef = (0, react_1.useRef)(null);
+    const handleKeyDown = (0, react_1.useCallback)((event, index) => {
+        var _a;
+        event.preventDefault();
+        //@ts-ignore - the `children` property will be available on the `current` property.
+        const currentRow = (_a = tableBodyRef.current) === null || _a === void 0 ? void 0 : _a.children.namedItem(index);
+        let newRowId;
+        let rowElement = null;
+        if (event.key === 'ArrowUp') {
+            rowElement = currentRow === null || currentRow === void 0 ? void 0 : currentRow.previousElementSibling;
+            newRowId = rowElement === null || rowElement === void 0 ? void 0 : rowElement.id;
+        }
+        else if (event.key === 'ArrowDown') {
+            rowElement = currentRow === null || currentRow === void 0 ? void 0 : currentRow.nextElementSibling;
+            newRowId = rowElement === null || rowElement === void 0 ? void 0 : rowElement.id;
+        }
+        if (!rowElement) {
+            return;
+        }
+        rowElement.tabIndex = -1;
+        rowElement.focus();
+        if (!newRowId) {
+            onRowClick(null);
+            return;
+        }
+        const newRow = rows.find((_, idx) => idx.toString() === newRowId);
+        if (newRow) {
+            onRowClick(newRow === null || newRow === void 0 ? void 0 : newRow.originalData);
+        }
+    }, [onRowClick, rows]);
+    const handleEmptyRowKeyDown = (0, react_1.useCallback)((event) => {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        const rowsLength = rows.length;
+        if (event.key === 'ArrowDown' || !rowsLength) {
+            return;
+        }
+        const newRow = rows[rowsLength - 1];
+        // @ts-ignore - the `children` property will be available on the `current` property.
+        const rowElement = (_a = tableBodyRef.current) === null || _a === void 0 ? void 0 : _a.children.namedItem(rowsLength - 1);
+        if (!rowElement) {
+            return;
+        }
+        rowElement.tabIndex = -1;
+        rowElement.focus();
+        onRowClick(newRow === null || newRow === void 0 ? void 0 : newRow.originalData);
+    }, [onRowClick, rows]);
+    const tableRowClassName = (0, classnames_1.default)('h-5 outline-0 flex divide-x divide-american-silver dark:divide-quartz', selectedKey === null &&
+        (isRowFocused
+            ? 'bg-gainsboro dark:bg-outer-space'
+            : 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'), selectedKey !== null &&
+        (rows.length % 2
+            ? 'bg-anti-flash-white dark:bg-charleston-green'
+            : 'bg-white dark:bg-raisin-black'));
+    return (<div ref={tableBodyRef} className="h-full flex flex-col overflow-x-hidden overflow-y-auto">
+      {rows.map((row, index) => {
+            var _a;
+            return (<bodyRow_1.default key={index} index={index} row={row} columns={columns} selectedKey={selectedKey} isRowFocused={isRowFocused} getExtraClasses={() => {
+                    var _a;
+                    return ((_a = conditionalTableRowClassesHandler === null || conditionalTableRowClassesHandler === void 0 ? void 0 : conditionalTableRowClassesHandler(row, isRowFocused, index)) !== null && _a !== void 0 ? _a : '');
+                }} hasVerticalBar={(_a = hasVerticalBar === null || hasVerticalBar === void 0 ? void 0 : hasVerticalBar(row)) !== null && _a !== void 0 ? _a : false} getRowObjectKey={getRowObjectKey} onRowClick={() => {
+                    onRowClick(row === null || row === void 0 ? void 0 : row.originalData);
+                    setIsRowFocused(true);
+                }} onKeyDown={handleKeyDown} onRowContextMenu={onRowContextMenu}/>);
+        })}
+      <div className={tableRowClassName} data-testid="empty-row" tabIndex={0} onClick={() => {
+            onRowClick(null);
+            setIsRowFocused(true);
+        }} onKeyDown={handleEmptyRowKeyDown}>
+        {columns.map(({ width }, index) => (<div key={index} className="px-1 py-px outline-0 flex-1" style={{
+                minWidth: width,
+            }}/>))}
+      </div>
+      <div className="grow outline-0 flex divide-x divide-american-silver dark:divide-quartz" onClick={() => {
+            setIsRowFocused(false);
+        }}>
+        {columns.map(({ width }, index) => (<div key={index} className="px-1 py-px outline-0 h-full flex-1" style={{
+                minWidth: width,
+            }}/>))}
+      </div>
+    </div>);
+};
+exports.default = TableBody;
+//# sourceMappingURL=index.jsx.map

package/dist/components/table/components/tableBody/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../../../src/components/table/components/tableBody/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/table/components/tableHeader/headerCell.jsx

@@ -0,0 +1,83 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importStar(require("react"));
+/**
+ * Internal dependencies.
+ */
+const headerResizer_1 = __importDefault(require("./headerResizer"));
+const useTable_1 = require("../../useTable");
+const icons_1 = require("../../../../icons");
+const HeaderCell = ({ index, cell, setIsRowFocused }) => {
+    const { sortKey, sortOrder, isResizing, setSortKey, onMouseDown } = (0, useTable_1.useTable)(({ state, actions }) => ({
+        sortKey: state.sortKey,
+        sortOrder: state.sortOrder,
+        isResizing: state.isResizing,
+        setSortKey: actions.setSortKey,
+        onMouseDown: actions.onMouseDown,
+    }));
+    const handleOnClick = (0, react_1.useCallback)(() => {
+        setSortKey(cell.accessorKey);
+    }, [cell.accessorKey, setSortKey]);
+    const columnRef = (0, react_1.useRef)(null);
+    return (<div ref={columnRef} style={{ minWidth: cell.width }} onClick={isResizing ? undefined : handleOnClick} className={`relative select-none touch-none font-normal truncate flex-1 ${!isResizing && 'hover:bg-gainsboro dark:hover:bg-outer-space'}`} data-testid="header-cell">
+      <div className="w-full h-full flex items-center justify-between text-cool-grey dark:text-bright-gray" onClick={() => setIsRowFocused(false)} title={cell.header}>
+        <p className="px-1 py-px truncate text-xs">{cell.header}</p>
+        <p className="mr-2 scale-125">
+          {sortKey === cell.accessorKey &&
+            {
+                asc: <icons_1.ArrowDown className="transform rotate-180"/>,
+                desc: <icons_1.ArrowDown />,
+            }[sortOrder]}
+        </p>
+      </div>
+      <headerResizer_1.default onMouseDown={() => {
+            onMouseDown(columnRef, index);
+        }}/>
+    </div>);
+};
+exports.default = HeaderCell;
+//# sourceMappingURL=headerCell.jsx.map

package/dist/components/table/components/tableHeader/headerCell.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerCell.jsx","sourceRoot":"","sources":["../../../../../src/components/table/components/tableHeader/headerCell.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH;;GAEG;AACH,+CAAmD;AACnD;;GAEG;AACH,oEAA4C;AAC5C,6CAA4D;AAC5D,6CAA8C;AAQ9C,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAmB,EAAE,EAAE;IACvE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAA,mBAAQ,EAC1E,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QACvB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,WAAW,EAAE,OAAO,CAAC,WAAW;KACjC,CAAC,CACH,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACrC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,MAAM,SAAS,GAAG,IAAA,cAAM,EAA6B,IAAI,CAAC,CAAC;IAE3D,OAAO,CACL,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAChC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAChD,SAAS,CAAC,CAAC,+DACT,CAAC,UAAU,IAAI,8CACjB,EAAE,CAAC,CACH,WAAW,CAAC,aAAa,CAEzB;MAAA,CAAC,GAAG,CACF,SAAS,CAAC,sFAAsF,CAChG,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CACtC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAEnB;QAAA,CAAC,CAAC,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAC3D;QAAA,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB,CAC3B;UAAA,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW;YAC3B;gBACE,GAAG,EAAE,CAAC,iBAAS,CAAC,SAAS,CAAC,sBAAsB,EAAG;gBACnD,IAAI,EAAE,CAAC,iBAAS,CAAC,AAAD,EAAG;aACpB,CAAC,SAAS,CAAC,CAChB;QAAA,EAAE,CAAC,CACL;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,uBAAa,CACZ,WAAW,CAAC,CAAC,GAAG,EAAE;YAChB,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC,EAEN;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/dist/components/table/components/tableHeader/headerResizer.jsx

@@ -0,0 +1,31 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const HeaderResizer = ({ onMouseDown }) => {
+    return (<div onMouseDown={onMouseDown} onClick={(e) => {
+            e.stopPropagation();
+        }} className="cursor-col-resize absolute right-0 top-0 w-2 h-full active:bg-slate-200 dark:active:bg-slate-800"/>);
+};
+exports.default = HeaderResizer;
+//# sourceMappingURL=headerResizer.jsx.map

package/dist/components/table/components/tableHeader/headerResizer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerResizer.jsx","sourceRoot":"","sources":["../../../../../src/components/table/components/tableHeader/headerResizer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;AAEH;;GAEG;AACH,kDAA0B;AAM1B,MAAM,aAAa,GAAG,CAAC,EAAE,WAAW,EAAsB,EAAE,EAAE;IAC5D,OAAO,CACL,CAAC,GAAG,CACF,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC,CACF,SAAS,CAAC,kGAAkG,EAC5G,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}

package/dist/components/table/components/tableHeader/headerRow.jsx

@@ -0,0 +1,39 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+/**
+ * Internal dependencies.
+ */
+const headerCell_1 = __importDefault(require("./headerCell"));
+const useTable_1 = require("../../useTable");
+const HeaderRow = ({ setIsRowFocused }) => {
+    const { columns } = (0, useTable_1.useTable)(({ state }) => ({
+        columns: state.columns,
+    }));
+    return (<div className="bg-anti-flash-white dark:bg-charleston-green border-b border-american-silver dark:border-quartz divide-x divide-american-silver dark:divide-quartz flex">
+      {columns === null || columns === void 0 ? void 0 : columns.map((cell, idx) => (<headerCell_1.default key={idx} index={idx} cell={cell} setIsRowFocused={setIsRowFocused}/>))}
+    </div>);
+};
+exports.default = HeaderRow;
+//# sourceMappingURL=headerRow.jsx.map

package/dist/components/table/components/tableHeader/headerRow.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerRow.jsx","sourceRoot":"","sources":["../../../../../src/components/table/components/tableHeader/headerRow.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;AAEH;;GAEG;AACH,kDAA0B;AAC1B;;GAEG;AACH,8DAAsC;AACtC,6CAA0C;AAM1C,MAAM,SAAS,GAAG,CAAC,EAAE,eAAe,EAAkB,EAAE,EAAE;IACxD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,mBAAQ,EAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3C,OAAO,EAAE,KAAK,CAAC,OAAO;KACvB,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,yJAAyJ,CACtK;MAAA,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3B,CAAC,oBAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,GAAG,CAAC,CACX,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,eAAe,CAAC,CAAC,eAAe,CAAC,EACjC,CACH,CAAC,CACJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/dist/components/table/components/tableHeader/index.jsx

@@ -0,0 +1,63 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importStar(require("react"));
+/**
+ * Internal dependencies.
+ */
+const headerRow_1 = __importDefault(require("./headerRow"));
+const TableHeader = ({ setColumnPosition, onRightClick, setIsRowFocused, }) => {
+    const handleRightClick = (0, react_1.useCallback)((e) => {
+        const x = e.clientX, y = e.clientY;
+        setColumnPosition({ x, y });
+        onRightClick(e);
+    }, [onRightClick, setColumnPosition]);
+    return (<div onContextMenu={handleRightClick} className="sticky top-0 z-10">
+      <headerRow_1.default setIsRowFocused={setIsRowFocused}/>
+    </div>);
+};
+exports.default = TableHeader;
+//# sourceMappingURL=index.jsx.map