@zendeskgarden/container-combobox - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/index.cjs.js

@@ -79,4 +79,13 @@ /**
   const matchTimeoutRef = React.useRef();
-  const prefixRef = React.useRef(`${containerUtilities.useId(idPrefix)}-`);
   const previousStateRef = React.useRef();
+  const prefix = containerUtilities.useId(idPrefix);
+  const ids = React.useMemo(() => ({
+    label: `${prefix}--label`,
+    hint: `${prefix}--hint`,
+    trigger: `${prefix}--trigger`,
+    input: `${prefix}--input`,
+    listbox: `${prefix}--listbox`,
+    message: `${prefix}--message`,
+    getOptionId: (index, isDisabled) => `${prefix}--option${isDisabled ? '-disabled' : ''}-${index}`
+  }), [prefix]);
   const labels = React.useMemo(() => ({}), []);
@@ -233,3 +242,2 @@ const selectedValues = React.useMemo(() => [], []);
   const transformValue = value => value ? toLabel(labels, value) : '';
-  const getOptionId = React.useCallback((index, isDisabled) => `${prefixRef.current}-option${isDisabled ? '-disabled' : ''}-${index}`, []);
   const {
@@ -249,6 +257,5 @@ selectedItem: _selectionValue,
   } = downshift.useCombobox({
-    id: prefixRef.current,
-    toggleButtonId: `${prefixRef.current}-trigger`,
-    menuId: `${prefixRef.current}-listbox`,
-    getItemId: getOptionId,
+    toggleButtonId: ids.trigger,
+    menuId: ids.listbox,
+    getItemId: ids.getOptionId,
     items: values,
@@ -300,7 +307,6 @@ inputValue,
     getLabelProps: getFieldLabelProps,
-    getHintProps,
+    getHintProps: getFieldHintProps,
     getInputProps: getFieldInputProps,
-    getMessageProps
+    getMessageProps: getFieldMessageProps
   } = containerField.useField({
-    idPrefix,
     hasHint,
@@ -358,3 +364,3 @@ hasMessage
       'data-garden-container-id': 'containers.combobox',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       onBlur,
@@ -398,5 +404,2 @@ onClick,
       });
-      const {
-        'aria-labelledby': ariaLabeledBy
-      } = getFieldInputProps();
       const handleKeyDown = event => {
@@ -445,3 +448,3 @@ event.stopPropagation();
         'aria-haspopup': 'listbox',
-        'aria-labelledby': ariaLabeledBy,
+        'aria-labelledby': ids.label,
         'aria-disabled': disabled || undefined,
@@ -456,3 +459,3 @@ disabled: undefined,
     return triggerProps;
-  }, [getDownshiftTriggerProps, getDownshiftInputProps, getFieldInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, setDownshiftSelection, matchValue, values, labels, triggerContainsInput, isAutocomplete, isEditable, isMultiselectable, inputRef]);
+  }, [getDownshiftTriggerProps, getDownshiftInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, setDownshiftSelection, matchValue, values, labels, triggerContainsInput, ids.label, isAutocomplete, isEditable, isMultiselectable, inputRef]);
   const getLabelProps = React.useCallback(function (_temp2) {
@@ -466,3 +469,7 @@ let {
       ...labelProps
-    } = getFieldLabelProps(other);
+    } = getFieldLabelProps({
+      id: ids.label,
+      htmlFor: ids.input,
+      ...other
+    });
     const handleClick = () => !isEditable && triggerRef.current?.focus();
@@ -474,3 +481,7 @@ return {
     };
-  }, [getFieldLabelProps, isEditable, triggerRef]);
+  }, [getFieldLabelProps, ids.input, ids.label, isEditable, triggerRef]);
+  const getHintProps = React.useCallback(props => getFieldHintProps({
+    id: ids.hint,
+    ...props
+  }), [getFieldHintProps, ids.hint]);
   const getInputProps = React.useCallback(function (_temp3) {
@@ -485,3 +496,3 @@ let {
       'data-garden-container-id': 'containers.combobox.input',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       ref: inputRef,
@@ -494,2 +505,9 @@ role: role === null ? undefined : role,
       const handleClick = event => event.target instanceof Element && triggerRef.current?.contains(event.target) && event.stopPropagation();
+      const describedBy = [];
+      if (hasHint) {
+        describedBy.push(ids.hint);
+      }
+      if (hasMessage) {
+        describedBy.push(ids.message);
+      }
       return getDownshiftInputProps({
@@ -501,3 +519,7 @@ ...inputProps,
         onClick: containerUtilities.composeEventHandlers(onClick, handleClick),
-        ...getFieldInputProps(),
+        ...getFieldInputProps({
+          id: ids.input,
+          'aria-labelledby': ids.label,
+          'aria-describedby': describedBy.length > 0 ? describedBy.join(' ') : undefined
+        }),
         ...other
@@ -529,3 +551,3 @@ });
     };
-  }, [getDownshiftInputProps, getFieldInputProps, inputRef, triggerRef, disabled, isAutocomplete, isEditable]);
+  }, [getDownshiftInputProps, getFieldInputProps, hasHint, hasMessage, ids.hint, ids.input, ids.label, ids.message, inputRef, triggerRef, disabled, isAutocomplete, isEditable]);
   const getTagProps = React.useCallback(_ref4 => {
@@ -561,3 +583,3 @@ let {
       'data-garden-container-id': 'containers.combobox.tag',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       onClick: containerUtilities.composeEventHandlers(onClick, handleClick),
@@ -575,3 +597,3 @@ onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, handleKeyDown),
       'data-garden-container-id': 'containers.combobox.listbox',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       ref: listboxRef,
@@ -590,3 +612,3 @@ role,
       'data-garden-container-id': 'containers.combobox.optgroup',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       role: role === null ? undefined : role,
@@ -605,3 +627,3 @@ ...other
       'data-garden-container-id': 'containers.combobox.option',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       role,
@@ -620,3 +642,3 @@ onMouseDown,
         'aria-selected': ariaSelected,
-        id: option ? getOptionId(disabledValues.indexOf(option.value), option.disabled) : undefined,
+        id: option ? ids.getOptionId(disabledValues.indexOf(option.value), option.disabled) : undefined,
         ...optionProps,
@@ -633,3 +655,7 @@ onMouseDown: containerUtilities.composeEventHandlers(onMouseDown, handleMouseDown)
     });
-  }, [getDownshiftOptionProps, disabledValues, values, _selectionValue, getOptionId]);
+  }, [getDownshiftOptionProps, disabledValues, ids, values, _selectionValue]);
+  const getMessageProps = React.useCallback(props => getFieldMessageProps({
+    id: ids.message,
+    ...props
+  }), [getFieldMessageProps, ids.message]);
   const removeSelection = React.useCallback(value => {
@@ -636,0 +662,0 @@ if (value === undefined) {

dist/index.esm.js

@@ -77,4 +77,13 @@ /**
   const matchTimeoutRef = useRef();
-  const prefixRef = useRef(`${useId(idPrefix)}-`);
   const previousStateRef = useRef();
+  const prefix = useId(idPrefix);
+  const ids = useMemo(() => ({
+    label: `${prefix}--label`,
+    hint: `${prefix}--hint`,
+    trigger: `${prefix}--trigger`,
+    input: `${prefix}--input`,
+    listbox: `${prefix}--listbox`,
+    message: `${prefix}--message`,
+    getOptionId: (index, isDisabled) => `${prefix}--option${isDisabled ? '-disabled' : ''}-${index}`
+  }), [prefix]);
   const labels = useMemo(() => ({}), []);
@@ -231,3 +240,2 @@ const selectedValues = useMemo(() => [], []);
   const transformValue = value => value ? toLabel(labels, value) : '';
-  const getOptionId = useCallback((index, isDisabled) => `${prefixRef.current}-option${isDisabled ? '-disabled' : ''}-${index}`, []);
   const {
@@ -247,6 +255,5 @@ selectedItem: _selectionValue,
   } = useCombobox$1({
-    id: prefixRef.current,
-    toggleButtonId: `${prefixRef.current}-trigger`,
-    menuId: `${prefixRef.current}-listbox`,
-    getItemId: getOptionId,
+    toggleButtonId: ids.trigger,
+    menuId: ids.listbox,
+    getItemId: ids.getOptionId,
     items: values,
@@ -298,7 +305,6 @@ inputValue,
     getLabelProps: getFieldLabelProps,
-    getHintProps,
+    getHintProps: getFieldHintProps,
     getInputProps: getFieldInputProps,
-    getMessageProps
+    getMessageProps: getFieldMessageProps
   } = useField({
-    idPrefix,
     hasHint,
@@ -356,3 +362,3 @@ hasMessage
       'data-garden-container-id': 'containers.combobox',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       onBlur,
@@ -396,5 +402,2 @@ onClick,
       });
-      const {
-        'aria-labelledby': ariaLabeledBy
-      } = getFieldInputProps();
       const handleKeyDown = event => {
@@ -443,3 +446,3 @@ event.stopPropagation();
         'aria-haspopup': 'listbox',
-        'aria-labelledby': ariaLabeledBy,
+        'aria-labelledby': ids.label,
         'aria-disabled': disabled || undefined,
@@ -454,3 +457,3 @@ disabled: undefined,
     return triggerProps;
-  }, [getDownshiftTriggerProps, getDownshiftInputProps, getFieldInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, setDownshiftSelection, matchValue, values, labels, triggerContainsInput, isAutocomplete, isEditable, isMultiselectable, inputRef]);
+  }, [getDownshiftTriggerProps, getDownshiftInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, setDownshiftSelection, matchValue, values, labels, triggerContainsInput, ids.label, isAutocomplete, isEditable, isMultiselectable, inputRef]);
   const getLabelProps = useCallback(function (_temp2) {
@@ -464,3 +467,7 @@ let {
       ...labelProps
-    } = getFieldLabelProps(other);
+    } = getFieldLabelProps({
+      id: ids.label,
+      htmlFor: ids.input,
+      ...other
+    });
     const handleClick = () => !isEditable && triggerRef.current?.focus();
@@ -472,3 +479,7 @@ return {
     };
-  }, [getFieldLabelProps, isEditable, triggerRef]);
+  }, [getFieldLabelProps, ids.input, ids.label, isEditable, triggerRef]);
+  const getHintProps = useCallback(props => getFieldHintProps({
+    id: ids.hint,
+    ...props
+  }), [getFieldHintProps, ids.hint]);
   const getInputProps = useCallback(function (_temp3) {
@@ -483,3 +494,3 @@ let {
       'data-garden-container-id': 'containers.combobox.input',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       ref: inputRef,
@@ -492,2 +503,9 @@ role: role === null ? undefined : role,
       const handleClick = event => event.target instanceof Element && triggerRef.current?.contains(event.target) && event.stopPropagation();
+      const describedBy = [];
+      if (hasHint) {
+        describedBy.push(ids.hint);
+      }
+      if (hasMessage) {
+        describedBy.push(ids.message);
+      }
       return getDownshiftInputProps({
@@ -499,3 +517,7 @@ ...inputProps,
         onClick: composeEventHandlers(onClick, handleClick),
-        ...getFieldInputProps(),
+        ...getFieldInputProps({
+          id: ids.input,
+          'aria-labelledby': ids.label,
+          'aria-describedby': describedBy.length > 0 ? describedBy.join(' ') : undefined
+        }),
         ...other
@@ -527,3 +549,3 @@ });
     };
-  }, [getDownshiftInputProps, getFieldInputProps, inputRef, triggerRef, disabled, isAutocomplete, isEditable]);
+  }, [getDownshiftInputProps, getFieldInputProps, hasHint, hasMessage, ids.hint, ids.input, ids.label, ids.message, inputRef, triggerRef, disabled, isAutocomplete, isEditable]);
   const getTagProps = useCallback(_ref4 => {
@@ -559,3 +581,3 @@ let {
       'data-garden-container-id': 'containers.combobox.tag',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       onClick: composeEventHandlers(onClick, handleClick),
@@ -573,3 +595,3 @@ onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
       'data-garden-container-id': 'containers.combobox.listbox',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       ref: listboxRef,
@@ -588,3 +610,3 @@ role,
       'data-garden-container-id': 'containers.combobox.optgroup',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       role: role === null ? undefined : role,
@@ -603,3 +625,3 @@ ...other
       'data-garden-container-id': 'containers.combobox.option',
-      'data-garden-container-version': '1.0.8',
+      'data-garden-container-version': '1.0.9',
       role,
@@ -618,3 +640,3 @@ onMouseDown,
         'aria-selected': ariaSelected,
-        id: option ? getOptionId(disabledValues.indexOf(option.value), option.disabled) : undefined,
+        id: option ? ids.getOptionId(disabledValues.indexOf(option.value), option.disabled) : undefined,
         ...optionProps,
@@ -631,3 +653,7 @@ onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown)
     });
-  }, [getDownshiftOptionProps, disabledValues, values, _selectionValue, getOptionId]);
+  }, [getDownshiftOptionProps, disabledValues, ids, values, _selectionValue]);
+  const getMessageProps = useCallback(props => getFieldMessageProps({
+    id: ids.message,
+    ...props
+  }), [getFieldMessageProps, ids.message]);
   const removeSelection = useCallback(value => {
@@ -634,0 +660,0 @@ if (value === undefined) {

package.json

 {
   "name": "@zendeskgarden/container-combobox",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Containers relating to Combobox in the Garden Design System",
@@ -24,3 +24,3 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.8.4",
-    "@zendeskgarden/container-field": "^3.0.9",
+    "@zendeskgarden/container-field": "^3.0.10",
     "@zendeskgarden/container-utilities": "^1.0.10",
@@ -48,3 +48,3 @@ "downshift": "^8.0.0"
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "de544aca38d527b10a776663817d05dbf622e9c4"
+  "gitHead": "6523f5dcc225b783360b3668d62d4fad3a2d0ffb"
 }

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

77503

increased by2.17%

Lines of code

1648

increased by3.26%

Dependency changes

• Updated@zendeskgarden/container-field@^3.0.10