@skedulo/sked-ui 0.0.2-react-18-upgrade-test → 0.0.2-react-18-preview

package/dist/components/table/Table.d.ts

@@ -6,11 +6,11 @@ export interface IHeaderCell {
 }
 export declare const Table: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>>;
 export declare const TableHeadRow: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>>;
-export declare const TableHead: React.FC<React.PropsWithChildren<{
+export declare const TableHead: React.FC<{
     cells: IHeaderCell[];
     sticky?: boolean;
     className?: string;
-}>>;
+}>;
 export declare const TableBody: React.FC<React.PropsWithChildren<unknown>>;
 export declare const TableRow: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>>;
 export declare const TableCell: React.FC<React.PropsWithChildren<React.TdHTMLAttributes<HTMLTableDataCellElement>>>;

package/dist/components/tabs/Tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="lodash" />
 import * as React from 'react';
 import { ITab as Tab, ITabsProps, ITabsState, Theme } from './interfaces';
-export declare type ITab = Tab;
+export type ITab = Tab;
 export declare const getClassNamesByTheme: (theme: string, isActive: boolean, isFocused?: boolean, className?: string) => {
     menuItem: string;
     subMenuItem: string;

package/dist/components/tabs/Tabs/interfaces.d.ts

@@ -3,7 +3,7 @@ export declare enum Theme {
     SUB = "sub",
     GLOBAL = "global"
 }
-export declare type AsMenuType = 'a' | 'span';
+export type AsMenuType = 'a' | 'span';
 export interface ITab {
     title: string;
     route: string;

package/dist/components/text/MultilineContent.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface IMultilineContentProps extends React.HTMLAttributes<HTMLSpanElement> {
     content: string;
 }
-export declare const MultilineContent: React.FC<React.PropsWithChildren<IMultilineContentProps>>;
+export declare const MultilineContent: React.FC<IMultilineContentProps>;
 export {};

package/dist/index.js

@@ -6804,6 +6804,7 @@ var OverflowTooltip = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "isTextOverflow",
     value: function isTextOverflow() {
+      if (!this._element) return false;
       return this._element.clientWidth < this._element.scrollWidth;
     }
   }, {
@@ -57489,20 +57490,23 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TableBody", function() { return TableBody; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TableRow", function() { return TableRow; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TableCell", function() { return TableCell; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _utils_Strings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(738);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(23);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(24);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _utils_Strings__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(738);
+
 
 
 var _excluded = ["className", "children"],
     _excluded2 = ["className", "children"],
-    _excluded3 = ["className", "children"],
+    _excluded3 = ["className", "children", "style"],
     _excluded4 = ["className", "children"];
 
 
@@ -57510,62 +57514,73 @@ var _excluded = ["className", "children"],
 var Table = function Table(props) {
   var className = props.className,
       children = props.children,
-      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, _excluded);
+      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(props, _excluded);
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("table", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-table sk-w-full sk-border-collapse', className)
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("table", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-table sk-w-full sk-border-collapse', className)
   }, otherProps), children);
 };
 var TableHeadRow = function TableHeadRow(props) {
   var className = props.className,
       children = props.children,
-      rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, _excluded2);
+      rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(props, _excluded2);
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("tr", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-h-10 sk-text-left', className)
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("tr", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-h-10 sk-text-left', className)
   }, rest), children);
 };
 var TableHead = function TableHead(_ref) {
   var cells = _ref.cells,
       sticky = _ref.sticky,
       className = _ref.className;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("thead", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("thead", {
     className: className
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"](TableHeadRow, null, cells.map(function (cell) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("th", {
-      "data-sk-name": "th-".concat(Object(_utils_Strings__WEBPACK_IMPORTED_MODULE_4__["createTestLabel"])(cell.name)),
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"](TableHeadRow, null, cells.map(function (cell) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("th", {
+      "data-sk-name": "th-".concat(Object(_utils_Strings__WEBPACK_IMPORTED_MODULE_5__["createTestLabel"])(cell.name)),
       key: cell.name,
-      className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-th sk-bg-neutral-250 sk-text-neutral-650 sk-text-xxs sk-uppercase sk-font-medium', {
+      className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-th sk-bg-neutral-250 sk-text-neutral-650 sk-text-xxs sk-uppercase sk-font-medium', {
         'sk-sticky sk-top-0': sticky
       }, cell.className),
       style: {
         width: cell.width || '',
         minWidth: '120px'
       }
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("span", {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("span", {
       className: "sk-th-content sk-px-3"
     }, cell.name));
   })));
 };
 var TableBody = function TableBody(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("tbody", null, props.children);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("tbody", null, props.children);
 };
 var TableRow = function TableRow(props) {
+  var _React$useState = react__WEBPACK_IMPORTED_MODULE_3__["useState"]({}),
+      _React$useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_React$useState, 2),
+      inlineStyle = _React$useState2[0],
+      setInlineStyle = _React$useState2[1];
+
   var className = props.className,
       children = props.children,
