@spaced-out/ui-design-system 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.4](https://github.com/spaced-out/ui-design-system/compare/v0.2.3...v0.2.4) (2024-10-15)
+
+
+### Bug Fixes
+
+* ♳ fixes an issue with typeahead when when events are controlled from trigger the menu toggles b/w open and close states ([#276](https://github.com/spaced-out/ui-design-system/issues/276)) ([230b754](https://github.com/spaced-out/ui-design-system/commit/230b754b1f69d30ea4770daf9ea9b9cf6af7f8b7))
+
 ### [0.2.3](https://github.com/spaced-out/ui-design-system/compare/v0.2.2...v0.2.3) (2024-10-10)
 
 

package/lib/components/Typeahead/Typeahead.js

@@ -10,6 +10,7 @@ var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
 var _Menu = require("../Menu");
 var _SearchInput = require("../SearchInput");
 var _TypeaheadModule = _interopRequireDefault(require("./Typeahead.module.css"));
@@ -69,7 +70,8 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isOpen,
       onOpen,
       clickAway,
-      boundaryRef
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
@@ -77,7 +79,7 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: boundaryRef
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       ref: ref,
-      boxRef: refs.setReference,
+      boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       size: size,
       placeholder: placeholder,
       value: typeaheadInputText,
@@ -89,14 +91,14 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         e.stopPropagation();
         onSearch && onSearch(e);
         if (e.target.value.length >= menuOpenOffset) {
-          onOpen();
+          !isOpen && onOpen();
         } else {
           clickAway();
         }
       },
       onFocus: _e => {
         if (typeaheadInputText.length >= menuOpenOffset) {
-          onOpen();
+          !isOpen && onOpen();
         } else {
           clickAway();
         }

package/lib/components/Typeahead/Typeahead.js.flow

@@ -16,6 +16,7 @@ import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
 import type {InputProps} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
@@ -98,7 +99,7 @@ export const Typeahead: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
             data-testid="Typeahead"
             className={classify(css.typeaheadContainer, classNames?.wrapper)}
@@ -107,7 +108,7 @@ export const Typeahead: React$AbstractComponent<
             <SearchInput
               {...inputProps}
               ref={ref}
-              boxRef={refs.setReference}
+              boxRef={mergeRefs([refs.setReference, triggerRef])}
               size={size}
               placeholder={placeholder}
               value={typeaheadInputText}
@@ -117,14 +118,14 @@ export const Typeahead: React$AbstractComponent<
                 e.stopPropagation();
                 onSearch && onSearch(e);
                 if (e.target.value.length >= menuOpenOffset) {
-                  onOpen();
+                  !isOpen && onOpen();
                 } else {
                   clickAway();
                 }
               }}
               onFocus={(_e) => {
                 if (typeaheadInputText.length >= menuOpenOffset) {
-                  onOpen();
+                  !isOpen && onOpen();
                 } else {
                   clickAway();
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {