@skedulo/sked-ui 21.7.4 → 21.8.1

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

@@ -3,4 +3,4 @@ import { ISelectItem, SelectBox } from './interfaces';
 /**
  * A searchable select component. Just like it's native counterpart, only a valid listed option is allowed.
  */
-export declare const SearchSelect: <T extends ISelectItem<any>>({ id, name, items, placeholder, autoFocus, className, icon, onSelectedItemChange, disabled, onMenuToggle, loading, itemToString, ItemRenderer, filterHandler, itemIsValid, getNewItemData, ...rest }: SelectBox<T>) => JSX.Element;
+export declare const SearchSelect: <T extends ISelectItem<any>>({ id, name, items, placeholder, autoFocus, className, icon, onSelectedItemChange, disabled, onMenuToggle, loading, itemToString, ItemRenderer, filterHandler, itemIsValid, getNewItemData, inputProps, ...rest }: SelectBox<T>) => JSX.Element;

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+/// <reference types="@emotion/core" />
 import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { DOMAttributes } from 'react';
 import { IconNames } from '../../icon/Icon';
 export interface ISelectItem<T = any> {
     value: T;
@@ -83,6 +84,8 @@ interface ISelectBox<T extends ISelectItem> extends ISearchSelect<T> {
 export declare type SelectBox<T extends ISelectItem> = ISelectBox<T> & CommonComboBoxTypes<T> & Pick<UseComboboxProps<T>, 'initialSelectedItem' | 'selectedItem'> & {
     onMenuToggle?: (isOpen: boolean) => void;
     loading?: boolean;
+} & {
+    inputProps?: DOMAttributes<HTMLDivElement>;
 };
 export declare type AsyncSelectBox<T extends ISelectItem> = Omit<SelectBox<T>, 'items' | 'itemIsValid' | 'getNewItemData'> & IAsyncSearchSelect<T>;
 export interface IMultiSearchSelect<T extends ISelectItem> extends ISearchSelect<T> {

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;
     }
   }, {
@@ -45501,7 +45502,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var _excluded = ["id", "name", "items", "placeholder", "autoFocus", "className", "icon", "onSelectedItemChange", "disabled", "onMenuToggle", "loading", "itemToString", "ItemRenderer", "filterHandler", "itemIsValid", "getNewItemData"];
+var _excluded = ["id", "name", "items", "placeholder", "autoFocus", "className", "icon", "onSelectedItemChange", "disabled", "onMenuToggle", "loading", "itemToString", "ItemRenderer", "filterHandler", "itemIsValid", "getNewItemData", "inputProps"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -45550,6 +45551,7 @@ var SearchSelect = function SearchSelect(_ref) {
       label: input
     }];
   } : _ref$getNewItemData,
+      restInputProps = _ref.inputProps,
       rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(_ref, _excluded);
 
   var _React$useState = react__WEBPACK_IMPORTED_MODULE_3__["useState"](items),
@@ -45662,14 +45664,15 @@ var SearchSelect = function SearchSelect(_ref) {
       getItemProps = _useCombobox.getItemProps,
       openMenu = _useCombobox.openMenu;
 
-  var inputProps = {
+  var inputProps = _objectSpread({
     refKey: 'inputRef',
     id: id,
     onClick: openMenu,
     name: name,
     disabled: disabled,
     autoFocus: autoFocus
-  };
+  }, restInputProps);
+
   var trigger = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_select_components__WEBPACK_IMPORTED_MODULE_9__["SearchSelectTrigger"], {
     comboboxProps: // @ts-ignore: suppressRefError isn't in the types
     getComboboxProps({}, {
@@ -58490,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"];
 
 
@@ -58511,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.7.4",
+  "version": "21.8.1",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",