@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Table/Row.js

@@ -1,79 +1,24 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactUid = require('react-uid');
-var utils_keyboard = require('../../utils/keyboard.js');
-var Row_module = require('./Row.module.scss.js');
-
-const Row = ({
-  children,
-  className,
-  style,
-  role,
-  ariaRowIndex,
-  onClick
-}) => {
-  const onKeyDown = React.useCallback(event => {
-    event.preventDefault();
-    if (utils_keyboard.keyIsOneOf(event, 'Enter') && onClick) {
-      onClick();
-    }
-  }, [onClick]);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": "table-cell-row",
-    className: cn(Row_module.default.row, {
-      [Row_module.default.clickable]: !!onClick
-    }, className),
-    style: style,
-    "aria-rowindex": ariaRowIndex,
-    role: role,
-    tabIndex: onClick ? 0 : undefined,
-    onKeyDown: onClick ? onKeyDown : undefined,
-    onClick: onClick
-  }, children);
+import React, { useCallback } from 'react';
+import cn from 'classnames';
+import { useUID } from 'react-uid';
+import { keyIsOneOf } from '../../utils/keyboard';
+import styles from './Row.module.scss';
+export const Row = ({ children, className, style, role, ariaRowIndex, onClick }) => {
+    const onKeyDown = useCallback((event) => {
+        event.preventDefault();
+        if (keyIsOneOf(event, 'Enter') && onClick) {
+            onClick();
+        }
+    }, [onClick]);
+    return (React.createElement("div", { "data-test": "table-cell-row", className: cn(styles.row, {
+            [styles.clickable]: !!onClick,
+        }, className), style: style, "aria-rowindex": ariaRowIndex, role: role, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? onKeyDown : undefined, onClick: onClick }, children));
 };
-const DefaultAnchor = props => /*#__PURE__*/React.createElement("a", {
-  ...props
-});
-const LinkRow = ({
-  children,
-  className,
-  style,
-  role,
-  ariaRowIndex,
-  href,
-  AnchorComponent = DefaultAnchor
-}) => {
-  const anchorId = reactUid.useUID();
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": "table-cell-row",
-    className: cn(Row_module.default.linkRow, className),
-    role: role,
-    "aria-rowindex": ariaRowIndex,
-    "aria-owns": anchorId
-  }, /*#__PURE__*/React.createElement(AnchorComponent, {
-    className: Row_module.default.link,
-    style: style,
-    href: href,
-    id: anchorId
-  }, children));
+const DefaultAnchor = (props) => React.createElement("a", { ...props });
+export const LinkRow = ({ children, className, style, role, ariaRowIndex, href, AnchorComponent = DefaultAnchor, }) => {
+    const anchorId = useUID();
+    return (React.createElement("div", { "data-test": "table-cell-row", className: cn(styles.linkRow, className), role: role, "aria-rowindex": ariaRowIndex, "aria-owns": anchorId },
+        React.createElement(AnchorComponent, { className: styles.link, style: style, href: href, id: anchorId }, children)));
 };
-const HeaderRow = ({
-  children,
-  className,
-  style,
-  role,
-  ariaRowIndex
-}) => (/*#__PURE__*/React.createElement("div", {
-  "data-test": "table-header-row",
-  className: cn(Row_module.default.row, className),
-  style: style,
-  role: role,
-  "aria-rowindex": ariaRowIndex
-}, children));
-
-exports.HeaderRow = HeaderRow;
-exports.LinkRow = LinkRow;
-exports.Row = Row;
-//# sourceMappingURL=Row.js.map
+export const HeaderRow = ({ children, className, style, role, ariaRowIndex }) => (React.createElement("div", { "data-test": "table-header-row", className: cn(styles.row, className), style: style, role: role, "aria-rowindex": ariaRowIndex }, children));
+//# sourceMappingURL=Row.js.map

