@zendeskgarden/container-combobox - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/index.cjs.js

@@ -68,3 +68,3 @@ /**
   } = _ref;
-  const doc = environment || document;
+  const win = environment || window;
   const prefix = `${containerUtilities.useId(idPrefix)}-`;
@@ -257,3 +257,3 @@ const [triggerContainsInput, setTriggerContainsInput] = React.useState();
     stateReducer,
-    environment: doc.defaultView || window
+    environment: win
   });
@@ -306,11 +306,6 @@ const {
     } = _temp === void 0 ? {} : _temp;
-    const handleBlur = event => {
-      if (event.relatedTarget === null || !event.currentTarget?.contains(event.relatedTarget)) {
-        closeListbox();
-      }
-    };
     const triggerProps = getDownshiftTriggerProps({
       'data-garden-container-id': 'containers.combobox',
-      'data-garden-container-version': '0.1.1',
-      onBlur: containerUtilities.composeEventHandlers(onBlur, handleBlur),
+      'data-garden-container-version': '0.2.0',
+      onBlur,
       onClick,
@@ -323,2 +318,7 @@ onKeyDown,
     if (isEditable && triggerContainsInput) {
+      const handleBlur = event => {
+        if (event.relatedTarget === null || !event.currentTarget?.contains(event.relatedTarget)) {
+          closeListbox();
+        }
+      };
       const handleClick = event => {
@@ -335,5 +335,6 @@ if (disabled) {
         ...triggerProps,
+        onBlur: containerUtilities.composeEventHandlers(onBlur, handleBlur),
         onClick: containerUtilities.composeEventHandlers(onClick, handleClick),
         'aria-controls': isAutocomplete ? triggerProps['aria-controls'] : undefined,
-        'aria-expanded': isAutocomplete ? triggerProps['aria-expanded'] : undefined,
+        'aria-expanded': undefined,
         'aria-disabled': disabled || undefined,
@@ -422,3 +423,3 @@ disabled: undefined
       'data-garden-container-id': 'containers.combobox.input',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       ref: inputRef,
@@ -500,3 +501,3 @@ role: role === null ? undefined : role,
       'data-garden-container-id': 'containers.combobox.tag',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       onClick: containerUtilities.composeEventHandlers(onClick, handleClick),
@@ -516,3 +517,3 @@ onFocus: containerUtilities.composeEventHandlers(onFocus, handleFocus),
       'data-garden-container-id': 'containers.combobox.listbox',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       ref: listboxRef,
@@ -532,3 +533,3 @@ role,
       'data-garden-container-id': 'containers.combobox.optgroup',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       role: role === null ? undefined : role,
@@ -547,10 +548,13 @@ ...other
       'data-garden-container-id': 'containers.combobox.option',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       role,
       'aria-disabled': option?.disabled,
+      onMouseDown,
       ...other
     };
+    const ariaSelected = Array.isArray(_selectionValue) ? _selectionValue?.includes(option?.value) : _selectionValue === option?.value;
     if (option === undefined || option.disabled) {
       const handleMouseDown = event => event.preventDefault();
       return {
+        'aria-selected': ariaSelected,
         ...optionProps,
@@ -560,3 +564,2 @@ onMouseDown: containerUtilities.composeEventHandlers(onMouseDown, handleMouseDown)
     }
-    const ariaSelected = Array.isArray(_selectionValue) ? _selectionValue?.includes(option.value) : _selectionValue === option.value;
     return getDownshiftOptionProps({
@@ -563,0 +566,0 @@ item: option.value,

dist/index.esm.js

@@ -66,3 +66,3 @@ /**
   } = _ref;
-  const doc = environment || document;
+  const win = environment || window;
   const prefix = `${useId(idPrefix)}-`;
@@ -255,3 +255,3 @@ const [triggerContainsInput, setTriggerContainsInput] = useState();
     stateReducer,
-    environment: doc.defaultView || window
+    environment: win
   });
@@ -304,11 +304,6 @@ const {
     } = _temp === void 0 ? {} : _temp;
-    const handleBlur = event => {
-      if (event.relatedTarget === null || !event.currentTarget?.contains(event.relatedTarget)) {
-        closeListbox();
-      }
-    };
     const triggerProps = getDownshiftTriggerProps({
       'data-garden-container-id': 'containers.combobox',
-      'data-garden-container-version': '0.1.1',
-      onBlur: composeEventHandlers(onBlur, handleBlur),
+      'data-garden-container-version': '0.2.0',
+      onBlur,
       onClick,
@@ -321,2 +316,7 @@ onKeyDown,
     if (isEditable && triggerContainsInput) {
+      const handleBlur = event => {
+        if (event.relatedTarget === null || !event.currentTarget?.contains(event.relatedTarget)) {
+          closeListbox();
+        }
+      };
       const handleClick = event => {
@@ -333,5 +333,6 @@ if (disabled) {
         ...triggerProps,
+        onBlur: composeEventHandlers(onBlur, handleBlur),
         onClick: composeEventHandlers(onClick, handleClick),
         'aria-controls': isAutocomplete ? triggerProps['aria-controls'] : undefined,
-        'aria-expanded': isAutocomplete ? triggerProps['aria-expanded'] : undefined,
+        'aria-expanded': undefined,
         'aria-disabled': disabled || undefined,
@@ -420,3 +421,3 @@ disabled: undefined
       'data-garden-container-id': 'containers.combobox.input',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       ref: inputRef,
@@ -498,3 +499,3 @@ role: role === null ? undefined : role,
       'data-garden-container-id': 'containers.combobox.tag',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       onClick: composeEventHandlers(onClick, handleClick),
@@ -514,3 +515,3 @@ onFocus: composeEventHandlers(onFocus, handleFocus),
       'data-garden-container-id': 'containers.combobox.listbox',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       ref: listboxRef,
@@ -530,3 +531,3 @@ role,
       'data-garden-container-id': 'containers.combobox.optgroup',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       role: role === null ? undefined : role,
@@ -545,10 +546,13 @@ ...other
       'data-garden-container-id': 'containers.combobox.option',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       role,
       'aria-disabled': option?.disabled,
+      onMouseDown,
       ...other
     };
+    const ariaSelected = Array.isArray(_selectionValue) ? _selectionValue?.includes(option?.value) : _selectionValue === option?.value;
     if (option === undefined || option.disabled) {
       const handleMouseDown = event => event.preventDefault();
       return {
+        'aria-selected': ariaSelected,
         ...optionProps,
@@ -558,3 +562,2 @@ onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown)
     }
-    const ariaSelected = Array.isArray(_selectionValue) ? _selectionValue?.includes(option.value) : _selectionValue === option.value;
     return getDownshiftOptionProps({
@@ -561,0 +564,0 @@ item: option.value,

dist/typings/types.d.ts

@@ -85,3 +85,3 @@ /**
     /** Sets the environment where the combobox is rendered */
-    environment?: Document;
+    environment?: Window;
 }
@@ -88,0 +88,0 @@ export interface IUseComboboxReturnValue {

dist/typings/useCombobox.d.ts

@@ -8,2 +8,2 @@ /**
 import { IUseComboboxProps, IUseComboboxReturnValue } from './types';
-export declare const useCombobox: ({ idPrefix, triggerRef, inputRef, listboxRef, isAutocomplete, isMultiselectable, isEditable, disabled, hasHint, hasMessage, options, inputValue, selectionValue, isExpanded, defaultExpanded, initialExpanded, activeIndex, defaultActiveIndex, initialActiveIndex, onChange, environment }: IUseComboboxProps) => IUseComboboxReturnValue;
+export declare const useCombobox: <T extends HTMLElement = HTMLElement, L extends HTMLElement = HTMLElement>({ idPrefix, triggerRef, inputRef, listboxRef, isAutocomplete, isMultiselectable, isEditable, disabled, hasHint, hasMessage, options, inputValue, selectionValue, isExpanded, defaultExpanded, initialExpanded, activeIndex, defaultActiveIndex, initialActiveIndex, onChange, environment }: IUseComboboxProps<T, L>) => IUseComboboxReturnValue;

package.json

 {
   "name": "@zendeskgarden/container-combobox",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Containers relating to Combobox in the Garden Design System",
@@ -47,3 +47,3 @@ "license": "Apache-2.0",
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "77422fb17c5bced6347566e4d63fa81a9cb74709"
+  "gitHead": "0697cea00d85c7ed12238b6134c0672da60adb0c"
 }

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

71192

increased by0.15%

Lines of code

1478

increased by0.41%

No dependency changes