@datarobot/design-system 30.6.0 → 30.6.1

package/cjs/typeahead/multi-select-typeahead/checkbox-multiselect-typeahead.js

@@ -127,10 +127,10 @@ function CheckboxOptionList({
     "test-id": "typeahead-dropdown-list",
     id: listId,
     ref: el => {
-      // 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 = el?.parentElement ?? 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;
     },
     children: visibleOptions.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxListItem, {
       option: option,

package/esm/typeahead/multi-select-typeahead/checkbox-multiselect-typeahead.js

@@ -119,10 +119,10 @@ function CheckboxOptionList({
     "test-id": "typeahead-dropdown-list",
     id: listId,
     ref: el => {
-      // 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 = el?.parentElement ?? 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;
     },
     children: visibleOptions.map(option => /*#__PURE__*/_jsx(CheckboxListItem, {
       option: option,

package/js/bundle/bundle.js

@@ -88092,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, {
@@ -88113,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,