@zendeskgarden/container-combobox - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/index.cjs.js

@@ -169,4 +169,2 @@ /**
           changes.highlightedIndex = -1;
-        } else if (previousStateRef.current?.isOpen) {
-          return state;
         }
@@ -199,5 +197,5 @@ break;
       case downshift.useCombobox.stateChangeTypes.ItemClick:
+        changes.highlightedIndex = state.highlightedIndex;
         if (isMultiselectable) {
           changes.isOpen = state.isOpen;
-          changes.highlightedIndex = state.highlightedIndex;
           changes.inputValue = '';
@@ -236,2 +234,3 @@ }
   const transformValue = value => value ? toLabel(labels, value) : '';
+  const getOptionId = React.useCallback((index, isDisabled) => `${prefix}-option${isDisabled ? '-disabled' : ''}-${index}`, [prefix]);
   const {
@@ -246,6 +245,6 @@ selectedItem: _selectionValue,
     getItemProps: getDownshiftOptionProps,
-    closeMenu: closeListbox,
-    openMenu: openListbox,
-    setHighlightedIndex: setActiveIndex,
-    selectItem: setDownshiftSelection
+    closeMenu,
+    openMenu,
+    setHighlightedIndex,
+    selectItem
   } = downshift.useCombobox({
@@ -255,3 +254,3 @@ id: prefix,
     menuId: `${prefix}-listbox`,
-    getItemId: index => `${prefix}-option-${index}`,
+    getItemId: getOptionId,
     items: values,
@@ -273,2 +272,30 @@ inputValue,
   });
+  const closeListbox = React.useCallback(() => {
+    closeMenu();
+    onChange({
+      type: toType(downshift.useCombobox.stateChangeTypes.FunctionCloseMenu),
+      isExpanded: false
+    });
+  }, [closeMenu, onChange]);
+  const openListbox = React.useCallback(() => {
+    openMenu();
+    onChange({
+      type: toType(downshift.useCombobox.stateChangeTypes.FunctionOpenMenu),
+      isExpanded: true
+    });
+  }, [openMenu, onChange]);
+  const setActiveIndex = React.useCallback(index => {
+    setHighlightedIndex(index);
+    onChange({
+      type: toType(downshift.useCombobox.stateChangeTypes.FunctionSetHighlightedIndex),
+      activeIndex: index
+    });
+  }, [onChange, setHighlightedIndex]);
+  const setDownshiftSelection = React.useCallback(value => {
+    selectItem(value);
+    onChange({
+      type: toType(downshift.useCombobox.stateChangeTypes.FunctionSelectItem),
+      selectionValue: value
+    });
+  }, [onChange, selectItem]);
   const {
@@ -285,3 +312,3 @@ getLabelProps: getFieldLabelProps,
   React.useLayoutEffect(() => {
-    if (isAutocomplete && _isExpanded && _selectionValue && !matchValue) {
+    if (isAutocomplete && _isExpanded && !previousStateRef.current?.isOpen && _selectionValue && !matchValue) {
       const value = Array.isArray(_selectionValue) ? _selectionValue[_selectionValue.length - 1
@@ -314,2 +341,7 @@ ] : _selectionValue;
   });
+  React.useEffect(() => {
+    if (isEditable && inputRef.current === win.document.activeElement) {
+      inputRef.current?.scrollIntoView && inputRef.current?.scrollIntoView();
+    }
+  }, [inputRef, isEditable, win.document.activeElement]);
   const getTriggerProps = React.useCallback(function (_temp) {
@@ -324,3 +356,3 @@ let {
       'data-garden-container-id': 'containers.combobox',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       onBlur,
@@ -438,3 +470,3 @@ onClick,
       'data-garden-container-id': 'containers.combobox.input',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       ref: inputRef,
@@ -516,3 +548,3 @@ role: role === null ? undefined : role,
       'data-garden-container-id': 'containers.combobox.tag',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       onClick: containerUtilities.composeEventHandlers(onClick, handleClick),
@@ -532,3 +564,3 @@ onFocus: containerUtilities.composeEventHandlers(onFocus, handleFocus),
       'data-garden-container-id': 'containers.combobox.listbox',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       ref: listboxRef,
@@ -548,3 +580,3 @@ role,
       'data-garden-container-id': 'containers.combobox.optgroup',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       role: role === null ? undefined : role,
@@ -563,3 +595,3 @@ ...other
       'data-garden-container-id': 'containers.combobox.option',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       role,
@@ -578,2 +610,3 @@ onMouseDown,
         'aria-selected': ariaSelected,
+        id: option ? getOptionId(disabledValues.indexOf(option.value), option.disabled) : undefined,
         ...optionProps,
@@ -589,3 +622,3 @@ onMouseDown: containerUtilities.composeEventHandlers(onMouseDown, handleMouseDown)
     });
-  }, [getDownshiftOptionProps, values, _selectionValue]);
+  }, [getDownshiftOptionProps, disabledValues, values, _selectionValue, getOptionId]);
   const removeSelection = React.useCallback(value => {
@@ -592,0 +625,0 @@ if (value === undefined) {

dist/index.esm.js

@@ -8,3 +8,3 @@ /**
 
-import React, { useState, useRef, useMemo, useLayoutEffect, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useMemo, useCallback, useLayoutEffect, useEffect } from 'react';
 import { useField } from '@zendeskgarden/container-field';
@@ -168,4 +168,2 @@ import { KEYS, useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
           changes.highlightedIndex = -1;
-        } else if (previousStateRef.current?.isOpen) {
-          return state;
         }
@@ -198,5 +196,5 @@ break;
       case useCombobox$1.stateChangeTypes.ItemClick:
+        changes.highlightedIndex = state.highlightedIndex;
         if (isMultiselectable) {
           changes.isOpen = state.isOpen;
-          changes.highlightedIndex = state.highlightedIndex;
           changes.inputValue = '';
@@ -235,2 +233,3 @@ }
   const transformValue = value => value ? toLabel(labels, value) : '';
+  const getOptionId = useCallback((index, isDisabled) => `${prefix}-option${isDisabled ? '-disabled' : ''}-${index}`, [prefix]);
   const {
@@ -245,6 +244,6 @@ selectedItem: _selectionValue,
     getItemProps: getDownshiftOptionProps,
-    closeMenu: closeListbox,
-    openMenu: openListbox,
-    setHighlightedIndex: setActiveIndex,
-    selectItem: setDownshiftSelection
+    closeMenu,
+    openMenu,
+    setHighlightedIndex,
+    selectItem
   } = useCombobox$1({
@@ -254,3 +253,3 @@ id: prefix,
     menuId: `${prefix}-listbox`,
-    getItemId: index => `${prefix}-option-${index}`,
+    getItemId: getOptionId,
     items: values,
@@ -272,2 +271,30 @@ inputValue,
   });
+  const closeListbox = useCallback(() => {
+    closeMenu();
+    onChange({
+      type: toType(useCombobox$1.stateChangeTypes.FunctionCloseMenu),
+      isExpanded: false
+    });
+  }, [closeMenu, onChange]);
+  const openListbox = useCallback(() => {
+    openMenu();
+    onChange({
+      type: toType(useCombobox$1.stateChangeTypes.FunctionOpenMenu),
+      isExpanded: true
+    });
+  }, [openMenu, onChange]);
+  const setActiveIndex = useCallback(index => {
+    setHighlightedIndex(index);
+    onChange({
+      type: toType(useCombobox$1.stateChangeTypes.FunctionSetHighlightedIndex),
+      activeIndex: index
+    });
+  }, [onChange, setHighlightedIndex]);
+  const setDownshiftSelection = useCallback(value => {
+    selectItem(value);
+    onChange({
+      type: toType(useCombobox$1.stateChangeTypes.FunctionSelectItem),
+      selectionValue: value
+    });
+  }, [onChange, selectItem]);
   const {
@@ -284,3 +311,3 @@ getLabelProps: getFieldLabelProps,
   useLayoutEffect(() => {
-    if (isAutocomplete && _isExpanded && _selectionValue && !matchValue) {
+    if (isAutocomplete && _isExpanded && !previousStateRef.current?.isOpen && _selectionValue && !matchValue) {
       const value = Array.isArray(_selectionValue) ? _selectionValue[_selectionValue.length - 1
@@ -313,2 +340,7 @@ ] : _selectionValue;
   });
+  useEffect(() => {
+    if (isEditable && inputRef.current === win.document.activeElement) {
+      inputRef.current?.scrollIntoView && inputRef.current?.scrollIntoView();
+    }
+  }, [inputRef, isEditable, win.document.activeElement]);
   const getTriggerProps = useCallback(function (_temp) {
@@ -323,3 +355,3 @@ let {
       'data-garden-container-id': 'containers.combobox',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       onBlur,
@@ -437,3 +469,3 @@ onClick,
       'data-garden-container-id': 'containers.combobox.input',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       ref: inputRef,
@@ -515,3 +547,3 @@ role: role === null ? undefined : role,
       'data-garden-container-id': 'containers.combobox.tag',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       onClick: composeEventHandlers(onClick, handleClick),
@@ -531,3 +563,3 @@ onFocus: composeEventHandlers(onFocus, handleFocus),
       'data-garden-container-id': 'containers.combobox.listbox',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       ref: listboxRef,
@@ -547,3 +579,3 @@ role,
       'data-garden-container-id': 'containers.combobox.optgroup',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       role: role === null ? undefined : role,
@@ -562,3 +594,3 @@ ...other
       'data-garden-container-id': 'containers.combobox.option',
-      'data-garden-container-version': '0.3.2',
+      'data-garden-container-version': '0.3.3',
       role,
@@ -577,2 +609,3 @@ onMouseDown,
         'aria-selected': ariaSelected,
+        id: option ? getOptionId(disabledValues.indexOf(option.value), option.disabled) : undefined,
         ...optionProps,
@@ -588,3 +621,3 @@ onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown)
     });
-  }, [getDownshiftOptionProps, values, _selectionValue]);
+  }, [getDownshiftOptionProps, disabledValues, values, _selectionValue, getOptionId]);
   const removeSelection = useCallback(value => {
@@ -591,0 +624,0 @@ if (value === undefined) {

package.json

 {
   "name": "@zendeskgarden/container-combobox",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Containers relating to Combobox in the Garden Design System",
@@ -26,3 +26,3 @@ "license": "Apache-2.0",
     "@zendeskgarden/container-utilities": "^1.0.5",
-    "downshift": "^7.2.0"
+    "downshift": "^7.6.0"
   },
@@ -47,4 +47,3 @@ "peerDependencies": {
   },
-  "zendeskgarden:src": "src/index.ts",
-  "gitHead": "4a96c403e2baa58a3db13e5077ef65c4d1d0130f"
+  "zendeskgarden:src": "src/index.ts"
 }

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

Lines of code

1580

increased by4.36%

Worsened metrics

Total package byte prevSize

64907

decreased by-10.58%

Number of package files

9

decreased by-10%

Dependency changes

• Updateddownshift@^7.6.0