@datarobot/design-system 28.2.2 → 28.3.0-experimental.2

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

@@ -18,11 +18,16 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const DefaultTriggerContent = ({
   selectedItem,
   defaultTriggerText
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    children: selectedItem?.title ?? defaultTriggerText
-  })
-});
+}) => {
+  const id = (0, _react.useId)();
+  const title = selectedItem?.title ?? defaultTriggerText;
+  const key = typeof title === 'string' && title.length ? title : id;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: title
+    })
+  }, key);
+};
 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/inline-edit/inline-edit.js

@@ -79,18 +79,7 @@ function InlineEdit({
   const [touched, setTouched] = (0, _react.useState)(false);
   const [inputValue, setInputValue] = (0, _react.useState)(value);
   const [componentId] = (0, _react.useState)(() => (0, _uniqueId.default)());
-
-  // check if 2 elements have autofocus and render in same time
-  const [isEditMode, setIsEditMode] = (0, _react.useState)(() => {
-    if (isSomeOneOpen() || readOnly || isLoading) {
-      return false;
-    }
-    if (autoFocus) {
-      openState.set(componentId, true);
-      return true;
-    }
-    return false;
-  });
+  const [isEditMode, setIsEditMode] = (0, _react.useState)(false);
   const container = (0, _react.useRef)(null);
   const handleCancel = () => {
     setInputValue(value);
@@ -119,6 +108,18 @@ function InlineEdit({
   (0, _react.useEffect)(() => () => {
     openState.delete(componentId);
   }, []);
+  (0, _react.useLayoutEffect)(() => {
+    // If the component is mounted, autoFocus is true, and there are no other inline edits in edit mode -
+    // set the open state and edit mode to true
+    // previously it was set in state initialization function but since react 18 that initialization function
+    // can be called twice without unmount if 2+ components rendering inline edit are wrapped in Suspense and lazy loaded
+    // it results in inline edits being locked up because first id is set to true, however latest render would use different id
+    // it turns out to be common react thing: https://stackoverflow.com/questions/73325723/suspense-as-a-root-element-causes-two-instances-of-component-in-production-and
+    if (autoFocus && !(isSomeOneOpen() || readOnly || isLoading)) {
+      openState.set(componentId, true);
+      setIsEditMode(true);
+    }
+  }, []);
   const onTextClick = e => {
     e.preventDefault();
     if (!isSomeOneOpen() && !readOnly && !isLoading) {

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import classNames from 'classnames';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { FontAwesomeIcon } from '../font-awesome-icon';
@@ -10,11 +10,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DefaultTriggerContent = ({
   selectedItem,
   defaultTriggerText
-}) => /*#__PURE__*/_jsx(TruncateWithTooltip, {
-  children: /*#__PURE__*/_jsx("span", {
-    children: selectedItem?.title ?? defaultTriggerText
-  })
-});
+}) => {
+  const id = useId();
+  const title = selectedItem?.title ?? defaultTriggerText;
+  const key = typeof title === 'string' && title.length ? title : id;
+  return /*#__PURE__*/_jsx(TruncateWithTooltip, {
+    children: /*#__PURE__*/_jsx("span", {
+      children: title
+    })
+  }, key);
+};
 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/inline-edit/inline-edit.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
 import cls from 'classnames';
 import uniqueId from 'lodash-es/uniqueId';
 import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
@@ -71,18 +71,7 @@ export default function InlineEdit({
   const [touched, setTouched] = useState(false);
   const [inputValue, setInputValue] = useState(value);
   const [componentId] = useState(() => uniqueId());
-
-  // check if 2 elements have autofocus and render in same time
-  const [isEditMode, setIsEditMode] = useState(() => {
-    if (isSomeOneOpen() || readOnly || isLoading) {
-      return false;
-    }
-    if (autoFocus) {
-      openState.set(componentId, true);
-      return true;
-    }
-    return false;
-  });
+  const [isEditMode, setIsEditMode] = useState(false);
   const container = useRef(null);
   const handleCancel = () => {
     setInputValue(value);
@@ -111,6 +100,18 @@ export default function InlineEdit({
   useEffect(() => () => {
     openState.delete(componentId);
   }, []);
+  useLayoutEffect(() => {
+    // If the component is mounted, autoFocus is true, and there are no other inline edits in edit mode -
+    // set the open state and edit mode to true
+    // previously it was set in state initialization function but since react 18 that initialization function
+    // can be called twice without unmount if 2+ components rendering inline edit are wrapped in Suspense and lazy loaded
+    // it results in inline edits being locked up because first id is set to true, however latest render would use different id
+    // it turns out to be common react thing: https://stackoverflow.com/questions/73325723/suspense-as-a-root-element-causes-two-instances-of-component-in-production-and
+    if (autoFocus && !(isSomeOneOpen() || readOnly || isLoading)) {
+      openState.set(componentId, true);
+      setIsEditMode(true);
+    }
+  }, []);
   const onTextClick = e => {
     e.preventDefault();
     if (!isSomeOneOpen() && !readOnly && !isLoading) {