@datarobot/design-system 29.0.0 → 29.1.1

package/cjs/dropdown-menu/dropdown-item-title.d.ts

@@ -3,6 +3,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TooltipPlacementsType } from '../tooltip';
 import './dropdown-item-title.less';
 export type DropdownItemTitleOption = {
+    key: string | number;
     iconClass?: string;
     icon?: IconProp;
     title?: ReactNode;

package/cjs/dropdown-menu/dropdown-item-title.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _faChevronRight = require("@fortawesome/free-solid-svg-icons/faChevronRight");
 var _fontAwesomeIcon = require("../font-awesome-icon");
@@ -12,6 +12,7 @@ var _truncateWithTooltip = require("../truncate-with-tooltip");
 var _tooltip = require("../tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const DropdownItemTitle = ({
   option,
   isMultiLevelHandler = false
@@ -25,7 +26,8 @@ const DropdownItemTitle = ({
     tooltipPlacement,
     tooltipText,
     tooltipDocsLink,
-    tooltipTestId
+    tooltipTestId,
+    key
   } = option;
   const props = {
     tooltipText,
@@ -59,14 +61,14 @@ const DropdownItemTitle = ({
     })
   });
   const withTruncatableText = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+    children: [/*#__PURE__*/(0, _react.createElement)(_truncateWithTooltip.TruncateWithTooltip, {
       ...props,
-      children: itemTitle
-    }), subtext && /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+      key: key
+    }, itemTitle), subtext && /*#__PURE__*/(0, _react.createElement)(_truncateWithTooltip.TruncateWithTooltip, {
       ...props,
       tooltipTestId: `${tooltipTestId}-subtext`,
-      children: itemSubText
-    })]
+      key: `${key}-subtext`
+    }, itemSubText)]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)('drop-item-content-wrap', {

package/cjs/dropdown-menu/dropdown-menu-trigger.js

@@ -22,7 +22,7 @@ const DefaultTriggerContent = ({
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     children: selectedItem?.title ?? defaultTriggerText
   })
-});
+}, selectedItem?.key ?? 0);
 const DropdownMenuTrigger = /*#__PURE__*/(0, _react.forwardRef)(({
   onClick,
   isOpen,

package/cjs/dropdown-menu/dropdown-selectbox-trigger.js

@@ -31,6 +31,7 @@ const DefaultTriggerContent = function ({
     });
   }
   const triggerContent = getGenericTriggerContent(selectedItem, options);
+  const key = selectedItem?.key;
   if (triggerContent) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "selected-item-details",
@@ -38,7 +39,7 @@ const DefaultTriggerContent = function ({
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: triggerContent
         })
-      })
+      }, key)
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
@@ -46,7 +47,7 @@ const DefaultTriggerContent = function ({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: defaultTriggerText
     })
