@datarobot/design-system 30.5.0 → 30.6.1

package/js/bundle/bundle.js

@@ -60232,7 +60232,8 @@ var VALIDATION_RULE_TYPES = {
   SUCCESS_INFO: 'success-info',
   IN_PROGRESS: 'in-progress',
   EXPIRED: 'expired',
-  DISABLED: 'disabled'
+  DISABLED: 'disabled',
+  THINKING: 'thinking'
 };
 var MESSAGE_DISPLAY_LOCATION = {
   INLINE: 'inline',
@@ -69754,8 +69755,9 @@ var Markdown = function Markdown(_ref) {
 /* harmony import */ var _fortawesome_free_solid_svg_icons_faCircleNotch__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons/faCircleNotch */ "@fortawesome/free-solid-svg-icons/faCircleNotch");
 /* harmony import */ var _fortawesome_free_solid_svg_icons_faCircleNotch__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_free_solid_svg_icons_faCircleNotch__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _font_awesome_icon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../font-awesome-icon */ "./src/components/font-awesome-icon/index.ts");
-/* harmony import */ var _message_less__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./message.less */ "./src/components/message/message.less");
-/* harmony import */ var _message_less__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_message_less__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var _thinking_icon__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./thinking-icon */ "./src/components/message/thinking-icon.tsx");
+/* harmony import */ var _message_less__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./message.less */ "./src/components/message/message.less");
+/* harmony import */ var _message_less__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_message_less__WEBPACK_IMPORTED_MODULE_10__);
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
@@ -69770,6 +69772,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
 var MESSAGE_TYPES = {
   DISABLED: 'disabled',
   INFO: 'info',
@@ -69778,7 +69781,8 @@ var MESSAGE_TYPES = {
   SUCCESS: 'success',
   SUCCESS_INFO: 'success-info',
   IN_PROGRESS: 'in-progress',
-  EXPIRED: 'expired'
+  EXPIRED: 'expired',
+  THINKING: 'thinking'
 };
 var MESSAGE_ICON_PLACEMENT = {
   LEFT: 'left',
@@ -69833,6 +69837,10 @@ function getMessageConfig(icons, type) {
         icon: icon,
         className: 'expired'
       };
+    case MESSAGE_TYPES.THINKING:
+      return {
+        className: 'thinking'
+      };
     default:
       return {
         icon: icon,
@@ -69863,22 +69871,135 @@ function Message(_ref) {
     _ref$icons = _ref.icons,
     icons = _ref$icons === void 0 ? MESSAGE_ICONS : _ref$icons;
   var messageConfig = getMessageConfig(icons, type);
-  var icon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_8__.FontAwesomeIcon, {
-    icon: messageConfig.icon,
-    spin: type === MESSAGE_TYPES.IN_PROGRESS
-  });
+  var renderIcon = function renderIcon() {
+    if (type === MESSAGE_TYPES.THINKING) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_thinking_icon__WEBPACK_IMPORTED_MODULE_9__.ThinkingIcon, {
+        size: size
+      });
+    }
+    if (messageConfig.icon) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_8__.FontAwesomeIcon, {
+        icon: messageConfig.icon,
+        spin: type === MESSAGE_TYPES.IN_PROGRESS
+      });
+    }
+    return null;
+  };
+  var icon = renderIcon();
+  var resolvedChildren = type === MESSAGE_TYPES.THINKING ? children !== null && children !== void 0 ? children : 'Thinking' : children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('message-component', isStatus && 'status', messageConfig.className, {
       'center-status': isCentered,
       sm: size === MESSAGE_SIZES.SM
-    },
-    // global styles for now, should be moved into the components styles, once we message css usages to React
-    className, "with-".concat(iconPlacement, "-icon")),
+    }, className, "with-".concat(iconPlacement, "-icon")),
     "test-id": testId,
     id: id,
     "aria-live": "polite",
     role: messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.role
-  }, iconPlacement === MESSAGE_ICON_PLACEMENT.LEFT && icon, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, children), iconPlacement === MESSAGE_ICON_PLACEMENT.RIGHT && icon);
+  }, iconPlacement === MESSAGE_ICON_PLACEMENT.LEFT && icon, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, resolvedChildren), iconPlacement === MESSAGE_ICON_PLACEMENT.RIGHT && icon);
+}
+
+/***/ }),
+
+/***/ "./src/components/message/thinking-icon.less":
+/*!***************************************************!*\
+  !*** ./src/components/message/thinking-icon.less ***!
+  \***************************************************/
+/***/ (() => {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "./src/components/message/thinking-icon.tsx":
+/*!**************************************************!*\
+  !*** ./src/components/message/thinking-icon.tsx ***!
+  \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ThinkingIcon: () => (/* binding */ ThinkingIcon)
+/* harmony export */ });
+/* unused harmony export THINKING_ICON_SIZES */
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _thinking_icon_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./thinking-icon.less */ "./src/components/message/thinking-icon.less");
+/* harmony import */ var _thinking_icon_less__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_thinking_icon_less__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+var THINKING_ICON_SIZES = {
+  SM: 'sm',
+  MD: 'md'
+};
+// Bar geometry in natural SVG coordinates (viewBox 0 0 18.667 18).
+var BARS = [{
+  top: 0,
+  left: 0,
+  width: 9.334
+}, {
+  top: 2,
+  left: 9.334,
+  width: 4.661
+}, {
+  top: 4,
+  left: 0,
+  width: 9.334
+}, {
+  top: 6,
+  left: 14,
+  width: 4.667
+}, {
+  top: 8,
+  left: 0,
+  width: 14
+}, {
+  top: 10,
+  left: 14,
+  width: 4.667
+}, {
+  top: 12,
+  left: 0,
+  width: 9.334
+}, {
+  top: 14,
+  left: 9.334,
+  width: 4.661
+}, {
+  top: 16,
+  left: 0,
+  width: 9.334
+}];
+var BAR_HEIGHT = 2;
+
+// Staggered cascade: left backbone bars enter first, right accent bars follow.
+// Entry order: r1 → r7 → r3 → r9 → r5 → r8 → r2 → r4 → r6
+var DELAYS = [0.0, 0.62, 0.22, 0.7, 0.44, 0.76, 0.12, 0.54, 0.32];
+function ThinkingIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? THINKING_ICON_SIZES.MD : _ref$size;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
+    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('thinking-icon', size),
+    viewBox: "0 0 18.667 18",
+    "aria-hidden": "true"
+  }, BARS.map(function (bar, i) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("rect", {
+      key: i,
+      className: "bar",
+      x: bar.left,
+      y: bar.top,
+      width: bar.width,
+      height: BAR_HEIGHT
+      // eslint-disable-next-line react/forbid-dom-props
+      ,
+      style: {
+        animationDelay: "".concat(DELAYS[i], "s")
+      }
+    });
+  }));
 }
 
 /***/ }),
