@zendeskgarden/container-combobox - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.cjs.js

@@ -306,3 +306,3 @@ /**
   React.useLayoutEffect(() => {
-    if (isAutocomplete && _isExpanded && !previousStateRef.current?.isOpen && _selectionValue && !matchValue) {
+    if ((isAutocomplete || !isEditable) && _isExpanded && !previousStateRef.current?.isOpen && _selectionValue && !matchValue) {
       const value = Array.isArray(_selectionValue) ? _selectionValue[_selectionValue.length - 1
@@ -318,3 +318,3 @@ ] : _selectionValue;
   }, [
-  isAutocomplete, _isExpanded, _selectionValue, _inputValue, values, _defaultActiveIndex, setActiveIndex]);
+  isAutocomplete, isEditable, _isExpanded, _selectionValue, _inputValue, values, _defaultActiveIndex, setActiveIndex]);
   React.useEffect(
@@ -356,3 +356,3 @@ () => setTriggerContainsInput(triggerRef.current?.contains(inputRef.current)), [triggerRef, inputRef]);
       'data-garden-container-id': 'containers.combobox',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       onBlur,
@@ -402,3 +402,12 @@ onClick,
         if (!_isExpanded && (event.key === containerUtilities.KEYS.SPACE || event.key === containerUtilities.KEYS.ENTER)) {
+          event.preventDefault();
           openListbox();
+        } else if (_isExpanded && !matchValue && (event.key === containerUtilities.KEYS.SPACE || event.key === containerUtilities.KEYS.ENTER)) {
+          event.preventDefault();
+          if (_activeIndex !== -1) {
+            setDownshiftSelection(values[_activeIndex]);
+          }
+          if (!isMultiselectable) {
+            closeListbox();
+          }
         } else if (/^(?:\S| ){1}$/u.test(event.key)) {
@@ -444,3 +453,3 @@ const _matchValue = `${matchValue}${event.key}`;
     return triggerProps;
-  }, [getDownshiftTriggerProps, getDownshiftInputProps, getFieldInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, matchValue, values, labels, triggerContainsInput, isAutocomplete, isEditable, inputRef]);
+  }, [getDownshiftTriggerProps, getDownshiftInputProps, getFieldInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, setDownshiftSelection, matchValue, values, labels, triggerContainsInput, isAutocomplete, isEditable, isMultiselectable, inputRef]);
   const getLabelProps = React.useCallback(function (_temp2) {
@@ -472,3 +481,3 @@ let {
       'data-garden-container-id': 'containers.combobox.input',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       ref: inputRef,
@@ -535,3 +544,6 @@ role: role === null ? undefined : role,
         const triggerContainsTag = event.target instanceof Element && triggerRef.current?.contains(event.target);
-        if (triggerContainsTag && (event.key === containerUtilities.KEYS.DOWN || event.key === containerUtilities.KEYS.UP || event.key === containerUtilities.KEYS.ESCAPE)) {
+        if (triggerContainsTag && !isEditable) {
+          event.stopPropagation();
+        }
+        if (triggerContainsTag && (event.key === containerUtilities.KEYS.DOWN || event.key === containerUtilities.KEYS.UP || event.key === containerUtilities.KEYS.ESCAPE || !isEditable && (event.key === containerUtilities.KEYS.ENTER || event.key === containerUtilities.KEYS.SPACE))) {
           const inputProps = getDownshiftInputProps();
@@ -541,7 +553,6 @@ if (isEditable) {
           } else {
+            event.preventDefault();
             triggerRef.current?.focus();
           }
           inputProps.onKeyDown(event);
-        } else if (triggerContainsTag && !isEditable) {
-          event.stopPropagation();
         }
@@ -552,3 +563,3 @@ }
       'data-garden-container-id': 'containers.combobox.tag',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       onClick: containerUtilities.composeEventHandlers(onClick, handleClick),
@@ -568,3 +579,3 @@ onFocus: containerUtilities.composeEventHandlers(onFocus, handleFocus),
       'data-garden-container-id': 'containers.combobox.listbox',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       ref: listboxRef,
@@ -584,3 +595,3 @@ role,
       'data-garden-container-id': 'containers.combobox.optgroup',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       role: role === null ? undefined : role,
@@ -599,3 +610,3 @@ ...other
       'data-garden-container-id': 'containers.combobox.option',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       role,
@@ -602,0 +613,0 @@ onMouseDown,

dist/index.esm.js

@@ -304,3 +304,3 @@ /**
   useLayoutEffect(() => {
-    if (isAutocomplete && _isExpanded && !previousStateRef.current?.isOpen && _selectionValue && !matchValue) {
+    if ((isAutocomplete || !isEditable) && _isExpanded && !previousStateRef.current?.isOpen && _selectionValue && !matchValue) {
       const value = Array.isArray(_selectionValue) ? _selectionValue[_selectionValue.length - 1
@@ -316,3 +316,3 @@ ] : _selectionValue;
   }, [
-  isAutocomplete, _isExpanded, _selectionValue, _inputValue, values, _defaultActiveIndex, setActiveIndex]);
+  isAutocomplete, isEditable, _isExpanded, _selectionValue, _inputValue, values, _defaultActiveIndex, setActiveIndex]);
   useEffect(
@@ -354,3 +354,3 @@ () => setTriggerContainsInput(triggerRef.current?.contains(inputRef.current)), [triggerRef, inputRef]);
       'data-garden-container-id': 'containers.combobox',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       onBlur,
@@ -400,3 +400,12 @@ onClick,
         if (!_isExpanded && (event.key === KEYS.SPACE || event.key === KEYS.ENTER)) {
+          event.preventDefault();
           openListbox();
+        } else if (_isExpanded && !matchValue && (event.key === KEYS.SPACE || event.key === KEYS.ENTER)) {
+          event.preventDefault();
+          if (_activeIndex !== -1) {
+            setDownshiftSelection(values[_activeIndex]);
+          }
+          if (!isMultiselectable) {
+            closeListbox();
+          }
         } else if (/^(?:\S| ){1}$/u.test(event.key)) {
@@ -442,3 +451,3 @@ const _matchValue = `${matchValue}${event.key}`;
     return triggerProps;
-  }, [getDownshiftTriggerProps, getDownshiftInputProps, getFieldInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, matchValue, values, labels, triggerContainsInput, isAutocomplete, isEditable, inputRef]);
+  }, [getDownshiftTriggerProps, getDownshiftInputProps, getFieldInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, setDownshiftSelection, matchValue, values, labels, triggerContainsInput, isAutocomplete, isEditable, isMultiselectable, inputRef]);
   const getLabelProps = useCallback(function (_temp2) {
@@ -470,3 +479,3 @@ let {
       'data-garden-container-id': 'containers.combobox.input',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       ref: inputRef,
@@ -533,3 +542,6 @@ role: role === null ? undefined : role,
         const triggerContainsTag = event.target instanceof Element && triggerRef.current?.contains(event.target);
-        if (triggerContainsTag && (event.key === KEYS.DOWN || event.key === KEYS.UP || event.key === KEYS.ESCAPE)) {
+        if (triggerContainsTag && !isEditable) {
+          event.stopPropagation();
+        }
+        if (triggerContainsTag && (event.key === KEYS.DOWN || event.key === KEYS.UP || event.key === KEYS.ESCAPE || !isEditable && (event.key === KEYS.ENTER || event.key === KEYS.SPACE))) {
           const inputProps = getDownshiftInputProps();
@@ -539,7 +551,6 @@ if (isEditable) {
           } else {
+            event.preventDefault();
             triggerRef.current?.focus();
           }
           inputProps.onKeyDown(event);
-        } else if (triggerContainsTag && !isEditable) {
-          event.stopPropagation();
         }
@@ -550,3 +561,3 @@ }
       'data-garden-container-id': 'containers.combobox.tag',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       onClick: composeEventHandlers(onClick, handleClick),
@@ -566,3 +577,3 @@ onFocus: composeEventHandlers(onFocus, handleFocus),
       'data-garden-container-id': 'containers.combobox.listbox',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       ref: listboxRef,
@@ -582,3 +593,3 @@ role,
       'data-garden-container-id': 'containers.combobox.optgroup',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       role: role === null ? undefined : role,
@@ -597,3 +608,3 @@ ...other
       'data-garden-container-id': 'containers.combobox.option',
-      'data-garden-container-version': '1.0.2',
+      'data-garden-container-version': '1.0.3',
       role,
@@ -600,0 +611,0 @@ onMouseDown,

package.json

 {
   "name": "@zendeskgarden/container-combobox",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Containers relating to Combobox in the Garden Design System",
@@ -47,3 +47,3 @@ "license": "Apache-2.0",
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "66ec27960055ef93eeac480cc5552c0a668ddf7c"
+  "gitHead": "3589771ca4bf1c99fd73b75d03f1ab1774a93389"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76424

increased by1.54%

Lines of code

1616

increased by1.51%

No dependency changes