@algolia/satellite 1.10.0 → 1.10.1

package/dist/cjs/Layout/Tables/DataTable/DataTable.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataTable = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compact = _interopRequireDefault(require("lodash/compact"));
 var _get = _interopRequireDefault(require("lodash/get"));
+var _react = require("react");
 var _Fields = require("../../../Fields");
 var _Satellite = require("../../../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
@@ -82,6 +83,14 @@ var DataTable = exports.DataTable = function DataTable(_ref) {
       console.warn("You can only have one selected item at a time in single `selectMode`.");
     }
   }
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hoveredRowId = _useState2[0],
+    setHoveredRowId = _useState2[1];
+  (0, _react.useEffect)(function () {
+    // Reset hovered row when data changes to avoid inconsistent state
+    setHoveredRowId(undefined);
+  }, [data]);
   var computedColumns = (0, _compact["default"])([selectMode === "single" && {
     id: "_internal_singleSelect",
     accessor: "_internal_singleSelect",
@@ -156,12 +165,14 @@ var DataTable = exports.DataTable = function DataTable(_ref) {
   var rows = data.map(function (item, index) {
     var _ref4;
     var id = typeof getItemIdInternal === "string" ? String((0, _get["default"])(item, getItemIdInternal, DEFAULT_GET_ITEM_ID(item, index))) : getItemIdInternal(item, index);
+    var hovered = hoveredRowId === id;
     var sanitizedSelection = (_ref4 = selectMode === "single" ? selection === null || selection === void 0 ? void 0 : selection.slice(0, 1) : selectMode === "none" ? [] : selection) !== null && _ref4 !== void 0 ? _ref4 : [];
     var selected = sanitizedSelection.includes(id);
     var selectable = selectMode !== "none" && (!canSelectItem || canSelectItem(item, index));
     return {
       item: item,
       id: id,
+      hovered: hovered,
       selected: selected,
       selectable: selectable
     };
@@ -183,6 +194,7 @@ var DataTable = exports.DataTable = function DataTable(_ref) {
     return false;
   };
   var onRowHoverChange = function onRowHoverChange(row) {
+    setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
     onRowHoveredChanged === null || onRowHoveredChanged === void 0 || onRowHoveredChanged(row);
   };
   var onToggleSort = function onToggleSort(columnId, direction) {

package/dist/cjs/Layout/Tables/DataTable/types.d.ts

@@ -9,6 +9,8 @@ export interface Row<Item> {
     item: Item;
     /** The row id */
     id: string;
+    /** Is the row hovered? */
+    hovered: boolean;
     /** Is the row selected? */
     selected: boolean;
     /** Can the row be selected? */

package/dist/esm/Layout/Tables/DataTable/DataTable.js

@@ -1,12 +1,13 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import compact from "lodash/compact";
 import get from "lodash/get";
+import { useEffect, useState } from "react";
 import { Checkbox, RadioButton } from "../../../Fields";
 import { useLocale } from "../../../Satellite";
 import stl from "../../../styles/helpers/satellitePrefixer";
@@ -75,6 +76,14 @@ export var DataTable = function DataTable(_ref) {
       console.warn("You can only have one selected item at a time in single `selectMode`.");
     }
   }
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredRowId = _useState2[0],
+    setHoveredRowId = _useState2[1];
+  useEffect(function () {
+    // Reset hovered row when data changes to avoid inconsistent state
+    setHoveredRowId(undefined);
+  }, [data]);
   var computedColumns = compact([selectMode === "single" && {
     id: "_internal_singleSelect",
     accessor: "_internal_singleSelect",
@@ -149,12 +158,14 @@ export var DataTable = function DataTable(_ref) {
   var rows = data.map(function (item, index) {
     var _ref4;
     var id = typeof getItemIdInternal === "string" ? String(get(item, getItemIdInternal, DEFAULT_GET_ITEM_ID(item, index))) : getItemIdInternal(item, index);
+    var hovered = hoveredRowId === id;
     var sanitizedSelection = (_ref4 = selectMode === "single" ? selection === null || selection === void 0 ? void 0 : selection.slice(0, 1) : selectMode === "none" ? [] : selection) !== null && _ref4 !== void 0 ? _ref4 : [];
     var selected = sanitizedSelection.includes(id);
     var selectable = selectMode !== "none" && (!canSelectItem || canSelectItem(item, index));
     return {
       item: item,
       id: id,
+      hovered: hovered,
       selected: selected,
       selectable: selectable
     };
@@ -176,6 +187,7 @@ export var DataTable = function DataTable(_ref) {
     return false;
   };
   var onRowHoverChange = function onRowHoverChange(row) {
+    setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
     onRowHoveredChanged === null || onRowHoveredChanged === void 0 || onRowHoveredChanged(row);
   };
   var onToggleSort = function onToggleSort(columnId, direction) {

package/dist/esm/Layout/Tables/DataTable/types.d.ts

@@ -9,6 +9,8 @@ export interface Row<Item> {
     item: Item;
     /** The row id */
     id: string;
+    /** Is the row hovered? */
+    hovered: boolean;
     /** Is the row selected? */
     selected: boolean;
     /** Can the row be selected? */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Algolia design system React components",
   "sideEffects": false,
   "scripts": {