@skedulo/sked-ui 21.8.0 → 21.8.2

package/dist/components/emptystate/EmptyState.d.ts

@@ -5,5 +5,5 @@ interface IEmptyState extends React.HTMLAttributes<HTMLDivElement> {
     message: string;
     className?: string;
 }
-export declare const EmptyState: React.SFC<IEmptyState>;
+export declare const EmptyState: React.FC<IEmptyState>;
 export {};

package/dist/components/filter-bar/filter-list/FilterSearch.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IFilterItem } from '../interfaces';
 export interface IFilterSearchProps<T> {
     items: T[];
-    children: React.SFC<{
+    children: React.FC<{
         filteredItems: T[];
     }>;
     placeholder?: string;

package/dist/components/filter-bar/filter-list/RemoteSearch.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IFilterItem } from '../interfaces';
 export interface IRemoteSearchProps<T> {
     useFetch: (searchTerm: string) => Promise<T[]>;
-    children: React.SFC<{
+    children: React.FC<{
         fetchedItems: T[];
         searchTerm: string;
         isFetching: boolean;

package/dist/components/forms/ReadOnly.d.ts

@@ -7,5 +7,5 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     placeholderValue?: string;
     maxContentLength?: number;
 }
-export declare const ReadOnly: React.SFC<IProps>;
+export declare const ReadOnly: React.FC<IProps>;
 export {};

package/dist/components/forms/elements/FormElements.d.ts

@@ -46,7 +46,7 @@ export declare const FormLabel: React.FunctionComponent<{
  *  are displayed in a consistent fashion. The resulting input will need to have the class form-element__outline applied
  *  to it for us to hook into it to apply appropriate styling.
  */
-export declare const FormElementWrapper: React.SFC<FormElementWrapperProps & ValidationProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const FormElementWrapper: React.FC<FormElementWrapperProps & ValidationProps & React.HTMLAttributes<HTMLDivElement>>;
 /**
  * Use when a validation error isn’t tied to a particular field
  */

package/dist/components/inline-banner/InlineBanner.d.ts

@@ -6,4 +6,4 @@ export interface IInlineBannerProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * Displays a inline banner with various styling depending on the type.
  */
-export declare const InlineBanner: React.SFC<IInlineBannerProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const InlineBanner: React.FC<IInlineBannerProps & React.HTMLAttributes<HTMLDivElement>>;

package/dist/components/loader/spinner/LoadingSpinner.d.ts

@@ -17,5 +17,5 @@ interface ILoadingSpinnerProps {
  * Loading Spinner inherits the color used in the parent element.
  * It accepts a size prop which defines the size of the spinner in px.
  */
-export declare const LoadingSpinner: React.SFC<ILoadingSpinnerProps>;
+export declare const LoadingSpinner: React.FC<ILoadingSpinnerProps>;
 export {};

package/dist/components/pagination/PaginationCount/PaginationCount.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { IPagination } from '../interfaces';
-export declare const PaginationCount: React.SFC<IPagination>;
+export declare const PaginationCount: React.FC<IPagination>;

package/dist/components/pagination/PaginationPages/PaginationPages.d.ts

@@ -11,4 +11,4 @@ export declare const Page: React.FC<{
     isCurrent: boolean;
     onClick?: (event: React.MouseEvent) => void;
 }>;
-export declare const PaginationPages: React.SFC<IPagination>;
+export declare const PaginationPages: React.FC<IPagination>;

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

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

package/dist/index.js

@@ -6755,6 +6755,7 @@ var OverflowTooltip = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "isTextOverflow",
     value: function isTextOverflow() {
+      if (!this._element) return false;
       return this._element.clientWidth < this._element.scrollWidth;
     }
   }, {
@@ -58492,20 +58493,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__(739);
+/* 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__(739);
+
 
 
 var _excluded = ["className", "children"],
     _excluded2 = ["className", "children"],
-    _excluded3 = ["className", "children"],
+    _excluded3 = ["className", "children", "style"],
     _excluded4 = ["className", "children"];
 
 
@@ -58513,62 +58517,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);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skedulo/sked-ui",
-  "version": "21.8.0",
+  "version": "21.8.2",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",