package/lib/components/Table/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../src/components/Table/Row.tsx"],"sourcesContent":[null],"names":["Row","children","className","style","role","ariaRowIndex","onClick","onKeyDown","useCallback","event","preventDefault","keyIsOneOf","React","createElement","cn","styles","row","clickable","tabIndex","undefined","DefaultAnchor","props","LinkRow","href","AnchorComponent","anchorId","useUID","linkRow","link","id","HeaderRow"],"mappings":";;;;;;;;AAaO,MAAMA,GAAG,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,KAAK;EAAEC,IAAI;EAAEC,YAAY;AAAEC,EAAAA;AAAO,CAA+B,KAAI;AAC9G,EAAA,MAAMC,SAAS,GAAGC,iBAAW,CAC1BC,KAAoC,IAAI;IACvCA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAIC,yBAAU,CAACF,KAAK,EAAE,OAAO,CAAC,IAAIH,OAAO,EAAE;AACzCA,MAAAA,OAAO,EAAE;AACX,IAAA;AACF,EAAA,CAAC,EACD,CAACA,OAAO,CAAC,CACV;AAED,EAAA,oBACEM,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EACY,gBAAgB;AAC1BX,IAAAA,SAAS,EAAEY,EAAE,CACXC,kBAAM,CAACC,GAAG,EACV;AACE,MAAA,CAACD,kBAAM,CAACE,SAAS,GAAG,CAAC,CAACX;KACvB,EACDJ,SAAS,CACV;AACDC,IAAAA,KAAK,EAAEA,KAAK;AAAA,IAAA,eAAA,EACGE,YAAY;AAC3BD,IAAAA,IAAI,EAAEA,IAAI;AACVc,IAAAA,QAAQ,EAAEZ,OAAO,GAAG,CAAC,GAAGa,SAAS;AACjCZ,IAAAA,SAAS,EAAED,OAAO,GAAGC,SAAS,GAAGY,SAAS;AAC1Cb,IAAAA,OAAO,EAAEA;KAERL,QAAQ,CACL;AAEV;AAEA,MAAMmB,aAAa,GAAiDC,KAAK,iBAAKT,KAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;EAAA,GAAOQ;AAAK,CAAA,CAAI;AAEvF,MAAMC,OAAO,GAAGA,CAAC;EACtBrB,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,YAAY;EACZkB,IAAI;AACJC,EAAAA,eAAe,GAAGJ;AAAa,CACC,KAAI;AACpC,EAAA,MAAMK,QAAQ,GAAGC,eAAM,EAAE;AAEzB,EAAA,oBACEd;iBAAe,gBAAgB;IAACV,SAAS,EAAEY,EAAE,CAACC,kBAAM,CAACY,OAAO,EAAEzB,SAAS,CAAC;AAAEE,IAAAA,IAAI,EAAEA,IAAI;AAAA,IAAA,eAAA,EAAiBC,YAAY;AAAA,IAAA,WAAA,EAAaoB;AAAQ,GAAA,eACpIb,KAAA,CAAAC,aAAA,CAACW,eAAe,EAAA;IAACtB,SAAS,EAAEa,kBAAM,CAACa,IAAI;AAAEzB,IAAAA,KAAK,EAAEA,KAAK;AAAEoB,IAAAA,IAAI,EAAEA,IAAI;AAAEM,IAAAA,EAAE,EAAEJ;KACpExB,QAAQ,CACO,CACd;AAEV;AAEO,MAAM6B,SAAS,GAAGA,CAAC;EAAE7B,QAAQ;EAAEC,SAAS;EAAEC,KAAK;EAAEC,IAAI;AAAEC,EAAAA;AAAY,CAAqC,mBAC7GO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,EAAA,WAAA,EAAe,kBAAkB;EAACX,SAAS,EAAEY,EAAE,CAACC,kBAAM,CAACC,GAAG,EAAEd,SAAS,CAAC;AAAEC,EAAAA,KAAK,EAAEA,KAAK;AAAEC,EAAAA,IAAI,EAAEA,IAAI;AAAA,EAAA,eAAA,EAAiBC;AAAY,CAAA,EAC1HJ,QAAQ,CACL;;;;;;"}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../src/components/Table/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,WAAW,EAAsD,MAAM,OAAO,CAAA;AACrH,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAOtC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAA+B,EAAE,EAAE;IAC9G,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAAoC,EAAE,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,OAAO,EAAE,CAAC;YAC1C,OAAO,EAAE,CAAA;QACX,CAAC;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,0CACY,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,GAAG,EACV;YACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO;SAC9B,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,mBACG,YAAY,EAC3B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,OAAO,IAEf,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAgD,CAAC,KAAK,EAAE,EAAE,CAAC,8BAAO,KAAK,GAAI,CAAA;AAE9F,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,eAAe,GAAG,aAAa,GACC,EAAE,EAAE;IACpC,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAA;IAEzB,OAAO,CACL,0CAAe,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,eAAa,QAAQ;QACpI,oBAAC,eAAe,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,IAC5E,QAAQ,CACO,CACd,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAqC,EAAE,EAAE,CAAC,CAClH,0CAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,IAC1H,QAAQ,CACL,CACP,CAAA"}

package/lib/components/Table/Row.module.scss

@@ -0,0 +1,59 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+@mixin rowBase {
+  display: flex;
+  width: 100%;
+
+  &:nth-child(even) {
+    background-color: c.$colorNeutralLighter;
+  }
+}
+
+.row {
+  @include c.typographyBodySmall;
+  @include rowBase;
+
+  &.clickable {
+    cursor: pointer;
+
+    &:focus-visible {
+      @include h.outlineSimple;
+
+      // Do not remove outline for high-contrast modes
+      // https://stackoverflow.com/a/52616313
+      outline: c.$outlineWidth solid transparent;
+      background-color: #e2e7fa;
+    }
+
+    &:hover {
+      font-weight: bold;
+      background-color: #e2e7fa;
+    }
+  }
+}
+
+.linkRow {
+  cursor: pointer;
+  @include rowBase;
+
+  .link {
+    text-decoration: none;
+    background-color: inherit;
+    @include rowBase;
+
+    &:focus-visible {
+      @include h.outlineSimple;
+
+      // Do not remove outline for high-contrast modes
+      // https://stackoverflow.com/a/52616313
+      outline: c.$outlineWidth solid transparent;
+      background-color: #e2e7fa;
+    }
+
+    &:hover {
+      font-weight: bold;
+      background-color: #e2e7fa;
+    }
+  }
+}