@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/table/lib/TableRow.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,28 +18,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableRow = exports.TableRowState = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var polished_1 = require("polished");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var Table_1 = require("./Table");
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const polished_1 = require("polished");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const Table_1 = require("./Table");
 var TableRowState;
 (function (TableRowState) {
     TableRowState[TableRowState["Error"] = 0] = "Error";
@@ -60,10 +38,10 @@ var TableRowState;
     TableRowState[TableRowState["Hover"] = 4] = "Hover";
     TableRowState[TableRowState["Selected"] = 5] = "Selected";
 })(TableRowState = exports.TableRowState || (exports.TableRowState = {}));
-var errorColor = tokens_1.statusColors.error;
-var errorColorLight = tokens_1.colors.cinnamon200;
-var alertColor = tokens_1.statusColors.warning;
-var alertColorLight = tokens_1.colors.cantaloupe200;
+const errorColor = tokens_1.statusColors.error;
+const errorColorLight = tokens_1.colors.cinnamon200;
+const alertColor = tokens_1.statusColors.warning;
+const alertColorLight = tokens_1.colors.cantaloupe200;
 function makeColoredRow(_bgColor, _borderColor) {
     return {
         backgroundColor: _bgColor,
@@ -74,7 +52,7 @@ function makeColoredRow(_bgColor, _borderColor) {
             left: 0,
             top: -Table_1.borderWidth,
             content: '""',
-            width: "calc(100% + " + Table_1.borderWidth + "px)",
+            width: `calc(100% + ${Table_1.borderWidth}px)`,
             height: Table_1.borderWidth,
             backgroundColor: _borderColor,
         },
@@ -83,10 +61,10 @@ function makeColoredRow(_bgColor, _borderColor) {
             bottom: -Table_1.borderWidth,
         },
         '&:first-of-type': {
-            boxShadow: "inset " + Table_1.borderWidth + "px 0 0 " + _borderColor,
+            boxShadow: `inset ${Table_1.borderWidth}px 0 0 ${_borderColor}`,
         },
         '&:last-child': {
-            boxShadow: "inset -" + Table_1.borderWidth + "px 0 0 " + _borderColor,
+            boxShadow: `inset -${Table_1.borderWidth}px 0 0 ${_borderColor}`,
             '&:before, &:after': {
                 width: '100%',
             },
@@ -94,7 +72,7 @@ function makeColoredRow(_bgColor, _borderColor) {
     };
 }
 function makeColoredRowStyle(_bgColor, _borderColor) {
-    var lightenedBg = polished_1.rgba(_bgColor, 0.2);
+    const lightenedBg = polished_1.rgba(_bgColor, 0.2);
     return {
         'th, td': [
             makeColoredRow(lightenedBg, _bgColor),
@@ -117,10 +95,10 @@ function makeBorderlessStyle(_bgColor) {
         },
     };
 }
-var StyledTableRow = styled_1.default('tr')({
+const StyledTableRow = styled_1.default('tr')({
     'th, td': {
         backgroundColor: tokens_1.colors.frenchVanilla100,
-        padding: tokens_1.space.xs + " " + tokens_1.space.xxs,
+        padding: `${tokens_1.space.xs} ${tokens_1.space.xxs}`,
         fontSize: 13,
         borderRight: Table_1.cellBorder,
         borderBottom: Table_1.cellBorder,
@@ -144,36 +122,32 @@ var StyledTableRow = styled_1.default('tr')({
             borderBottom: 'none',
         },
     },
-}, function (_a) {
-    var header = _a.header;
-    return header && {
-        '&:last-child': {
-            'th, td': {
-                borderBottom: '1px solid transparent',
-            },
-        },
+}, ({ header }) => header && {
+    '&:last-child': {
         'th, td': {
-            position: 'relative',
-            backgroundColor: tokens_1.colors.frenchVanilla100,
-            verticalAlign: 'middle',
+            borderBottom: '1px solid transparent',
+        },
+    },
+    'th, td': {
+        position: 'relative',
+        backgroundColor: tokens_1.colors.frenchVanilla100,
+        verticalAlign: 'middle',
+        '&:after': {
+            position: 'absolute',
+            left: 0,
+            bottom: -Table_1.borderWidth,
+            content: '""',
+            width: `calc(100% + ${Table_1.borderWidth}px)`,
+            height: Table_1.borderWidth,
+            backgroundColor: Table_1.borderColor,
+        },
+        '&:last-child': {
             '&:after': {
-                position: 'absolute',
-                left: 0,
-                bottom: -Table_1.borderWidth,
-                content: '""',
-                width: "calc(100% + " + Table_1.borderWidth + "px)",
-                height: Table_1.borderWidth,
-                backgroundColor: Table_1.borderColor,
-            },
-            '&:last-child': {
-                '&:after': {
-                    width: '100%',
-                },
+                width: '100%',
             },
         },
-    };
-}, function (_a) {
-    var state = _a.state;
+    },
+}, ({ state }) => {
     switch (state) {
         case TableRowState.InputError:
             return makeBorderlessStyle(errorColor);
@@ -217,9 +191,8 @@ var StyledTableRow = styled_1.default('tr')({
 });
 exports.TableRow = common_1.createComponent('tr')({
     displayName: 'TableRow',
-    Component: function (_a, ref, Element) {
-        var state = _a.state, header = _a.header, children = _a.children, elemProps = __rest(_a, ["state", "header", "children"]);
-        return (React.createElement(StyledTableRow, __assign({ as: Element, ref: ref, state: state, header: header }, elemProps), children));
+    Component: ({ state, header, children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledTableRow, Object.assign({ as: Element, ref: ref, state: state, header: header }, elemProps), children));
     },
     subComponents: {
         State: TableRowState,