@@ -83642,9 +83763,7 @@ function TextEditorContent(_ref4) {
   var Editable = slateReact.Editable,
     useSlate = slateReact.useSlate;
   var editor = useSlate();
-  /* eslint-disable-next-line testing-library/render-result-naming-convention */
   var ElementNode = elementRender;
-  /* eslint-disable-next-line testing-library/render-result-naming-convention */
   var LeafNode = leafRender;
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -87973,11 +88092,10 @@ function CheckboxOptionList(_ref2) {
     "test-id": "typeahead-dropdown-list",
     id: listId,
     ref: function ref(el) {
-      var _ref3;
-      // we have to search for parent container which is rendered by PopperDropdownWrapper
-      // in typeahead component, because it is an actual scrollable container,
-      // and we need it to correctly scroll to active option when navigating via arrow keys
-      scrollableContainerRef.current = (_ref3 = el === null || el === void 0 ? void 0 : el.parentElement) !== null && _ref3 !== void 0 ? _ref3 : null;
+      // The element itself is the scrollable container (overflow-y: auto on
+      // .checkbox-multiselect-container); keyboard navigation needs the ref
+      // here so active options can be scrolled into view.
+      scrollableContainerRef.current = el;
     }
   }, visibleOptions.map(function (option) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CheckboxListItem, {
@@ -87994,24 +88112,24 @@ function CheckboxOptionList(_ref2) {
     });
   }));
 }
-function CheckboxMultiselectTypeahead(_ref4) {
+function CheckboxMultiselectTypeahead(_ref3) {
   var _items$map, _options$map;
-  var options = _ref4.options,
-    optionId = _ref4.optionId,
-    _ref4$optionLabel = _ref4.optionLabel,
-    optionLabel = _ref4$optionLabel === void 0 ? 'label' : _ref4$optionLabel,
-    _ref4$items = _ref4.items,
-    items = _ref4$items === void 0 ? [] : _ref4$items,
-    isDisabled = _ref4.isDisabled,
-    validity = _ref4.validity,
-    _ref4$onSelect = _ref4.onSelect,
-    onChange = _ref4$onSelect === void 0 ? function () {} : _ref4$onSelect,
-    selectAllRow = _ref4.selectAllRow,
-    _ref4$optionComponent = _ref4.optionComponent,
-    optionComponent = _ref4$optionComponent === void 0 ? null : _ref4$optionComponent,
-    _ref4$shouldShowValid = _ref4.shouldShowValidityOnTouched,
-    shouldShowValidityOnTouched = _ref4$shouldShowValid === void 0 ? false : _ref4$shouldShowValid,
-    otherMultiSelectTypeaheadProps = _objectWithoutProperties(_ref4, _excluded);
+  var options = _ref3.options,
+    optionId = _ref3.optionId,
+    _ref3$optionLabel = _ref3.optionLabel,
+    optionLabel = _ref3$optionLabel === void 0 ? 'label' : _ref3$optionLabel,
+    _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items,
+    isDisabled = _ref3.isDisabled,
+    validity = _ref3.validity,
+    _ref3$onSelect = _ref3.onSelect,
+    onChange = _ref3$onSelect === void 0 ? function () {} : _ref3$onSelect,
+    selectAllRow = _ref3.selectAllRow,
+    _ref3$optionComponent = _ref3.optionComponent,
+    optionComponent = _ref3$optionComponent === void 0 ? null : _ref3$optionComponent,
+    _ref3$shouldShowValid = _ref3.shouldShowValidityOnTouched,
+    shouldShowValidityOnTouched = _ref3$shouldShowValid === void 0 ? false : _ref3$shouldShowValid,
+    otherMultiSelectTypeaheadProps = _objectWithoutProperties(_ref3, _excluded);
   // multiselect typeahead does not use typeahead logic for rendering validity message,
   // but in its logic it does not do checks on whether input was touched or not
   // didn't want to introduce this to multiselect typeahead component cause not sure if it's needed there,