-  });
+  }, key);
 };
 function getGenericTriggerContent(selectedItem, options) {
   const selectedOptions = options.filter(option => option.isChecked).map(option => option.title);

package/cjs/typeahead/typeahead.d.ts

@@ -76,11 +76,16 @@ export type TypeaheadProps = {
     optionalLabelText?: string;
     autoFocus?: boolean;
     noItemsText?: string;
+    /**
+     * By default, on select won't be invoked if the label of selected option is the same as defaultValue
+     * but there are cases when we do want to call it anyway. In that cases this prop should be set to true
+     */
+    shouldCallOnSelectWithOldValue?: boolean;
 };
 /** Searchable select
  * [CAPITALIZATION] Use sentence case for options, label, and input text. Do not end with ellipses (...).
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-declare function Typeahead({ defaultValue, onSearch, optionComponent, OptionList, onBlur, onKeyDown, onClear, onSelect, onDelete, searchFields, placement, options, items, optionId, optionLabel, isMultiSelect, focused, isTouched, forceShowAllOnFocus, showAllOnFocus, isDisabled, disabledInfo, isRequired, isOptional, isClearable, optionalLabelText, handleFocus, placeholder, containerRef, inputRef: inputRefProp, helperTextPosition, testId, id, label, labelTestId, ariaLabel, validity, validationTestId, asyncValidation, labelIcon, labelIconTooltipText, labelIconTestId, dropdownContentClass, wrapperClass, fieldClass, helperText, autoComplete, keepInvalidText, formatSearchValue, className, autoFocus, noItemsText, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
+declare function Typeahead({ defaultValue, onSearch, optionComponent, OptionList, onBlur, onKeyDown, onClear, onSelect, onDelete, searchFields, placement, options, items, optionId, optionLabel, isMultiSelect, focused, isTouched, forceShowAllOnFocus, showAllOnFocus, isDisabled, disabledInfo, isRequired, isOptional, isClearable, optionalLabelText, handleFocus, placeholder, containerRef, inputRef: inputRefProp, helperTextPosition, testId, id, label, labelTestId, ariaLabel, validity, validationTestId, asyncValidation, labelIcon, labelIconTooltipText, labelIconTestId, dropdownContentClass, wrapperClass, fieldClass, helperText, autoComplete, keepInvalidText, formatSearchValue, className, autoFocus, noItemsText, shouldCallOnSelectWithOldValue, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
 export default Typeahead;

package/cjs/typeahead/typeahead.js

@@ -80,7 +80,8 @@ function Typeahead({
   formatSearchValue,
   className,
   autoFocus = false,
-  noItemsText
+  noItemsText,
+  shouldCallOnSelectWithOldValue = false
 }) {
   const {
     t
@@ -125,7 +126,7 @@ function Typeahead({
     }
     if (isMultiSelect) {
       onSelect(option);
-    } else if (String(option?.[optionLabel]) !== defaultValue) {
+    } else if (String(option?.[optionLabel]) !== defaultValue || shouldCallOnSelectWithOldValue) {
       onSelect(option);
     }
     setIsTouched(true);

package/esm/dropdown-menu/dropdown-item-title.d.ts

@@ -3,6 +3,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TooltipPlacementsType } from '../tooltip';
 import './dropdown-item-title.less';
 export type DropdownItemTitleOption = {
+    key: string | number;
     iconClass?: string;
     icon?: IconProp;
     title?: ReactNode;

package/esm/dropdown-menu/dropdown-item-title.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createElement as _createElement } from 'react';
 import classnames from 'classnames';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import { FontAwesomeIcon } from '../font-awesome-icon';
@@ -18,7 +18,8 @@ const DropdownItemTitle = ({
     tooltipPlacement,
     tooltipText,
     tooltipDocsLink,
-    tooltipTestId
+    tooltipTestId,
+    key
   } = option;
   const props = {
     tooltipText,
@@ -52,14 +53,14 @@ const DropdownItemTitle = ({
     })
   });
   const withTruncatableText = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(TruncateWithTooltip, {
+    children: [/*#__PURE__*/_createElement(TruncateWithTooltip, {
       ...props,
-      children: itemTitle
-    }), subtext && /*#__PURE__*/_jsx(TruncateWithTooltip, {
+      key: key
+    }, itemTitle), subtext && /*#__PURE__*/_createElement(TruncateWithTooltip, {
       ...props,
       tooltipTestId: `${tooltipTestId}-subtext`,
-      children: itemSubText
-    })]
+      key: `${key}-subtext`
+    }, itemSubText)]
   });
   return /*#__PURE__*/_jsx("div", {
     className: classnames('drop-item-content-wrap', {

package/esm/dropdown-menu/dropdown-menu-trigger.js

@@ -14,7 +14,7 @@ const DefaultTriggerContent = ({
   children: /*#__PURE__*/_jsx("span", {
     children: selectedItem?.title ?? defaultTriggerText
   })
-});
+}, selectedItem?.key ?? 0);
 const DropdownMenuTrigger = /*#__PURE__*/forwardRef(({
   onClick,
   isOpen,

package/esm/dropdown-menu/dropdown-selectbox-trigger.js

@@ -23,6 +23,7 @@ const DefaultTriggerContent = function ({
     });
   }
   const triggerContent = getGenericTriggerContent(selectedItem, options);
+  const key = selectedItem?.key;
   if (triggerContent) {
     return /*#__PURE__*/_jsx("span", {
       className: "selected-item-details",
@@ -30,7 +31,7 @@ const DefaultTriggerContent = function ({
         children: /*#__PURE__*/_jsx("span", {
           children: triggerContent
         })
-      })
+      }, key)
     });
   }
   return /*#__PURE__*/_jsx(TruncateWithTooltip, {
@@ -38,7 +39,7 @@ const DefaultTriggerContent = function ({
     children: /*#__PURE__*/_jsx("span", {
       children: defaultTriggerText
     })
-  });
+  }, key);
 };
 function getGenericTriggerContent(selectedItem, options) {
   const selectedOptions = options.filter(option => option.isChecked).map(option => option.title);

package/esm/typeahead/typeahead.d.ts

@@ -76,11 +76,16 @@ export type TypeaheadProps = {
     optionalLabelText?: string;
     autoFocus?: boolean;
     noItemsText?: string;
+    /**
+     * By default, on select won't be invoked if the label of selected option is the same as defaultValue
+     * but there are cases when we do want to call it anyway. In that cases this prop should be set to true
+     */
+    shouldCallOnSelectWithOldValue?: boolean;
 };
 /** Searchable select
  * [CAPITALIZATION] Use sentence case for options, label, and input text. Do not end with ellipses (...).
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-declare function Typeahead({ defaultValue, onSearch, optionComponent, OptionList, onBlur, onKeyDown, onClear, onSelect, onDelete, searchFields, placement, options, items, optionId, optionLabel, isMultiSelect, focused, isTouched, forceShowAllOnFocus, showAllOnFocus, isDisabled, disabledInfo, isRequired, isOptional, isClearable, optionalLabelText, handleFocus, placeholder, containerRef, inputRef: inputRefProp, helperTextPosition, testId, id, label, labelTestId, ariaLabel, validity, validationTestId, asyncValidation, labelIcon, labelIconTooltipText, labelIconTestId, dropdownContentClass, wrapperClass, fieldClass, helperText, autoComplete, keepInvalidText, formatSearchValue, className, autoFocus, noItemsText, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
+declare function Typeahead({ defaultValue, onSearch, optionComponent, OptionList, onBlur, onKeyDown, onClear, onSelect, onDelete, searchFields, placement, options, items, optionId, optionLabel, isMultiSelect, focused, isTouched, forceShowAllOnFocus, showAllOnFocus, isDisabled, disabledInfo, isRequired, isOptional, isClearable, optionalLabelText, handleFocus, placeholder, containerRef, inputRef: inputRefProp, helperTextPosition, testId, id, label, labelTestId, ariaLabel, validity, validationTestId, asyncValidation, labelIcon, labelIconTooltipText, labelIconTestId, dropdownContentClass, wrapperClass, fieldClass, helperText, autoComplete, keepInvalidText, formatSearchValue, className, autoFocus, noItemsText, shouldCallOnSelectWithOldValue, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
 export default Typeahead;

package/esm/typeahead/typeahead.js

@@ -72,7 +72,8 @@ function Typeahead({
   formatSearchValue,
   className,
   autoFocus = false,
-  noItemsText
+  noItemsText,
+  shouldCallOnSelectWithOldValue = false
 }) {
   const {
     t
@@ -117,7 +118,7 @@ function Typeahead({
     }
     if (isMultiSelect) {
       onSelect(option);
-    } else if (String(option?.[optionLabel]) !== defaultValue) {
+    } else if (String(option?.[optionLabel]) !== defaultValue || shouldCallOnSelectWithOldValue) {
       onSelect(option);
     }
     setIsTouched(true);

package/js/bundle/bundle.js

@@ -50824,7 +50824,8 @@ var DropdownItemTitle = function DropdownItemTitle(_ref) {
     tooltipPlacement = option.tooltipPlacement,
     tooltipText = option.tooltipText,
     tooltipDocsLink = option.tooltipDocsLink,
-    tooltipTestId = option.tooltipTestId;
+    tooltipTestId = option.tooltipTestId,
+    key = option.key;
   var props = {
     tooltipText: tooltipText,
     tooltipPlacement: tooltipPlacement || _tooltip__WEBPACK_IMPORTED_MODULE_5__.TOOLTIP_PLACEMENT_TYPES.RIGHT,
@@ -50852,8 +50853,11 @@ var DropdownItemTitle = function DropdownItemTitle(_ref) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "menu-item-subtext"
   }, subtext));
-  var withTruncatableText = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_4__.TruncateWithTooltip, props, itemTitle), subtext && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_4__.TruncateWithTooltip, _extends({}, props, {
-    tooltipTestId: "".concat(tooltipTestId, "-subtext")
+  var withTruncatableText = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_4__.TruncateWithTooltip, _extends({}, props, {
+    key: key
+  }), itemTitle), subtext && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_4__.TruncateWithTooltip, _extends({}, props, {
+    tooltipTestId: "".concat(tooltipTestId, "-subtext"),
+    key: "".concat(key, "-subtext")
   }), itemSubText));
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('drop-item-content-wrap', {
@@ -51541,10 +51545,12 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 
 var DefaultTriggerContent = function DefaultTriggerContent(_ref) {
-  var _selectedItem$title;
+  var _selectedItem$key, _selectedItem$title;
   var selectedItem = _ref.selectedItem,
     defaultTriggerText = _ref.defaultTriggerText;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_4__.TruncateWithTooltip, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, (_selectedItem$title = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.title) !== null && _selectedItem$title !== void 0 ? _selectedItem$title : defaultTriggerText));
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_4__.TruncateWithTooltip, {
+    key: (_selectedItem$key = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) !== null && _selectedItem$key !== void 0 ? _selectedItem$key : 0
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, (_selectedItem$title = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.title) !== null && _selectedItem$title !== void 0 ? _selectedItem$title : defaultTriggerText));
 };
 var DropdownMenuTrigger = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (_ref2, ref) {
   var onClick = _ref2.onClick,
@@ -52186,13 +52192,17 @@ var DefaultTriggerContent = function DefaultTriggerContent(_ref) {
     });
   }
   var triggerContent = getGenericTriggerContent(selectedItem, options);
+  var key = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key;
   if (triggerContent) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "selected-item-details"
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_5__.TruncateWithTooltip, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, triggerContent)));
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_5__.TruncateWithTooltip, {
+      key: key
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, triggerContent)));
   }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_5__.TruncateWithTooltip, {
-    className: "placeholder"
+    className: "placeholder",
+    key: key
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, defaultTriggerText));
 };
 function getGenericTriggerContent(selectedItem, options) {
@@ -86219,7 +86229,9 @@ function Typeahead(_ref) {
     className = _ref.className,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-    noItemsText = _ref.noItemsText;
+    noItemsText = _ref.noItemsText,
+    _ref$shouldCallOnSele = _ref.shouldCallOnSelectWithOldValue,
+    shouldCallOnSelectWithOldValue = _ref$shouldCallOnSele === void 0 ? false : _ref$shouldCallOnSele;
   var _useTranslation = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_10__.useTranslation)(),
     t = _useTranslation.t;
   var listId = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
@@ -86290,7 +86302,7 @@ function Typeahead(_ref) {
     }
     if (isMultiSelect) {
       onSelect(option);
-    } else if (String(option === null || option === void 0 ? void 0 : option[optionLabel]) !== defaultValue) {
+    } else if (String(option === null || option === void 0 ? void 0 : option[optionLabel]) !== defaultValue || shouldCallOnSelectWithOldValue) {
       onSelect(option);
     }
     setIsTouched(true);