@datarobot/design-system 29.2.1 → 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/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/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/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/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

@@ -78498,7 +78498,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);
@@ -86666,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();
@@ -86715,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),
@@ -86741,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,