@oanda/labs-currency-cross-table 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.2 (2024-08-20)
+
+
+
+## 1.0.150 (2024-08-19)
+
+**Note:** Version bump only for package @oanda/labs-currency-cross-table
+
+
+
+
+
 ## 1.0.1 (2024-08-19)
 
 **Note:** Version bump only for package @oanda/labs-currency-cross-table

package/dist/main/CurrencyCrossTableWidget/Main.js

@@ -14,6 +14,8 @@ const Main = _ref => {
     instruments,
     currencies
   } = _ref;
+  const [selectedCurrency, setSelectedCurrency] = (0, _react.useState)('');
+  const [selectedPair, setSelectedPair] = (0, _react.useState)('');
   const hasInstruments = instruments.length > 0;
   const {
     target,
@@ -31,15 +33,17 @@ const Main = _ref => {
     className: "lw-w-full"
   }, _react.default.createElement("div", {
     className: "lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary"
-  }, _react.default.createElement(_components.TextCell, null), currencies.map(currency => _react.default.createElement(_components.TextCell, {
-    key: currency,
-    label: currency
+  }, _react.default.createElement(_components.TextCell, null), currencies.map(pair => _react.default.createElement(_components.TextCell, {
+    key: pair,
+    label: pair,
+    hovered: pair === selectedPair
   }))), currencies.map((currency, index, arr) => _react.default.createElement("div", {
     key: currency,
     className: "lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary"
   }, _react.default.createElement(_components.TextCell, {
-    label: `${currency}`,
-    additionalBorderBottom: index === arr.length - 1
+    label: currency,
+    additionalBorderBottom: index === arr.length - 1,
+    hovered: currency === selectedCurrency
   }), arr.map(pair => _react.default.createElement(_react.Fragment, {
     key: `${currency}_${pair}`
   }, currency !== pair ? _react.default.createElement(_components.CellWithData, {
@@ -49,7 +53,9 @@ const Main = _ref => {
       displayName: `${currency}/${pair}`
     },
     target: target,
-    additionalBorderBottom: index === arr.length - 1
+    additionalBorderBottom: index === arr.length - 1,
+    setSelectedCurrency: setSelectedCurrency,
+    setSelectedPair: setSelectedPair
   }) : _react.default.createElement(_components.TextCell, {
     additionalBorderBottom: index === arr.length - 1,
     emptyIndicator: true

package/dist/main/CurrencyCrossTableWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_labsWidgetCommon","_components","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","instruments","currencies","hasInstruments","length","target","setQuery","useLiveRatesQuery","useEffect","createElement","className","TextCell","map","currency","key","label","index","arr","additionalBorderBottom","pair","Fragment","CellWithData","loading","record","instrument","displayName","emptyIndicator","exports"],"sources":["../../../src/CurrencyCrossTableWidget/Main.tsx"],"sourcesContent":["import React, { Fragment, useEffect } from 'react';\nimport { useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport { MainProps } from './types';\nimport { CellWithData, TextCell } from './components';\n\nconst Main = ({\n  instruments,\n  currencies,\n}: MainProps) => {\n  const hasInstruments = instruments.length > 0;\n\n  const { target, setQuery } = useLiveRatesQuery();\n\n  useEffect(() => {\n    if (hasInstruments) {\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, instruments);\n\n  return (\n    <div data-testid=\"currency-cross-table-wrapper\" className=\"lw-w-full\">\n      <div className=\"lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary\">\n        <TextCell />\n        {currencies.map(((currency) => <TextCell key={currency} label={currency} />\n        ))}\n      </div>\n      {currencies.map(((currency, index, arr) => (\n        <div\n          key={currency}\n          className=\"lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary\"\n        >\n          <TextCell\n            label={`${currency}`}\n            additionalBorderBottom={index === arr.length - 1}\n          />\n          {arr.map((pair) => (\n            <Fragment key={`${currency}_${pair}`}>\n              {currency !== pair ? (\n                <CellWithData\n                  loading={false}\n                  record={{\n                    instrument: `${currency}_${pair}`,\n                    displayName: `${currency}/${pair}`,\n                  }}\n                  target={target}\n                  additionalBorderBottom={index === arr.length - 1}\n                />\n              ) : (\n                <TextCell\n                  additionalBorderBottom={index === arr.length - 1}\n                  emptyIndicator\n                />\n              )}\n            </Fragment>\n          ))}\n        </div>\n      )))}\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_labsWidgetCommon","_components","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","instruments","currencies","selectedCurrency","setSelectedCurrency","useState","selectedPair","setSelectedPair","hasInstruments","length","target","setQuery","useLiveRatesQuery","useEffect","createElement","className","TextCell","map","pair","key","label","hovered","currency","index","arr","additionalBorderBottom","Fragment","CellWithData","loading","record","instrument","displayName","emptyIndicator","exports"],"sources":["../../../src/CurrencyCrossTableWidget/Main.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useState } from 'react';\nimport { useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport { MainProps } from './types';\nimport { CellWithData, TextCell } from './components';\n\nconst Main = ({\n  instruments,\n  currencies,\n}: MainProps) => {\n  const [selectedCurrency, setSelectedCurrency] = useState('');\n  const [selectedPair, setSelectedPair] = useState('');\n\n  const hasInstruments = instruments.length > 0;\n\n  const { target, setQuery } = useLiveRatesQuery();\n\n  useEffect(() => {\n    if (hasInstruments) {\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, instruments);\n\n  return (\n    <div data-testid=\"currency-cross-table-wrapper\" className=\"lw-w-full\">\n      <div className=\"lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary\">\n        <TextCell />\n        {currencies.map(((pair) => (\n          <TextCell\n            key={pair}\n            label={pair}\n            hovered={pair === selectedPair}\n          />\n        )))}\n      </div>\n      {currencies.map(((currency, index, arr) => (\n        <div\n          key={currency}\n          className=\"lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary\"\n        >\n          <TextCell\n            label={currency}\n            additionalBorderBottom={index === arr.length - 1}\n            hovered={currency === selectedCurrency}\n          />\n          {arr.map((pair) => (\n            <Fragment key={`${currency}_${pair}`}>\n              {currency !== pair ? (\n                <CellWithData\n                  loading={false}\n                  record={{\n                    instrument: `${currency}_${pair}`,\n                    displayName: `${currency}/${pair}`,\n                  }}\n                  target={target}\n                  additionalBorderBottom={index === arr.length - 1}\n                  setSelectedCurrency={setSelectedCurrency}\n                  setSelectedPair={setSelectedPair}\n                />\n              ) : (\n                <TextCell\n                  additionalBorderBottom={index === arr.length - 1}\n                  emptyIndicator\n                />\n              )}\n            </Fragment>\n          ))}\n        </div>\n      )))}\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CurrencyCrossTableWidget/components/Cell.js

@@ -13,12 +13,18 @@ const Cell = _ref => {
     children,
     isError,
     isLoading,
-    additionalBorderBottom
+    additionalBorderBottom,
+    hovered,
+    mouseEnterHandler,
+    mouseLeaveHandler
   } = _ref;
   return _react.default.createElement("div", {
     className: (0, _classnames.default)('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {
-      'lw-border-b': additionalBorderBottom
-    })
+      'lw-border-b': additionalBorderBottom,
+      'lw-font-semibold': hovered
+    }),
+    onMouseEnter: mouseEnterHandler,
+    onMouseLeave: mouseLeaveHandler
   }, isLoading && _react.default.createElement("div", {
     className: "lw-px-3 lw-py-3.5"
   }, _constant.CELL_LOADING_VALUE), !isLoading && !isError && children, !isLoading && isError && _react.default.createElement("span", null, _constant.CELL_EMPTY_VALUE));

package/dist/main/CurrencyCrossTableWidget/components/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":["_react","_interopRequireDefault","require","_classnames","_constant","e","__esModule","default","Cell","_ref","children","isError","isLoading","additionalBorderBottom","createElement","className","classnames","CELL_LOADING_VALUE","CELL_EMPTY_VALUE","exports"],"sources":["../../../../src/CurrencyCrossTableWidget/components/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { CellProps } from './types';\nimport { CELL_EMPTY_VALUE, CELL_LOADING_VALUE } from '../constant';\n\nconst Cell = ({\n  children, isError, isLoading, additionalBorderBottom,\n}: CellProps) => (\n  <div className={classnames('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {\n    'lw-border-b': additionalBorderBottom,\n  })}\n  >\n    {isLoading && <div className=\"lw-px-3 lw-py-3.5\">{CELL_LOADING_VALUE}</div>}\n    {!isLoading && !isError && children}\n    {!isLoading && isError && (\n      <span>{CELL_EMPTY_VALUE}</span>\n    )}\n  </div>\n);\n\nexport { Cell };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AAAmE,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnE,MAAMG,IAAI,GAAGC,IAAA;EAAA,IAAC;IACZC,QAAQ;IAAEC,OAAO;IAAEC,SAAS;IAAEC;EACrB,CAAC,GAAAJ,IAAA;EAAA,OACVT,MAAA,CAAAO,OAAA,CAAAO,aAAA;IAAKC,SAAS,EAAE,IAAAC,mBAAU,EAAC,yHAAyH,EAAE;MACpJ,aAAa,EAAEH;IACjB,CAAC;EAAE,GAEAD,SAAS,IAAIZ,MAAA,CAAAO,OAAA,CAAAO,aAAA;IAAKC,SAAS,EAAC;EAAmB,GAAEE,4BAAwB,CAAC,EAC1E,CAACL,SAAS,IAAI,CAACD,OAAO,IAAID,QAAQ,EAClC,CAACE,SAAS,IAAID,OAAO,IACpBX,MAAA,CAAAO,OAAA,CAAAO,aAAA,eAAOI,0BAAuB,CAE7B,CAAC;AAAA,CACP;AAACC,OAAA,CAAAX,IAAA,GAAAA,IAAA","ignoreList":[]}
+{"version":3,"file":"Cell.js","names":["_react","_interopRequireDefault","require","_classnames","_constant","e","__esModule","default","Cell","_ref","children","isError","isLoading","additionalBorderBottom","hovered","mouseEnterHandler","mouseLeaveHandler","createElement","className","classnames","onMouseEnter","onMouseLeave","CELL_LOADING_VALUE","CELL_EMPTY_VALUE","exports"],"sources":["../../../../src/CurrencyCrossTableWidget/components/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { CellProps } from './types';\nimport { CELL_EMPTY_VALUE, CELL_LOADING_VALUE } from '../constant';\n\nconst Cell = ({\n  children,\n  isError,\n  isLoading,\n  additionalBorderBottom,\n  hovered,\n  mouseEnterHandler,\n  mouseLeaveHandler,\n}: CellProps) => (\n  <div\n    className={classnames('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {\n      'lw-border-b': additionalBorderBottom,\n      'lw-font-semibold': hovered,\n    })}\n    onMouseEnter={mouseEnterHandler}\n    onMouseLeave={mouseLeaveHandler}\n  >\n    {isLoading && <div className=\"lw-px-3 lw-py-3.5\">{CELL_LOADING_VALUE}</div>}\n    {!isLoading && !isError && children}\n    {!isLoading && isError && (\n      <span>{CELL_EMPTY_VALUE}</span>\n    )}\n  </div>\n);\n\nexport { Cell };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AAAmE,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnE,MAAMG,IAAI,GAAGC,IAAA;EAAA,IAAC;IACZC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,sBAAsB;IACtBC,OAAO;IACPC,iBAAiB;IACjBC;EACS,CAAC,GAAAP,IAAA;EAAA,OACVT,MAAA,CAAAO,OAAA,CAAAU,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EAAC,yHAAyH,EAAE;MAC/I,aAAa,EAAEN,sBAAsB;MACrC,kBAAkB,EAAEC;IACtB,CAAC,CAAE;IACHM,YAAY,EAAEL,iBAAkB;IAChCM,YAAY,EAAEL;EAAkB,GAE/BJ,SAAS,IAAIZ,MAAA,CAAAO,OAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAmB,GAAEI,4BAAwB,CAAC,EAC1E,CAACV,SAAS,IAAI,CAACD,OAAO,IAAID,QAAQ,EAClC,CAACE,SAAS,IAAID,OAAO,IACpBX,MAAA,CAAAO,OAAA,CAAAU,aAAA,eAAOM,0BAAuB,CAE7B,CAAC;AAAA,CACP;AAACC,OAAA,CAAAhB,IAAA,GAAAA,IAAA","ignoreList":[]}

package/dist/main/CurrencyCrossTableWidget/components/CellWithData.js

@@ -4,27 +4,46 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CellWithData = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _utils = require("../utils");
 var _Cell = require("./Cell");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const CellWithData = _ref => {
   let {
     loading,
     record,
     target,
-    additionalBorderBottom
+    additionalBorderBottom,
+    setSelectedCurrency,
+    setSelectedPair
   } = _ref;
+  const [hovered, setHovered] = (0, _react.useState)(false);
   const {
     updatedRecord,
     error
   } = (0, _utils.useRecords)(record, record.instrument ? target : null);
   const checkLoading = id => loading || !error && updatedRecord?.[id] === undefined;
+  const handleMouseEnter = () => {
+    setHovered(true);
+    const currency = record.instrument.substring(0, 3);
+    const pair = record.instrument.substring(record.instrument.length - 3);
+    setSelectedCurrency(currency);
+    setSelectedPair(pair);
+  };
+  const handleMouseLeave = () => {
+    setHovered(false);
+    setSelectedCurrency('');
+    setSelectedPair('');
+  };
   return _react.default.createElement(_Cell.Cell, {
     isLoading: checkLoading('buy'),
     isError: !!error,
-    additionalBorderBottom: additionalBorderBottom
+    additionalBorderBottom: additionalBorderBottom,
+    hovered: hovered,
+    mouseEnterHandler: handleMouseEnter,
+    mouseLeaveHandler: handleMouseLeave
   }, _react.default.createElement(_labsWidgetCommon.Price, {
     priceMovement: updatedRecord.buyPriceMovement,
     movementIndicator: "background"

package/dist/main/CurrencyCrossTableWidget/components/CellWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellWithData.js","names":["_react","_interopRequireDefault","require","_labsWidgetCommon","_utils","_Cell","e","__esModule","default","CellWithData","_ref","loading","record","target","additionalBorderBottom","updatedRecord","error","useRecords","instrument","checkLoading","id","undefined","createElement","Cell","isLoading","isError","Price","priceMovement","buyPriceMovement","movementIndicator","buy","toFixed","displayPrecision","exports"],"sources":["../../../../src/CurrencyCrossTableWidget/components/CellWithData.tsx"],"sourcesContent":["import React from 'react';\nimport { Price } from '@oanda/labs-widget-common';\nimport { useRecords } from '../utils';\nimport { CellWithDataProps } from './types';\nimport { Cell } from './Cell';\n\nconst CellWithData = ({\n  loading,\n  record,\n  target,\n  additionalBorderBottom,\n}: CellWithDataProps) => {\n  const { updatedRecord, error } = useRecords(record, record.instrument ? target : null);\n\n  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <Cell\n      isLoading={checkLoading('buy')}\n      isError={!!error}\n      additionalBorderBottom={additionalBorderBottom}\n    >\n      <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator=\"background\">\n        <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n      </Price>\n    </Cell>\n  );\n};\n\nexport { CellWithData };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,KAAA,GAAAH,OAAA;AAA8B,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9B,MAAMG,YAAY,GAAGC,IAAA,IAKI;EAAA,IALH;IACpBC,OAAO;IACPC,MAAM;IACNC,MAAM;IACNC;EACiB,CAAC,GAAAJ,IAAA;EAClB,MAAM;IAAEK,aAAa;IAAEC;EAAM,CAAC,GAAG,IAAAC,iBAAU,EAACL,MAAM,EAAEA,MAAM,CAACM,UAAU,GAAGL,MAAM,GAAG,IAAI,CAAC;EAEtF,MAAMM,YAAY,GAAIC,EAAU,IAAKT,OAAO,IAAK,CAACK,KAAK,IAAID,aAAa,GAAGK,EAAE,CAAC,KAAKC,SAAU;EAE7F,OACErB,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAACjB,KAAA,CAAAkB,IAAI;IACHC,SAAS,EAAEL,YAAY,CAAC,KAAK,CAAE;IAC/BM,OAAO,EAAE,CAAC,CAACT,KAAM;IACjBF,sBAAsB,EAAEA;EAAuB,GAE/Cd,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAACnB,iBAAA,CAAAuB,KAAK;IAACC,aAAa,EAAEZ,aAAa,CAACa,gBAAiB;IAACC,iBAAiB,EAAC;EAAY,GAClF7B,MAAA,CAAAQ,OAAA,CAAAc,aAAA,eAAOP,aAAa,CAACe,GAAG,EAAEC,OAAO,CAAChB,aAAa,CAACiB,gBAAgB,CAAQ,CACnE,CACH,CAAC;AAEX,CAAC;AAACC,OAAA,CAAAxB,YAAA,GAAAA,YAAA","ignoreList":[]}
+{"version":3,"file":"CellWithData.js","names":["_react","_interopRequireWildcard","require","_labsWidgetCommon","_utils","_Cell","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CellWithData","_ref","loading","record","target","additionalBorderBottom","setSelectedCurrency","setSelectedPair","hovered","setHovered","useState","updatedRecord","error","useRecords","instrument","checkLoading","id","undefined","handleMouseEnter","currency","substring","pair","length","handleMouseLeave","createElement","Cell","isLoading","isError","mouseEnterHandler","mouseLeaveHandler","Price","priceMovement","buyPriceMovement","movementIndicator","buy","toFixed","displayPrecision","exports"],"sources":["../../../../src/CurrencyCrossTableWidget/components/CellWithData.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Price } from '@oanda/labs-widget-common';\nimport { useRecords } from '../utils';\nimport { CellWithDataProps } from './types';\nimport { Cell } from './Cell';\n\nconst CellWithData = ({\n  loading,\n  record,\n  target,\n  additionalBorderBottom,\n  setSelectedCurrency,\n  setSelectedPair,\n}: CellWithDataProps) => {\n  const [hovered, setHovered] = useState(false);\n  const { updatedRecord, error } = useRecords(record, record.instrument ? target : null);\n\n  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);\n\n  const handleMouseEnter = () => {\n    setHovered(true);\n\n    const currency = record.instrument.substring(0, 3);\n    const pair = record.instrument.substring(record.instrument.length - 3);\n\n    setSelectedCurrency(currency);\n    setSelectedPair(pair);\n  };\n\n  const handleMouseLeave = () => {\n    setHovered(false);\n\n    setSelectedCurrency('');\n    setSelectedPair('');\n  };\n\n  return (\n    <Cell\n      isLoading={checkLoading('buy')}\n      isError={!!error}\n      additionalBorderBottom={additionalBorderBottom}\n      hovered={hovered}\n      mouseEnterHandler={handleMouseEnter}\n      mouseLeaveHandler={handleMouseLeave}\n    >\n      <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator=\"background\">\n        <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n      </Price>\n    </Cell>\n  );\n};\n\nexport { CellWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CurrencyCrossTableWidget/components/TextCell.js

@@ -11,12 +11,14 @@ const TextCell = _ref => {
   let {
     label,
     emptyIndicator,
-    additionalBorderBottom
+    additionalBorderBottom,
+    hovered
   } = _ref;
   return _react.default.createElement("span", {
     className: (0, _classnames.default)('lw-flex-1 lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center', {
       'lw-border-b': additionalBorderBottom,
-      'lw-bg-border-primary': emptyIndicator
+      'lw-bg-border-primary': emptyIndicator,
+      'lw-font-semibold': hovered
     })
   }, label);
 };

package/dist/main/CurrencyCrossTableWidget/components/TextCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCell.js","names":["_react","_interopRequireDefault","require","_classnames","e","__esModule","default","TextCell","_ref","label","emptyIndicator","additionalBorderBottom","createElement","className","classnames","exports"],"sources":["../../../../src/CurrencyCrossTableWidget/components/TextCell.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { TextCellProps } from './types';\n\nconst TextCell = ({\n  label,\n  emptyIndicator,\n  additionalBorderBottom,\n}: TextCellProps) => (\n  <span className={classnames('lw-flex-1 lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center', {\n    'lw-border-b': additionalBorderBottom,\n    'lw-bg-border-primary': emptyIndicator,\n  })}\n  >\n    {label}\n  </span>\n);\n\nexport { TextCell };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAoC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGpC,MAAMG,QAAQ,GAAGC,IAAA;EAAA,IAAC;IAChBC,KAAK;IACLC,cAAc;IACdC;EACa,CAAC,GAAAH,IAAA;EAAA,OACdR,MAAA,CAAAM,OAAA,CAAAM,aAAA;IAAMC,SAAS,EAAE,IAAAC,mBAAU,EAAC,yFAAyF,EAAE;MACrH,aAAa,EAAEH,sBAAsB;MACrC,sBAAsB,EAAED;IAC1B,CAAC;EAAE,GAEAD,KACG,CAAC;AAAA,CACR;AAACM,OAAA,CAAAR,QAAA,GAAAA,QAAA","ignoreList":[]}
+{"version":3,"file":"TextCell.js","names":["_react","_interopRequireDefault","require","_classnames","e","__esModule","default","TextCell","_ref","label","emptyIndicator","additionalBorderBottom","hovered","createElement","className","classnames","exports"],"sources":["../../../../src/CurrencyCrossTableWidget/components/TextCell.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { TextCellProps } from './types';\n\nconst TextCell = ({\n  label,\n  emptyIndicator,\n  additionalBorderBottom,\n  hovered,\n}: TextCellProps) => (\n  <span className={classnames('lw-flex-1 lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center', {\n    'lw-border-b': additionalBorderBottom,\n    'lw-bg-border-primary': emptyIndicator,\n    'lw-font-semibold': hovered,\n  })}\n  >\n    {label}\n  </span>\n);\n\nexport { TextCell };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAoC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGpC,MAAMG,QAAQ,GAAGC,IAAA;EAAA,IAAC;IAChBC,KAAK;IACLC,cAAc;IACdC,sBAAsB;IACtBC;EACa,CAAC,GAAAJ,IAAA;EAAA,OACdR,MAAA,CAAAM,OAAA,CAAAO,aAAA;IAAMC,SAAS,EAAE,IAAAC,mBAAU,EAAC,yFAAyF,EAAE;MACrH,aAAa,EAAEJ,sBAAsB;MACrC,sBAAsB,EAAED,cAAc;MACtC,kBAAkB,EAAEE;IACtB,CAAC;EAAE,GAEAH,KACG,CAAC;AAAA,CACR;AAACO,OAAA,CAAAT,QAAA,GAAAA,QAAA","ignoreList":[]}

package/dist/main/CurrencyCrossTableWidget/components/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/CurrencyCrossTableWidget/components/types.ts"],"sourcesContent":["import { DataRecord, LoaderSize } from '@oanda/labs-widget-common';\n\nexport interface CellWithDataProps {\n  loading: boolean;\n  record: DataRecord;\n  target: EventTarget | null;\n  additionalBorderBottom? : boolean;\n}\n\nexport interface CellProps {\n  children: React.ReactNode;\n  isLoading?: boolean;\n  isError?: boolean;\n  loaderSize?: LoaderSize;\n  additionalBorderBottom? : boolean;\n}\n\nexport interface TextCellProps {\n  label?: string;\n  emptyIndicator?: boolean;\n  additionalBorderBottom? : boolean;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/CurrencyCrossTableWidget/components/types.ts"],"sourcesContent":["import { DataRecord, LoaderSize } from '@oanda/labs-widget-common';\n\nexport interface CellWithDataProps {\n  loading: boolean;\n  record: DataRecord;\n  target: EventTarget | null;\n  additionalBorderBottom? : boolean;\n  setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;\n  setSelectedPair: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport interface CellProps {\n  children: React.ReactNode;\n  isLoading?: boolean;\n  isError?: boolean;\n  loaderSize?: LoaderSize;\n  additionalBorderBottom? : boolean;\n  hovered: boolean;\n  mouseEnterHandler: () => void;\n  mouseLeaveHandler: () => void;\n}\n\nexport interface TextCellProps {\n  label?: string;\n  emptyIndicator?: boolean;\n  additionalBorderBottom? : boolean;\n  hovered?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/Main.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { useLiveRatesQuery } from '@oanda/labs-widget-common';
 import { CellWithData, TextCell } from './components';
 const Main = _ref => {
@@ -6,6 +6,8 @@ const Main = _ref => {
     instruments,
     currencies
   } = _ref;
+  const [selectedCurrency, setSelectedCurrency] = useState('');
+  const [selectedPair, setSelectedPair] = useState('');
   const hasInstruments = instruments.length > 0;
   const {
     target,
@@ -23,15 +25,17 @@ const Main = _ref => {
     className: "lw-w-full"
   }, React.createElement("div", {
     className: "lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary"
-  }, React.createElement(TextCell, null), currencies.map(currency => React.createElement(TextCell, {
-    key: currency,
-    label: currency
+  }, React.createElement(TextCell, null), currencies.map(pair => React.createElement(TextCell, {
+    key: pair,
+    label: pair,
+    hovered: pair === selectedPair
   }))), currencies.map((currency, index, arr) => React.createElement("div", {
     key: currency,
     className: "lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary"
   }, React.createElement(TextCell, {
-    label: `${currency}`,
-    additionalBorderBottom: index === arr.length - 1
+    label: currency,
+    additionalBorderBottom: index === arr.length - 1,
+    hovered: currency === selectedCurrency
   }), arr.map(pair => React.createElement(Fragment, {
     key: `${currency}_${pair}`
   }, currency !== pair ? React.createElement(CellWithData, {
@@ -41,7 +45,9 @@ const Main = _ref => {
       displayName: `${currency}/${pair}`
     },
     target: target,
-    additionalBorderBottom: index === arr.length - 1
+    additionalBorderBottom: index === arr.length - 1,
+    setSelectedCurrency: setSelectedCurrency,
+    setSelectedPair: setSelectedPair
   }) : React.createElement(TextCell, {
     additionalBorderBottom: index === arr.length - 1,
     emptyIndicator: true

package/dist/module/CurrencyCrossTableWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["React","Fragment","useEffect","useLiveRatesQuery","CellWithData","TextCell","Main","_ref","instruments","currencies","hasInstruments","length","target","setQuery","createElement","className","map","currency","key","label","index","arr","additionalBorderBottom","pair","loading","record","instrument","displayName","emptyIndicator"],"sources":["../../../src/CurrencyCrossTableWidget/Main.tsx"],"sourcesContent":["import React, { Fragment, useEffect } from 'react';\nimport { useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport { MainProps } from './types';\nimport { CellWithData, TextCell } from './components';\n\nconst Main = ({\n  instruments,\n  currencies,\n}: MainProps) => {\n  const hasInstruments = instruments.length > 0;\n\n  const { target, setQuery } = useLiveRatesQuery();\n\n  useEffect(() => {\n    if (hasInstruments) {\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, instruments);\n\n  return (\n    <div data-testid=\"currency-cross-table-wrapper\" className=\"lw-w-full\">\n      <div className=\"lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary\">\n        <TextCell />\n        {currencies.map(((currency) => <TextCell key={currency} label={currency} />\n        ))}\n      </div>\n      {currencies.map(((currency, index, arr) => (\n        <div\n          key={currency}\n          className=\"lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary\"\n        >\n          <TextCell\n            label={`${currency}`}\n            additionalBorderBottom={index === arr.length - 1}\n          />\n          {arr.map((pair) => (\n            <Fragment key={`${currency}_${pair}`}>\n              {currency !== pair ? (\n                <CellWithData\n                  loading={false}\n                  record={{\n                    instrument: `${currency}_${pair}`,\n                    displayName: `${currency}/${pair}`,\n                  }}\n                  target={target}\n                  additionalBorderBottom={index === arr.length - 1}\n                />\n              ) : (\n                <TextCell\n                  additionalBorderBottom={index === arr.length - 1}\n                  emptyIndicator\n                />\n              )}\n            </Fragment>\n          ))}\n        </div>\n      )))}\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,iBAAiB,QAAQ,2BAA2B;AAE7D,SAASC,YAAY,EAAEC,QAAQ,QAAQ,cAAc;AAErD,MAAMC,IAAI,GAAGC,IAAA,IAGI;EAAA,IAHH;IACZC,WAAW;IACXC;EACS,CAAC,GAAAF,IAAA;EACV,MAAMG,cAAc,GAAGF,WAAW,CAACG,MAAM,GAAG,CAAC;EAE7C,MAAM;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EAEhDD,SAAS,CAAC,MAAM;IACd,IAAIQ,cAAc,EAAE;MAClBG,QAAQ,CAAC;QAAEL;MAAY,CAAC,CAAC;IAC3B;EAEF,CAAC,EAAEA,WAAW,CAAC;EAEf,OACER,KAAA,CAAAc,aAAA;IAAK,eAAY,8BAA8B;IAACC,SAAS,EAAC;EAAW,GACnEf,KAAA,CAAAc,aAAA;IAAKC,SAAS,EAAC;EAA0E,GACvFf,KAAA,CAAAc,aAAA,CAACT,QAAQ,MAAE,CAAC,EACXI,UAAU,CAACO,GAAG,CAAGC,QAAQ,IAAKjB,KAAA,CAAAc,aAAA,CAACT,QAAQ;IAACa,GAAG,EAAED,QAAS;IAACE,KAAK,EAAEF;EAAS,CAAE,CACzE,CACE,CAAC,EACLR,UAAU,CAACO,GAAG,CAAE,CAACC,QAAQ,EAAEG,KAAK,EAAEC,GAAG,KACpCrB,KAAA,CAAAc,aAAA;IACEI,GAAG,EAAED,QAAS;IACdF,SAAS,EAAC;EAA0E,GAEpFf,KAAA,CAAAc,aAAA,CAACT,QAAQ;IACPc,KAAK,EAAE,GAAGF,QAAQ,EAAG;IACrBK,sBAAsB,EAAEF,KAAK,KAAKC,GAAG,CAACV,MAAM,GAAG;EAAE,CAClD,CAAC,EACDU,GAAG,CAACL,GAAG,CAAEO,IAAI,IACZvB,KAAA,CAAAc,aAAA,CAACb,QAAQ;IAACiB,GAAG,EAAE,GAAGD,QAAQ,IAAIM,IAAI;EAAG,GAClCN,QAAQ,KAAKM,IAAI,GAChBvB,KAAA,CAAAc,aAAA,CAACV,YAAY;IACXoB,OAAO,EAAE,KAAM;IACfC,MAAM,EAAE;MACNC,UAAU,EAAE,GAAGT,QAAQ,IAAIM,IAAI,EAAE;MACjCI,WAAW,EAAE,GAAGV,QAAQ,IAAIM,IAAI;IAClC,CAAE;IACFX,MAAM,EAAEA,MAAO;IACfU,sBAAsB,EAAEF,KAAK,KAAKC,GAAG,CAACV,MAAM,GAAG;EAAE,CAClD,CAAC,GAEFX,KAAA,CAAAc,aAAA,CAACT,QAAQ;IACPiB,sBAAsB,EAAEF,KAAK,KAAKC,GAAG,CAACV,MAAM,GAAG,CAAE;IACjDiB,cAAc;EAAA,CACf,CAEK,CACX,CACE,CACL,CACC,CAAC;AAEV,CAAC;AAED,SAAStB,IAAI","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["React","Fragment","useEffect","useState","useLiveRatesQuery","CellWithData","TextCell","Main","_ref","instruments","currencies","selectedCurrency","setSelectedCurrency","selectedPair","setSelectedPair","hasInstruments","length","target","setQuery","createElement","className","map","pair","key","label","hovered","currency","index","arr","additionalBorderBottom","loading","record","instrument","displayName","emptyIndicator"],"sources":["../../../src/CurrencyCrossTableWidget/Main.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useState } from 'react';\nimport { useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport { MainProps } from './types';\nimport { CellWithData, TextCell } from './components';\n\nconst Main = ({\n  instruments,\n  currencies,\n}: MainProps) => {\n  const [selectedCurrency, setSelectedCurrency] = useState('');\n  const [selectedPair, setSelectedPair] = useState('');\n\n  const hasInstruments = instruments.length > 0;\n\n  const { target, setQuery } = useLiveRatesQuery();\n\n  useEffect(() => {\n    if (hasInstruments) {\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, instruments);\n\n  return (\n    <div data-testid=\"currency-cross-table-wrapper\" className=\"lw-w-full\">\n      <div className=\"lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary\">\n        <TextCell />\n        {currencies.map(((pair) => (\n          <TextCell\n            key={pair}\n            label={pair}\n            hovered={pair === selectedPair}\n          />\n        )))}\n      </div>\n      {currencies.map(((currency, index, arr) => (\n        <div\n          key={currency}\n          className=\"lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary\"\n        >\n          <TextCell\n            label={currency}\n            additionalBorderBottom={index === arr.length - 1}\n            hovered={currency === selectedCurrency}\n          />\n          {arr.map((pair) => (\n            <Fragment key={`${currency}_${pair}`}>\n              {currency !== pair ? (\n                <CellWithData\n                  loading={false}\n                  record={{\n                    instrument: `${currency}_${pair}`,\n                    displayName: `${currency}/${pair}`,\n                  }}\n                  target={target}\n                  additionalBorderBottom={index === arr.length - 1}\n                  setSelectedCurrency={setSelectedCurrency}\n                  setSelectedPair={setSelectedPair}\n                />\n              ) : (\n                <TextCell\n                  additionalBorderBottom={index === arr.length - 1}\n                  emptyIndicator\n                />\n              )}\n            </Fragment>\n          ))}\n        </div>\n      )))}\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SAASC,iBAAiB,QAAQ,2BAA2B;AAE7D,SAASC,YAAY,EAAEC,QAAQ,QAAQ,cAAc;AAErD,MAAMC,IAAI,GAAGC,IAAA,IAGI;EAAA,IAHH;IACZC,WAAW;IACXC;EACS,CAAC,GAAAF,IAAA;EACV,MAAM,CAACG,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGT,QAAQ,CAAC,EAAE,CAAC;EAC5D,MAAM,CAACU,YAAY,EAAEC,eAAe,CAAC,GAAGX,QAAQ,CAAC,EAAE,CAAC;EAEpD,MAAMY,cAAc,GAAGN,WAAW,CAACO,MAAM,GAAG,CAAC;EAE7C,MAAM;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGd,iBAAiB,CAAC,CAAC;EAEhDF,SAAS,CAAC,MAAM;IACd,IAAIa,cAAc,EAAE;MAClBG,QAAQ,CAAC;QAAET;MAAY,CAAC,CAAC;IAC3B;EAEF,CAAC,EAAEA,WAAW,CAAC;EAEf,OACET,KAAA,CAAAmB,aAAA;IAAK,eAAY,8BAA8B;IAACC,SAAS,EAAC;EAAW,GACnEpB,KAAA,CAAAmB,aAAA;IAAKC,SAAS,EAAC;EAA0E,GACvFpB,KAAA,CAAAmB,aAAA,CAACb,QAAQ,MAAE,CAAC,EACXI,UAAU,CAACW,GAAG,CAAGC,IAAI,IACpBtB,KAAA,CAAAmB,aAAA,CAACb,QAAQ;IACPiB,GAAG,EAAED,IAAK;IACVE,KAAK,EAAEF,IAAK;IACZG,OAAO,EAAEH,IAAI,KAAKT;EAAa,CAChC,CACD,CACC,CAAC,EACLH,UAAU,CAACW,GAAG,CAAE,CAACK,QAAQ,EAAEC,KAAK,EAAEC,GAAG,KACpC5B,KAAA,CAAAmB,aAAA;IACEI,GAAG,EAAEG,QAAS;IACdN,SAAS,EAAC;EAA0E,GAEpFpB,KAAA,CAAAmB,aAAA,CAACb,QAAQ;IACPkB,KAAK,EAAEE,QAAS;IAChBG,sBAAsB,EAAEF,KAAK,KAAKC,GAAG,CAACZ,MAAM,GAAG,CAAE;IACjDS,OAAO,EAAEC,QAAQ,KAAKf;EAAiB,CACxC,CAAC,EACDiB,GAAG,CAACP,GAAG,CAAEC,IAAI,IACZtB,KAAA,CAAAmB,aAAA,CAAClB,QAAQ;IAACsB,GAAG,EAAE,GAAGG,QAAQ,IAAIJ,IAAI;EAAG,GAClCI,QAAQ,KAAKJ,IAAI,GAChBtB,KAAA,CAAAmB,aAAA,CAACd,YAAY;IACXyB,OAAO,EAAE,KAAM;IACfC,MAAM,EAAE;MACNC,UAAU,EAAE,GAAGN,QAAQ,IAAIJ,IAAI,EAAE;MACjCW,WAAW,EAAE,GAAGP,QAAQ,IAAIJ,IAAI;IAClC,CAAE;IACFL,MAAM,EAAEA,MAAO;IACfY,sBAAsB,EAAEF,KAAK,KAAKC,GAAG,CAACZ,MAAM,GAAG,CAAE;IACjDJ,mBAAmB,EAAEA,mBAAoB;IACzCE,eAAe,EAAEA;EAAgB,CAClC,CAAC,GAEFd,KAAA,CAAAmB,aAAA,CAACb,QAAQ;IACPuB,sBAAsB,EAAEF,KAAK,KAAKC,GAAG,CAACZ,MAAM,GAAG,CAAE;IACjDkB,cAAc;EAAA,CACf,CAEK,CACX,CACE,CACL,CACC,CAAC;AAEV,CAAC;AAED,SAAS3B,IAAI","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/components/Cell.js

@@ -6,12 +6,18 @@ const Cell = _ref => {
     children,
     isError,
     isLoading,
-    additionalBorderBottom
+    additionalBorderBottom,
+    hovered,
+    mouseEnterHandler,
+    mouseLeaveHandler
   } = _ref;
   return React.createElement("div", {
     className: classnames('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {
-      'lw-border-b': additionalBorderBottom
-    })
+      'lw-border-b': additionalBorderBottom,
+      'lw-font-semibold': hovered
+    }),
+    onMouseEnter: mouseEnterHandler,
+    onMouseLeave: mouseLeaveHandler
   }, isLoading && React.createElement("div", {
     className: "lw-px-3 lw-py-3.5"
   }, CELL_LOADING_VALUE), !isLoading && !isError && children, !isLoading && isError && React.createElement("span", null, CELL_EMPTY_VALUE));

package/dist/module/CurrencyCrossTableWidget/components/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":["React","classnames","CELL_EMPTY_VALUE","CELL_LOADING_VALUE","Cell","_ref","children","isError","isLoading","additionalBorderBottom","createElement","className"],"sources":["../../../../src/CurrencyCrossTableWidget/components/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { CellProps } from './types';\nimport { CELL_EMPTY_VALUE, CELL_LOADING_VALUE } from '../constant';\n\nconst Cell = ({\n  children, isError, isLoading, additionalBorderBottom,\n}: CellProps) => (\n  <div className={classnames('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {\n    'lw-border-b': additionalBorderBottom,\n  })}\n  >\n    {isLoading && <div className=\"lw-px-3 lw-py-3.5\">{CELL_LOADING_VALUE}</div>}\n    {!isLoading && !isError && children}\n    {!isLoading && isError && (\n      <span>{CELL_EMPTY_VALUE}</span>\n    )}\n  </div>\n);\n\nexport { Cell };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,aAAa;AAElE,MAAMC,IAAI,GAAGC,IAAA;EAAA,IAAC;IACZC,QAAQ;IAAEC,OAAO;IAAEC,SAAS;IAAEC;EACrB,CAAC,GAAAJ,IAAA;EAAA,OACVL,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAEV,UAAU,CAAC,yHAAyH,EAAE;MACpJ,aAAa,EAAEQ;IACjB,CAAC;EAAE,GAEAD,SAAS,IAAIR,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAmB,GAAER,kBAAwB,CAAC,EAC1E,CAACK,SAAS,IAAI,CAACD,OAAO,IAAID,QAAQ,EAClC,CAACE,SAAS,IAAID,OAAO,IACpBP,KAAA,CAAAU,aAAA,eAAOR,gBAAuB,CAE7B,CAAC;AAAA,CACP;AAED,SAASE,IAAI","ignoreList":[]}
+{"version":3,"file":"Cell.js","names":["React","classnames","CELL_EMPTY_VALUE","CELL_LOADING_VALUE","Cell","_ref","children","isError","isLoading","additionalBorderBottom","hovered","mouseEnterHandler","mouseLeaveHandler","createElement","className","onMouseEnter","onMouseLeave"],"sources":["../../../../src/CurrencyCrossTableWidget/components/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { CellProps } from './types';\nimport { CELL_EMPTY_VALUE, CELL_LOADING_VALUE } from '../constant';\n\nconst Cell = ({\n  children,\n  isError,\n  isLoading,\n  additionalBorderBottom,\n  hovered,\n  mouseEnterHandler,\n  mouseLeaveHandler,\n}: CellProps) => (\n  <div\n    className={classnames('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {\n      'lw-border-b': additionalBorderBottom,\n      'lw-font-semibold': hovered,\n    })}\n    onMouseEnter={mouseEnterHandler}\n    onMouseLeave={mouseLeaveHandler}\n  >\n    {isLoading && <div className=\"lw-px-3 lw-py-3.5\">{CELL_LOADING_VALUE}</div>}\n    {!isLoading && !isError && children}\n    {!isLoading && isError && (\n      <span>{CELL_EMPTY_VALUE}</span>\n    )}\n  </div>\n);\n\nexport { Cell };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,aAAa;AAElE,MAAMC,IAAI,GAAGC,IAAA;EAAA,IAAC;IACZC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,sBAAsB;IACtBC,OAAO;IACPC,iBAAiB;IACjBC;EACS,CAAC,GAAAP,IAAA;EAAA,OACVL,KAAA,CAAAa,aAAA;IACEC,SAAS,EAAEb,UAAU,CAAC,yHAAyH,EAAE;MAC/I,aAAa,EAAEQ,sBAAsB;MACrC,kBAAkB,EAAEC;IACtB,CAAC,CAAE;IACHK,YAAY,EAAEJ,iBAAkB;IAChCK,YAAY,EAAEJ;EAAkB,GAE/BJ,SAAS,IAAIR,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAmB,GAAEX,kBAAwB,CAAC,EAC1E,CAACK,SAAS,IAAI,CAACD,OAAO,IAAID,QAAQ,EAClC,CAACE,SAAS,IAAID,OAAO,IACpBP,KAAA,CAAAa,aAAA,eAAOX,gBAAuB,CAE7B,CAAC;AAAA,CACP;AAED,SAASE,IAAI","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/components/CellWithData.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Price } from '@oanda/labs-widget-common';
 import { useRecords } from '../utils';
 import { Cell } from './Cell';
@@ -7,17 +7,35 @@ const CellWithData = _ref => {
     loading,
     record,
     target,
-    additionalBorderBottom
+    additionalBorderBottom,
+    setSelectedCurrency,
+    setSelectedPair
   } = _ref;
+  const [hovered, setHovered] = useState(false);
   const {
     updatedRecord,
     error
   } = useRecords(record, record.instrument ? target : null);
   const checkLoading = id => loading || !error && updatedRecord?.[id] === undefined;
+  const handleMouseEnter = () => {
+    setHovered(true);
+    const currency = record.instrument.substring(0, 3);
+    const pair = record.instrument.substring(record.instrument.length - 3);
+    setSelectedCurrency(currency);
+    setSelectedPair(pair);
+  };
+  const handleMouseLeave = () => {
+    setHovered(false);
+    setSelectedCurrency('');
+    setSelectedPair('');
+  };
   return React.createElement(Cell, {
     isLoading: checkLoading('buy'),
     isError: !!error,
-    additionalBorderBottom: additionalBorderBottom
+    additionalBorderBottom: additionalBorderBottom,
+    hovered: hovered,
+    mouseEnterHandler: handleMouseEnter,
+    mouseLeaveHandler: handleMouseLeave
   }, React.createElement(Price, {
     priceMovement: updatedRecord.buyPriceMovement,
     movementIndicator: "background"

package/dist/module/CurrencyCrossTableWidget/components/CellWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellWithData.js","names":["React","Price","useRecords","Cell","CellWithData","_ref","loading","record","target","additionalBorderBottom","updatedRecord","error","instrument","checkLoading","id","undefined","createElement","isLoading","isError","priceMovement","buyPriceMovement","movementIndicator","buy","toFixed","displayPrecision"],"sources":["../../../../src/CurrencyCrossTableWidget/components/CellWithData.tsx"],"sourcesContent":["import React from 'react';\nimport { Price } from '@oanda/labs-widget-common';\nimport { useRecords } from '../utils';\nimport { CellWithDataProps } from './types';\nimport { Cell } from './Cell';\n\nconst CellWithData = ({\n  loading,\n  record,\n  target,\n  additionalBorderBottom,\n}: CellWithDataProps) => {\n  const { updatedRecord, error } = useRecords(record, record.instrument ? target : null);\n\n  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <Cell\n      isLoading={checkLoading('buy')}\n      isError={!!error}\n      additionalBorderBottom={additionalBorderBottom}\n    >\n      <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator=\"background\">\n        <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n      </Price>\n    </Cell>\n  );\n};\n\nexport { CellWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,2BAA2B;AACjD,SAASC,UAAU,QAAQ,UAAU;AAErC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,MAAMC,YAAY,GAAGC,IAAA,IAKI;EAAA,IALH;IACpBC,OAAO;IACPC,MAAM;IACNC,MAAM;IACNC;EACiB,CAAC,GAAAJ,IAAA;EAClB,MAAM;IAAEK,aAAa;IAAEC;EAAM,CAAC,GAAGT,UAAU,CAACK,MAAM,EAAEA,MAAM,CAACK,UAAU,GAAGJ,MAAM,GAAG,IAAI,CAAC;EAEtF,MAAMK,YAAY,GAAIC,EAAU,IAAKR,OAAO,IAAK,CAACK,KAAK,IAAID,aAAa,GAAGI,EAAE,CAAC,KAAKC,SAAU;EAE7F,OACEf,KAAA,CAAAgB,aAAA,CAACb,IAAI;IACHc,SAAS,EAAEJ,YAAY,CAAC,KAAK,CAAE;IAC/BK,OAAO,EAAE,CAAC,CAACP,KAAM;IACjBF,sBAAsB,EAAEA;EAAuB,GAE/CT,KAAA,CAAAgB,aAAA,CAACf,KAAK;IAACkB,aAAa,EAAET,aAAa,CAACU,gBAAiB;IAACC,iBAAiB,EAAC;EAAY,GAClFrB,KAAA,CAAAgB,aAAA,eAAON,aAAa,CAACY,GAAG,EAAEC,OAAO,CAACb,aAAa,CAACc,gBAAgB,CAAQ,CACnE,CACH,CAAC;AAEX,CAAC;AAED,SAASpB,YAAY","ignoreList":[]}
+{"version":3,"file":"CellWithData.js","names":["React","useState","Price","useRecords","Cell","CellWithData","_ref","loading","record","target","additionalBorderBottom","setSelectedCurrency","setSelectedPair","hovered","setHovered","updatedRecord","error","instrument","checkLoading","id","undefined","handleMouseEnter","currency","substring","pair","length","handleMouseLeave","createElement","isLoading","isError","mouseEnterHandler","mouseLeaveHandler","priceMovement","buyPriceMovement","movementIndicator","buy","toFixed","displayPrecision"],"sources":["../../../../src/CurrencyCrossTableWidget/components/CellWithData.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Price } from '@oanda/labs-widget-common';\nimport { useRecords } from '../utils';\nimport { CellWithDataProps } from './types';\nimport { Cell } from './Cell';\n\nconst CellWithData = ({\n  loading,\n  record,\n  target,\n  additionalBorderBottom,\n  setSelectedCurrency,\n  setSelectedPair,\n}: CellWithDataProps) => {\n  const [hovered, setHovered] = useState(false);\n  const { updatedRecord, error } = useRecords(record, record.instrument ? target : null);\n\n  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);\n\n  const handleMouseEnter = () => {\n    setHovered(true);\n\n    const currency = record.instrument.substring(0, 3);\n    const pair = record.instrument.substring(record.instrument.length - 3);\n\n    setSelectedCurrency(currency);\n    setSelectedPair(pair);\n  };\n\n  const handleMouseLeave = () => {\n    setHovered(false);\n\n    setSelectedCurrency('');\n    setSelectedPair('');\n  };\n\n  return (\n    <Cell\n      isLoading={checkLoading('buy')}\n      isError={!!error}\n      additionalBorderBottom={additionalBorderBottom}\n      hovered={hovered}\n      mouseEnterHandler={handleMouseEnter}\n      mouseLeaveHandler={handleMouseLeave}\n    >\n      <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator=\"background\">\n        <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n      </Price>\n    </Cell>\n  );\n};\n\nexport { CellWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,KAAK,QAAQ,2BAA2B;AACjD,SAASC,UAAU,QAAQ,UAAU;AAErC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,MAAMC,YAAY,GAAGC,IAAA,IAOI;EAAA,IAPH;IACpBC,OAAO;IACPC,MAAM;IACNC,MAAM;IACNC,sBAAsB;IACtBC,mBAAmB;IACnBC;EACiB,CAAC,GAAAN,IAAA;EAClB,MAAM,CAACO,OAAO,EAAEC,UAAU,CAAC,GAAGb,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM;IAAEc,aAAa;IAAEC;EAAM,CAAC,GAAGb,UAAU,CAACK,MAAM,EAAEA,MAAM,CAACS,UAAU,GAAGR,MAAM,GAAG,IAAI,CAAC;EAEtF,MAAMS,YAAY,GAAIC,EAAU,IAAKZ,OAAO,IAAK,CAACS,KAAK,IAAID,aAAa,GAAGI,EAAE,CAAC,KAAKC,SAAU;EAE7F,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC7BP,UAAU,CAAC,IAAI,CAAC;IAEhB,MAAMQ,QAAQ,GAAGd,MAAM,CAACS,UAAU,CAACM,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IAClD,MAAMC,IAAI,GAAGhB,MAAM,CAACS,UAAU,CAACM,SAAS,CAACf,MAAM,CAACS,UAAU,CAACQ,MAAM,GAAG,CAAC,CAAC;IAEtEd,mBAAmB,CAACW,QAAQ,CAAC;IAC7BV,eAAe,CAACY,IAAI,CAAC;EACvB,CAAC;EAED,MAAME,gBAAgB,GAAGA,CAAA,KAAM;IAC7BZ,UAAU,CAAC,KAAK,CAAC;IAEjBH,mBAAmB,CAAC,EAAE,CAAC;IACvBC,eAAe,CAAC,EAAE,CAAC;EACrB,CAAC;EAED,OACEZ,KAAA,CAAA2B,aAAA,CAACvB,IAAI;IACHwB,SAAS,EAAEV,YAAY,CAAC,KAAK,CAAE;IAC/BW,OAAO,EAAE,CAAC,CAACb,KAAM;IACjBN,sBAAsB,EAAEA,sBAAuB;IAC/CG,OAAO,EAAEA,OAAQ;IACjBiB,iBAAiB,EAAET,gBAAiB;IACpCU,iBAAiB,EAAEL;EAAiB,GAEpC1B,KAAA,CAAA2B,aAAA,CAACzB,KAAK;IAAC8B,aAAa,EAAEjB,aAAa,CAACkB,gBAAiB;IAACC,iBAAiB,EAAC;EAAY,GAClFlC,KAAA,CAAA2B,aAAA,eAAOZ,aAAa,CAACoB,GAAG,EAAEC,OAAO,CAACrB,aAAa,CAACsB,gBAAgB,CAAQ,CACnE,CACH,CAAC;AAEX,CAAC;AAED,SAAShC,YAAY","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/components/TextCell.js

@@ -4,12 +4,14 @@ const TextCell = _ref => {
   let {
     label,
     emptyIndicator,
-    additionalBorderBottom
+    additionalBorderBottom,
+    hovered
   } = _ref;
   return React.createElement("span", {
     className: classnames('lw-flex-1 lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center', {
       'lw-border-b': additionalBorderBottom,
-      'lw-bg-border-primary': emptyIndicator
+      'lw-bg-border-primary': emptyIndicator,
+      'lw-font-semibold': hovered
     })
   }, label);
 };

package/dist/module/CurrencyCrossTableWidget/components/TextCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCell.js","names":["React","classnames","TextCell","_ref","label","emptyIndicator","additionalBorderBottom","createElement","className"],"sources":["../../../../src/CurrencyCrossTableWidget/components/TextCell.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { TextCellProps } from './types';\n\nconst TextCell = ({\n  label,\n  emptyIndicator,\n  additionalBorderBottom,\n}: TextCellProps) => (\n  <span className={classnames('lw-flex-1 lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center', {\n    'lw-border-b': additionalBorderBottom,\n    'lw-bg-border-primary': emptyIndicator,\n  })}\n  >\n    {label}\n  </span>\n);\n\nexport { TextCell };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,MAAMC,QAAQ,GAAGC,IAAA;EAAA,IAAC;IAChBC,KAAK;IACLC,cAAc;IACdC;EACa,CAAC,GAAAH,IAAA;EAAA,OACdH,KAAA,CAAAO,aAAA;IAAMC,SAAS,EAAEP,UAAU,CAAC,yFAAyF,EAAE;MACrH,aAAa,EAAEK,sBAAsB;MACrC,sBAAsB,EAAED;IAC1B,CAAC;EAAE,GAEAD,KACG,CAAC;AAAA,CACR;AAED,SAASF,QAAQ","ignoreList":[]}
+{"version":3,"file":"TextCell.js","names":["React","classnames","TextCell","_ref","label","emptyIndicator","additionalBorderBottom","hovered","createElement","className"],"sources":["../../../../src/CurrencyCrossTableWidget/components/TextCell.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { TextCellProps } from './types';\n\nconst TextCell = ({\n  label,\n  emptyIndicator,\n  additionalBorderBottom,\n  hovered,\n}: TextCellProps) => (\n  <span className={classnames('lw-flex-1 lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center', {\n    'lw-border-b': additionalBorderBottom,\n    'lw-bg-border-primary': emptyIndicator,\n    'lw-font-semibold': hovered,\n  })}\n  >\n    {label}\n  </span>\n);\n\nexport { TextCell };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,MAAMC,QAAQ,GAAGC,IAAA;EAAA,IAAC;IAChBC,KAAK;IACLC,cAAc;IACdC,sBAAsB;IACtBC;EACa,CAAC,GAAAJ,IAAA;EAAA,OACdH,KAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAER,UAAU,CAAC,yFAAyF,EAAE;MACrH,aAAa,EAAEK,sBAAsB;MACrC,sBAAsB,EAAED,cAAc;MACtC,kBAAkB,EAAEE;IACtB,CAAC;EAAE,GAEAH,KACG,CAAC;AAAA,CACR;AAED,SAASF,QAAQ","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/components/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/CurrencyCrossTableWidget/components/types.ts"],"sourcesContent":["import { DataRecord, LoaderSize } from '@oanda/labs-widget-common';\n\nexport interface CellWithDataProps {\n  loading: boolean;\n  record: DataRecord;\n  target: EventTarget | null;\n  additionalBorderBottom? : boolean;\n}\n\nexport interface CellProps {\n  children: React.ReactNode;\n  isLoading?: boolean;\n  isError?: boolean;\n  loaderSize?: LoaderSize;\n  additionalBorderBottom? : boolean;\n}\n\nexport interface TextCellProps {\n  label?: string;\n  emptyIndicator?: boolean;\n  additionalBorderBottom? : boolean;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/CurrencyCrossTableWidget/components/types.ts"],"sourcesContent":["import { DataRecord, LoaderSize } from '@oanda/labs-widget-common';\n\nexport interface CellWithDataProps {\n  loading: boolean;\n  record: DataRecord;\n  target: EventTarget | null;\n  additionalBorderBottom? : boolean;\n  setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;\n  setSelectedPair: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport interface CellProps {\n  children: React.ReactNode;\n  isLoading?: boolean;\n  isError?: boolean;\n  loaderSize?: LoaderSize;\n  additionalBorderBottom? : boolean;\n  hovered: boolean;\n  mouseEnterHandler: () => void;\n  mouseLeaveHandler: () => void;\n}\n\nexport interface TextCellProps {\n  label?: string;\n  emptyIndicator?: boolean;\n  additionalBorderBottom? : boolean;\n  hovered?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/types/CurrencyCrossTableWidget/components/Cell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CellProps } from './types';
-declare const Cell: ({ children, isError, isLoading, additionalBorderBottom, }: CellProps) => React.JSX.Element;
+declare const Cell: ({ children, isError, isLoading, additionalBorderBottom, hovered, mouseEnterHandler, mouseLeaveHandler, }: CellProps) => React.JSX.Element;
 export { Cell };

package/dist/types/CurrencyCrossTableWidget/components/CellWithData.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CellWithDataProps } from './types';
-declare const CellWithData: ({ loading, record, target, additionalBorderBottom, }: CellWithDataProps) => React.JSX.Element;
+declare const CellWithData: ({ loading, record, target, additionalBorderBottom, setSelectedCurrency, setSelectedPair, }: CellWithDataProps) => React.JSX.Element;
 export { CellWithData };

package/dist/types/CurrencyCrossTableWidget/components/TextCell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TextCellProps } from './types';
-declare const TextCell: ({ label, emptyIndicator, additionalBorderBottom, }: TextCellProps) => React.JSX.Element;
+declare const TextCell: ({ label, emptyIndicator, additionalBorderBottom, hovered, }: TextCellProps) => React.JSX.Element;
 export { TextCell };

package/dist/types/CurrencyCrossTableWidget/components/types.d.ts

@@ -4,6 +4,8 @@ export interface CellWithDataProps {
     record: DataRecord;
     target: EventTarget | null;
     additionalBorderBottom?: boolean;
+    setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedPair: React.Dispatch<React.SetStateAction<string>>;
 }
 export interface CellProps {
     children: React.ReactNode;
@@ -11,9 +13,13 @@ export interface CellProps {
     isError?: boolean;
     loaderSize?: LoaderSize;
     additionalBorderBottom?: boolean;
+    hovered: boolean;
+    mouseEnterHandler: () => void;
+    mouseLeaveHandler: () => void;
 }
 export interface TextCellProps {
     label?: string;
     emptyIndicator?: boolean;
     additionalBorderBottom?: boolean;
+    hovered?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-cross-table",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Labs Currency Cross Table",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -9,8 +9,8 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.150",
+    "@oanda/labs-widget-common": "^1.0.151",
     "@oanda/mono-i18n": "10.0.1"
   },
-  "gitHead": "bc89a81b65b183de5f94a884b9d338b4b06e582a"
+  "gitHead": "539c35bc4096ba9f6cc3ce08d803ca2551a02616"
 }

package/src/CurrencyCrossTableWidget/Main.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { useLiveRatesQuery } from '@oanda/labs-widget-common';
 import { MainProps } from './types';
 import { CellWithData, TextCell } from './components';
@@ -7,6 +7,9 @@ const Main = ({
   instruments,
   currencies,
 }: MainProps) => {
+  const [selectedCurrency, setSelectedCurrency] = useState('');
+  const [selectedPair, setSelectedPair] = useState('');
+
   const hasInstruments = instruments.length > 0;
 
   const { target, setQuery } = useLiveRatesQuery();
@@ -22,8 +25,13 @@ const Main = ({
     <div data-testid="currency-cross-table-wrapper" className="lw-w-full">
       <div className="lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary">
         <TextCell />
-        {currencies.map(((currency) => <TextCell key={currency} label={currency} />
-        ))}
+        {currencies.map(((pair) => (
+          <TextCell
+            key={pair}
+            label={pair}
+            hovered={pair === selectedPair}
+          />
+        )))}
       </div>
       {currencies.map(((currency, index, arr) => (
         <div
@@ -31,8 +39,9 @@ const Main = ({
           className="lw-flex lw-border-l lw-border-t lw-border-solid lw-border-border-primary"
         >
           <TextCell
-            label={`${currency}`}
+            label={currency}
             additionalBorderBottom={index === arr.length - 1}
+            hovered={currency === selectedCurrency}
           />
           {arr.map((pair) => (
             <Fragment key={`${currency}_${pair}`}>
@@ -45,6 +54,8 @@ const Main = ({
                   }}
                   target={target}
                   additionalBorderBottom={index === arr.length - 1}
+                  setSelectedCurrency={setSelectedCurrency}
+                  setSelectedPair={setSelectedPair}
                 />
               ) : (
                 <TextCell

package/src/CurrencyCrossTableWidget/components/Cell.tsx

@@ -4,11 +4,21 @@ import { CellProps } from './types';
 import { CELL_EMPTY_VALUE, CELL_LOADING_VALUE } from '../constant';
 
 const Cell = ({
-  children, isError, isLoading, additionalBorderBottom,
+  children,
+  isError,
+  isLoading,
+  additionalBorderBottom,
+  hovered,
+  mouseEnterHandler,
+  mouseLeaveHandler,
 }: CellProps) => (
-  <div className={classnames('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {
-    'lw-border-b': additionalBorderBottom,
-  })}
+  <div
+    className={classnames('lw-flex lw-h-[inherit] lw-flex-1 lw-items-center lw-justify-center lw-border-r lw-border-solid lw-border-border-primary', {
+      'lw-border-b': additionalBorderBottom,
+      'lw-font-semibold': hovered,
+    })}
+    onMouseEnter={mouseEnterHandler}
+    onMouseLeave={mouseLeaveHandler}
   >
     {isLoading && <div className="lw-px-3 lw-py-3.5">{CELL_LOADING_VALUE}</div>}
     {!isLoading && !isError && children}

package/src/CurrencyCrossTableWidget/components/CellWithData.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Price } from '@oanda/labs-widget-common';
 import { useRecords } from '../utils';
 import { CellWithDataProps } from './types';
@@ -9,16 +9,39 @@ const CellWithData = ({
   record,
   target,
   additionalBorderBottom,
+  setSelectedCurrency,
+  setSelectedPair,
 }: CellWithDataProps) => {
+  const [hovered, setHovered] = useState(false);
   const { updatedRecord, error } = useRecords(record, record.instrument ? target : null);
 
   const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);
 
+  const handleMouseEnter = () => {
+    setHovered(true);
+
+    const currency = record.instrument.substring(0, 3);
+    const pair = record.instrument.substring(record.instrument.length - 3);
+
+    setSelectedCurrency(currency);
+    setSelectedPair(pair);
+  };
+
+  const handleMouseLeave = () => {
+    setHovered(false);
+
+    setSelectedCurrency('');
+    setSelectedPair('');
+  };
+
   return (
     <Cell
       isLoading={checkLoading('buy')}
       isError={!!error}
       additionalBorderBottom={additionalBorderBottom}
+      hovered={hovered}
+      mouseEnterHandler={handleMouseEnter}
+      mouseLeaveHandler={handleMouseLeave}
     >
       <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator="background">
         <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>

package/src/CurrencyCrossTableWidget/components/TextCell.tsx

@@ -6,10 +6,12 @@ const TextCell = ({
   label,
   emptyIndicator,
   additionalBorderBottom,
+  hovered,
 }: TextCellProps) => (
   <span className={classnames('lw-flex-1 lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center', {
     'lw-border-b': additionalBorderBottom,
     'lw-bg-border-primary': emptyIndicator,
+    'lw-font-semibold': hovered,
   })}
   >
     {label}

package/src/CurrencyCrossTableWidget/components/types.ts

@@ -5,6 +5,8 @@ export interface CellWithDataProps {
   record: DataRecord;
   target: EventTarget | null;
   additionalBorderBottom? : boolean;
+  setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;
+  setSelectedPair: React.Dispatch<React.SetStateAction<string>>;
 }
 
 export interface CellProps {
@@ -13,10 +15,14 @@ export interface CellProps {
   isError?: boolean;
   loaderSize?: LoaderSize;
   additionalBorderBottom? : boolean;
+  hovered: boolean;
+  mouseEnterHandler: () => void;
+  mouseLeaveHandler: () => void;
 }
 
 export interface TextCellProps {
   label?: string;
   emptyIndicator?: boolean;
   additionalBorderBottom? : boolean;
+  hovered?: boolean;
 }