@datarobot/design-system 29.2.0 → 29.3.0

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
-  })
-}, selectedItem?.key ?? 0);
+}) => {
+  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/table-react/components/table.js

@@ -147,7 +147,9 @@ function Table({
     }
     // Component width depends on Vertical scroll
   }, [columnSizing, width, isVerticalScrollPresent]);
-  const decoratedColumns = (0, _useColumns.useColumns)(columns, enableCheckBoxes, width - (isVerticalScrollPresent ? _types.COLUMN_SIZE.SCROLL_OFFSET : 0), visibility, columnSizing, isRowExpandEnabled, !!getRowActions, localizationProps?.tableBody);
+  const decoratedColumns = (0, _useColumns.useColumns)(columns, enableCheckBoxes, width - (isVerticalScrollPresent ? _types.COLUMN_SIZE.SCROLL_OFFSET : 0), visible || visibility,
+  // we do not update internal state when external one is updated so visibility might fall behind
+  columnSizing, isRowExpandEnabled, !!getRowActions, localizationProps?.tableBody);
   const onChangeSize = fn => {
     const nextData = typeof fn === 'function' ? fn(columnSizing) : fn;
     const targetData = typeof fn === 'function' ? fn({}) : fn;

package/cjs/table-react/hooks/useInnerStateFallback.js

@@ -20,7 +20,7 @@ function useInnerStateFallback(onExternalStateUpdate, externalState, decoratorFn
   const onChangeState = fn => {
     // we are setting innerState and outer  externalState as the same object "nextData"
     // it means that their links should be equal. If their links are not equal, it means externalState was altered by the user
-    // thus expandedRows should take precedence over inner expandedState that has fallen behind
+    // thus external state should take precedence over inner state that has fallen behind
     const currentState = externalState && externalState !== innerState ? externalState : innerState;
     const nextData = typeof fn === 'function' ? fn(currentState) : fn;
     const nextDecoratedData = decoratorFn(nextData);

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
-  })
-}, selectedItem?.key ?? 0);
+}) => {
+  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/table-react/components/table.js

@@ -139,7 +139,9 @@ export function Table({
     }
     // Component width depends on Vertical scroll
   }, [columnSizing, width, isVerticalScrollPresent]);
-  const decoratedColumns = useColumns(columns, enableCheckBoxes, width - (isVerticalScrollPresent ? COLUMN_SIZE.SCROLL_OFFSET : 0), visibility, columnSizing, isRowExpandEnabled, !!getRowActions, localizationProps?.tableBody);
+  const decoratedColumns = useColumns(columns, enableCheckBoxes, width - (isVerticalScrollPresent ? COLUMN_SIZE.SCROLL_OFFSET : 0), visible || visibility,
+  // we do not update internal state when external one is updated so visibility might fall behind
+  columnSizing, isRowExpandEnabled, !!getRowActions, localizationProps?.tableBody);
   const onChangeSize = fn => {
     const nextData = typeof fn === 'function' ? fn(columnSizing) : fn;
     const targetData = typeof fn === 'function' ? fn({}) : fn;

package/esm/table-react/hooks/useInnerStateFallback.js

@@ -14,7 +14,7 @@ export function useInnerStateFallback(onExternalStateUpdate, externalState, deco
   const onChangeState = fn => {
     // we are setting innerState and outer  externalState as the same object "nextData"
     // it means that their links should be equal. If their links are not equal, it means externalState was altered by the user
-    // thus expandedRows should take precedence over inner expandedState that has fallen behind
+    // thus external state should take precedence over inner state that has fallen behind
     const currentState = externalState && externalState !== innerState ? externalState : innerState;
     const nextData = typeof fn === 'function' ? fn(currentState) : fn;
     const nextDecoratedData = decoratorFn(nextData);

package/js/bundle/bundle.js

@@ -51546,12 +51546,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 
 var DefaultTriggerContent = function DefaultTriggerContent(_ref) {
-  var _selectedItem$key, _selectedItem$title;
+  var _selectedItem$title;
   var selectedItem = _ref.selectedItem,
     defaultTriggerText = _ref.defaultTriggerText;
+  var id = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
+  var title = (_selectedItem$title = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.title) !== null && _selectedItem$title !== void 0 ? _selectedItem$title : defaultTriggerText;
+  var key = typeof title === 'string' && title.length ? title : id;
   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));
+    key: key
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, title));
 };
 var DropdownMenuTrigger = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (_ref2, ref) {
   var onClick = _ref2.onClick,
@@ -78001,7 +78004,9 @@ function Table(_ref) {
     }
     // Component width depends on Vertical scroll
   }, [columnSizing, width, isVerticalScrollPresent]);
-  var decoratedColumns = (0,_hooks_useColumns__WEBPACK_IMPORTED_MODULE_9__.useColumns)(columns, enableCheckBoxes, width - (isVerticalScrollPresent ? _types__WEBPACK_IMPORTED_MODULE_18__.COLUMN_SIZE.SCROLL_OFFSET : 0), visibility, columnSizing, isRowExpandEnabled, !!getRowActions, localizationProps === null || localizationProps === void 0 ? void 0 : localizationProps.tableBody);
+  var decoratedColumns = (0,_hooks_useColumns__WEBPACK_IMPORTED_MODULE_9__.useColumns)(columns, enableCheckBoxes, width - (isVerticalScrollPresent ? _types__WEBPACK_IMPORTED_MODULE_18__.COLUMN_SIZE.SCROLL_OFFSET : 0), visible || visibility,
+  // we do not update internal state when external one is updated so visibility might fall behind
+  columnSizing, isRowExpandEnabled, !!getRowActions, localizationProps === null || localizationProps === void 0 ? void 0 : localizationProps.tableBody);
   var onChangeSize = function onChangeSize(fn) {
     var nextData = typeof fn === 'function' ? fn(columnSizing) : fn;
     var targetData = typeof fn === 'function' ? fn({}) : fn;
@@ -78495,7 +78500,7 @@ function useInnerStateFallback(onExternalStateUpdate, externalState) {
   var onChangeState = function onChangeState(fn) {
     // we are setting innerState and outer  externalState as the same object "nextData"
     // it means that their links should be equal. If their links are not equal, it means externalState was altered by the user
-    // thus expandedRows should take precedence over inner expandedState that has fallen behind
+    // thus external state should take precedence over inner state that has fallen behind
     var currentState = externalState && externalState !== innerState ? externalState : innerState;
     var nextData = typeof fn === 'function' ? fn(currentState) : fn;
     var nextDecoratedData = decoratorFn(nextData);