-      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, _excluded3);
+      style = props.style,
+      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(props, _excluded3); // Hack to fix weird issue with border-bottom not displaying on Platform List page on initial page load after React 18 upgrade
+
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("tr", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-border-b sk-border-neutral-350 sk-leading-tight', className)
+  react__WEBPACK_IMPORTED_MODULE_3__["useEffect"](function () {
+    setInlineStyle(style);
+  }, [style]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("tr", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-border-b sk-border-neutral-350 sk-leading-tight', className),
+    style: inlineStyle
   }, otherProps), children);
 };
 var TableCell = function TableCell(props) {
   var className = props.className,
       children = props.children,
-      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, _excluded4);
+      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(props, _excluded4);
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("td", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-p-3 sk-text-xs sk-text-neutral-850', className)
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("td", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-p-3 sk-text-xs sk-text-neutral-850', className)
   }, otherProps), children);
 };
 
@@ -58978,6 +58993,7 @@ var Loading = function Loading(_ref) {
     right: 'sk-text-right'
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    "data-testid": "loading-throb",
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('loading-throb', className, alignment[align])
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
     className: "loading-throb__bounce loading-throb__bounce--first"
@@ -64651,6 +64667,7 @@ var Pill = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["forwardRef"](functio
       otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, _excluded);
 
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, otherProps, {
+    "data-sk-name": "sked-pill",
     ref: ref,
     className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-pl-2 sk-font-medium sk-text-xs sk-rounded sk-inline-flex sk-items-center sked-pill-leading', {
       'sk-bg-neutral-750 sk-text-white': theme === 'dark' && !disabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skedulo/sked-ui",
-  "version": "0.0.2-react-18-upgrade-test",
+  "version": "v0.0.2-react-18-preview",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -91,6 +91,7 @@
     "@storybook/addons": "^6.5.12",
     "@storybook/react": "^6.5.12",
     "@storybook/theming": "^6.5.12",
+    "@testing-library/dom": "8.20.1",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "13.4.0",
     "@types/classnames": "^2.3.1",
@@ -140,7 +141,7 @@
     "style-loader": "^2.0.0",
     "svg-inline-loader": "^0.8.2",
     "tailwindcss": "^1.4.6",
-    "typescript": "^4.8.3",
+    "typescript": "^4.9.5",
     "webpack": "^4.46.0",
     "webpack-cli": "^4.10.0"
   },
@@ -151,8 +152,8 @@
     "@types/react-dom": ">=16.0.7",
     "classnames": ">=2.2.6",
     "lodash": ">=4",
-    "react": ">=16.2.0",
-    "react-dom": ">=16.2.0"
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.5.4",
@@ -169,7 +170,7 @@
     "react-textarea-autosize": "8.3.2"
   },
   "resolutions": {
-    "@types/react": "17.0.6"
+    "@types/react": "18.3.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": [