@datarobot/design-system 29.3.0 → 29.4.0

package/cjs/dropdown/popper-dropdown-wrapper.d.ts

@@ -12,7 +12,7 @@ export type ChildrenWrapperTypes = {
 export type PopperDropdownWrapperChildren = ((props: ChildrenWrapperTypes) => ReactNode) | ReactNode;
 export type PopperDropdownWrapperProps = {
     children: PopperDropdownWrapperChildren;
-    closeDropdown: () => void;
+    closeDropdown: (e?: Event) => void;
     anchorRef?: AnchorEl;
     open: boolean;
     openedWithKeyboard?: boolean;

package/cjs/table-react/components/table.js

@@ -147,9 +147,7 @@ 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), visible || visibility,
-  // we do not update internal state when external one is updated so visibility might fall behind
-  columnSizing, isRowExpandEnabled, !!getRowActions, localizationProps?.tableBody);
+  const decoratedColumns = (0, _useColumns.useColumns)(columns, enableCheckBoxes, width - (isVerticalScrollPresent ? _types.COLUMN_SIZE.SCROLL_OFFSET : 0), visibility, 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/typeahead/typeahead.js

@@ -208,7 +208,7 @@ function Typeahead({
   const showClearButton = isClearable && searchValue !== '' && !isDisabled;
   const handleClickElsewhere = (0, _react.useCallback)(event => {
     // Handle focus to false if the click is outside of the typeahead container
-    if (!anchorRef.current?.contains(event.target)) {
+    if (!anchorRef.current?.contains(event?.target)) {
       if (isFocus || isMultiSelect) {
         inputRef.current?.blur();
         handleExit();
@@ -251,7 +251,9 @@ function Typeahead({
   }, [defaultValue]);
   (0, _react.useEffect)(() => setIsTouched(isTouched), [isTouched]);
   const PopperWrapper = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.PopperDropdownWrapper, {
-    closeDropdown: closeDropdown,
+    closeDropdown: e => {
+      handleClickElsewhere(e);
+    },
     anchorRef: anchorRef.current,
     open: isOpen,
     contentClassName: (0, _classnames.default)('typeahead-dropdown-content', dropdownContentClass),
@@ -275,7 +277,7 @@ function Typeahead({
       listId: listId,
       noItemsText: noItemsText
     })
-  }), [isOpen, width, searchValue, options, isShowAll]);
+  }), [isOpen, width, searchValue, options, isShowAll, handleClickElsewhere]);
   const {
     isShowOptions
   } = (0, _useVisibleOptions.useVisibleOptions)({

package/esm/dropdown/popper-dropdown-wrapper.d.ts

@@ -12,7 +12,7 @@ export type ChildrenWrapperTypes = {
 export type PopperDropdownWrapperChildren = ((props: ChildrenWrapperTypes) => ReactNode) | ReactNode;
 export type PopperDropdownWrapperProps = {
     children: PopperDropdownWrapperChildren;
-    closeDropdown: () => void;
+    closeDropdown: (e?: Event) => void;
     anchorRef?: AnchorEl;
     open: boolean;
     openedWithKeyboard?: boolean;

package/esm/table-react/components/table.js

@@ -139,9 +139,7 @@ export function Table({
     }
     // Component width depends on Vertical scroll
   }, [columnSizing, width, isVerticalScrollPresent]);
-  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 decoratedColumns = useColumns(columns, enableCheckBoxes, width - (isVerticalScrollPresent ? COLUMN_SIZE.SCROLL_OFFSET : 0), visibility, 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/typeahead/typeahead.js

@@ -200,7 +200,7 @@ function Typeahead({
   const showClearButton = isClearable && searchValue !== '' && !isDisabled;
   const handleClickElsewhere = useCallback(event => {
     // Handle focus to false if the click is outside of the typeahead container
-    if (!anchorRef.current?.contains(event.target)) {
+    if (!anchorRef.current?.contains(event?.target)) {
       if (isFocus || isMultiSelect) {
         inputRef.current?.blur();
         handleExit();
@@ -243,7 +243,9 @@ function Typeahead({
   }, [defaultValue]);
   useEffect(() => setIsTouched(isTouched), [isTouched]);
   const PopperWrapper = useMemo(() => /*#__PURE__*/_jsx(PopperDropdownWrapper, {
-    closeDropdown: closeDropdown,
+    closeDropdown: e => {
+      handleClickElsewhere(e);
+    },
     anchorRef: anchorRef.current,
     open: isOpen,
     contentClassName: classNames('typeahead-dropdown-content', dropdownContentClass),
@@ -267,7 +269,7 @@ function Typeahead({
       listId: listId,
       noItemsText: noItemsText
     })
-  }), [isOpen, width, searchValue, options, isShowAll]);
+  }), [isOpen, width, searchValue, options, isShowAll, handleClickElsewhere]);
   const {
     isShowOptions
   } = useVisibleOptions({

package/js/bundle/bundle.js

@@ -78004,9 +78004,7 @@ 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), 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 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 onChangeSize = function onChangeSize(fn) {
     var nextData = typeof fn === 'function' ? fn(columnSizing) : fn;
     var targetData = typeof fn === 'function' ? fn({}) : fn;
@@ -86668,7 +86666,7 @@ function Typeahead(_ref) {
   var handleClickElsewhere = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {
     var _anchorRef$current;
     // Handle focus to false if the click is outside of the typeahead container
-    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event.target))) {
+    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event === null || event === void 0 ? void 0 : event.target))) {
       if (isFocus || isMultiSelect) {
         var _inputRef$current;
         (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
@@ -86717,7 +86715,9 @@ function Typeahead(_ref) {
   }, [isTouched]);
   var PopperWrapper = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_dropdown__WEBPACK_IMPORTED_MODULE_2__.PopperDropdownWrapper, {
-      closeDropdown: closeDropdown,
+      closeDropdown: function closeDropdown(e) {
+        handleClickElsewhere(e);
+      },
       anchorRef: anchorRef.current,
       open: isOpen,
       contentClassName: classnames__WEBPACK_IMPORTED_MODULE_1___default()('typeahead-dropdown-content', dropdownContentClass),
@@ -86743,7 +86743,7 @@ function Typeahead(_ref) {
       listId: listId,
       noItemsText: noItemsText
     }));
-  }, [isOpen, width, searchValue, options, isShowAll]);
+  }, [isOpen, width, searchValue, options, isShowAll, handleClickElsewhere]);
   var _useVisibleOptions = (0,_use_visible_options__WEBPACK_IMPORTED_MODULE_9__.useVisibleOptions)({
       formatSearchValue: formatSearchValue,
       searchValue: searchValue,