@zendeskgarden/container-menu - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

dist/index.cjs.js

@@ -15,2 +15,10 @@ /**
 
+const triggerLink = (element, view) => {
+  const event = new MouseEvent('click', {
+    bubbles: true,
+    cancelable: true,
+    view
+  });
+  element.dispatchEvent(event);
+};
 const StateChangeTypes = {
@@ -253,3 +261,4 @@ FnSetStateRefs: 'fn:setStateRefs',
     selectedValue: focusedValue || uncontrolledFocusedValue,
-    focusedValue: focusedValue || uncontrolledFocusedValue
+    focusedValue: focusedValue || uncontrolledFocusedValue,
+    allowDefaultOnSelect: true
   });
@@ -344,2 +353,25 @@ const closeMenu = React.useCallback(changeType => {
   }, [controlledSelectedItems]);
+  const anchorItemError = _ref4 => {
+    let {
+      isNext,
+      isPrevious,
+      type,
+      value
+    } = _ref4;
+    let invariantKey;
+    if (isNext) {
+      invariantKey = 'isNext';
+    } else if (isPrevious) {
+      invariantKey = 'isPrevious';
+    } else {
+      invariantKey = type;
+    }
+    const invariantType = {
+      isNext: 'isNext',
+      isPrevious: 'isPrevious',
+      radio: 'radio',
+      checkbox: 'checkbox'
+    }[invariantKey];
+    throw new Error(`Error: expected useMenu anchor item '${value}' to not use '${invariantType}'`);
+  };
   const handleTriggerClick = React.useCallback(event => {
@@ -516,2 +548,10 @@ event.stopPropagation();
       };
+      if (item.href) {
+        if (key === containerUtilities.KEYS.SPACE) {
+          event.preventDefault();
+          triggerLink(event.target, environment || window);
+        }
+      } else {
+        event.preventDefault();
+      }
       if (!isTransitionItem) {
@@ -528,2 +568,3 @@ focusTriggerRef.current = true;
       if (changeType) {
+        event.preventDefault();
         changes = {
@@ -541,2 +582,3 @@ value: item.value
       if (changeType) {
+        event.preventDefault();
         changes = {
@@ -547,2 +589,3 @@ value: item.value
     } else if (isVerticalArrowKeys || isJumpKey || isAlphanumericChar) {
+      event.preventDefault();
       changeType = isAlphanumericChar ? StateChangeTypes.MenuItemKeyDown : StateChangeTypes[toMenuItemKeyDownType(key)];
@@ -564,3 +607,2 @@ const nextFocusedValue = getNextFocusedValue({
     if (changeType) {
-      event.preventDefault();
       event.stopPropagation();
@@ -589,3 +631,3 @@ const transitionNext = changeType.includes('next');
     }
-  }, [rtl, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, focusTriggerRef, getNextFocusedValue, getSelectedItems, onChange]);
+  }, [rtl, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, focusTriggerRef, environment, getNextFocusedValue, getSelectedItems, onChange]);
   const handleItemMouseEnter = React.useCallback(value => {
@@ -677,3 +719,3 @@ const changeType = StateChangeTypes.MenuItemMouseMove;
       'data-garden-container-id': 'containers.menu.trigger',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       ref: triggerRef,
@@ -703,3 +745,3 @@ id: triggerId,
       'data-garden-container-id': 'containers.menu',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       'aria-labelledby': triggerId,
@@ -719,19 +761,19 @@ tabIndex: -1,
       'data-garden-container-id': 'containers.menu.separator',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       role: role === null ? undefined : role
     };
   }, []);
-  const getItemGroupProps = React.useCallback(_ref4 => {
+  const getItemGroupProps = React.useCallback(_ref5 => {
     let {
       role = 'group',
       ...other
-    } = _ref4;
+    } = _ref5;
     return {
       ...other,
       'data-garden-container-id': 'containers.menu.item_group',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       role: role === null ? undefined : role
     };
   }, []);
-  const getItemProps = React.useCallback(_ref5 => {
+  const getItemProps = React.useCallback(_ref6 => {
     let {
@@ -744,3 +786,3 @@ role = 'menuitem',
       ...other
-    } = _ref5;
+    } = _ref6;
     const {
@@ -751,2 +793,4 @@ disabled: itemDisabled,
       value,
+      href,
+      isExternal,
       isNext = false,
@@ -765,3 +809,3 @@ isPrevious = false,
       'data-garden-container-id': 'containers.menu.item',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       'aria-selected': undefined,
@@ -771,2 +815,3 @@ 'aria-checked': selected,
       role: itemRole === null ? undefined : itemRole,
+      href,
       onClick,
@@ -777,2 +822,9 @@ onKeyDown,
     };
+    if (href && isExternal) {
+      elementProps.target = '_blank';
+      elementProps.rel = 'noopener noreferrer';
+    }
+    if (href && (isNext || isPrevious || type)) {
+      anchorItemError(item);
+    }
     if (itemDisabled) {
@@ -779,0 +831,0 @@ return elementProps;

dist/index.esm.js

@@ -13,2 +13,10 @@ /**
 
+const triggerLink = (element, view) => {
+  const event = new MouseEvent('click', {
+    bubbles: true,
+    cancelable: true,
+    view
+  });
+  element.dispatchEvent(event);
+};
 const StateChangeTypes = {
@@ -251,3 +259,4 @@ FnSetStateRefs: 'fn:setStateRefs',
     selectedValue: focusedValue || uncontrolledFocusedValue,
-    focusedValue: focusedValue || uncontrolledFocusedValue
+    focusedValue: focusedValue || uncontrolledFocusedValue,
+    allowDefaultOnSelect: true
   });
@@ -342,2 +351,25 @@ const closeMenu = useCallback(changeType => {
   }, [controlledSelectedItems]);
+  const anchorItemError = _ref4 => {
+    let {
+      isNext,
+      isPrevious,
+      type,
+      value
+    } = _ref4;
+    let invariantKey;
+    if (isNext) {
+      invariantKey = 'isNext';
+    } else if (isPrevious) {
+      invariantKey = 'isPrevious';
+    } else {
+      invariantKey = type;
+    }
+    const invariantType = {
+      isNext: 'isNext',
+      isPrevious: 'isPrevious',
+      radio: 'radio',
+      checkbox: 'checkbox'
+    }[invariantKey];
+    throw new Error(`Error: expected useMenu anchor item '${value}' to not use '${invariantType}'`);
+  };
   const handleTriggerClick = useCallback(event => {
@@ -514,2 +546,10 @@ event.stopPropagation();
       };
+      if (item.href) {
+        if (key === KEYS.SPACE) {
+          event.preventDefault();
+          triggerLink(event.target, environment || window);
+        }
+      } else {
+        event.preventDefault();
+      }
       if (!isTransitionItem) {
@@ -526,2 +566,3 @@ focusTriggerRef.current = true;
       if (changeType) {
+        event.preventDefault();
         changes = {
@@ -539,2 +580,3 @@ value: item.value
       if (changeType) {
+        event.preventDefault();
         changes = {
@@ -545,2 +587,3 @@ value: item.value
     } else if (isVerticalArrowKeys || isJumpKey || isAlphanumericChar) {
+      event.preventDefault();
       changeType = isAlphanumericChar ? StateChangeTypes.MenuItemKeyDown : StateChangeTypes[toMenuItemKeyDownType(key)];
@@ -562,3 +605,2 @@ const nextFocusedValue = getNextFocusedValue({
     if (changeType) {
-      event.preventDefault();
       event.stopPropagation();
@@ -587,3 +629,3 @@ const transitionNext = changeType.includes('next');
     }
-  }, [rtl, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, focusTriggerRef, getNextFocusedValue, getSelectedItems, onChange]);
+  }, [rtl, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, focusTriggerRef, environment, getNextFocusedValue, getSelectedItems, onChange]);
   const handleItemMouseEnter = useCallback(value => {
@@ -675,3 +717,3 @@ const changeType = StateChangeTypes.MenuItemMouseMove;
       'data-garden-container-id': 'containers.menu.trigger',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       ref: triggerRef,
@@ -701,3 +743,3 @@ id: triggerId,
       'data-garden-container-id': 'containers.menu',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       'aria-labelledby': triggerId,
@@ -717,19 +759,19 @@ tabIndex: -1,
       'data-garden-container-id': 'containers.menu.separator',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       role: role === null ? undefined : role
     };
   }, []);
-  const getItemGroupProps = useCallback(_ref4 => {
+  const getItemGroupProps = useCallback(_ref5 => {
     let {
       role = 'group',
       ...other
-    } = _ref4;
+    } = _ref5;
     return {
       ...other,
       'data-garden-container-id': 'containers.menu.item_group',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       role: role === null ? undefined : role
     };
   }, []);
-  const getItemProps = useCallback(_ref5 => {
+  const getItemProps = useCallback(_ref6 => {
     let {
@@ -742,3 +784,3 @@ role = 'menuitem',
       ...other
-    } = _ref5;
+    } = _ref6;
     const {
@@ -749,2 +791,4 @@ disabled: itemDisabled,
       value,
+      href,
+      isExternal,
       isNext = false,
@@ -763,3 +807,3 @@ isPrevious = false,
       'data-garden-container-id': 'containers.menu.item',
-      'data-garden-container-version': '0.3.4',
+      'data-garden-container-version': '0.4.0',
       'aria-selected': undefined,
@@ -769,2 +813,3 @@ 'aria-checked': selected,
       role: itemRole === null ? undefined : itemRole,
+      href,
       onClick,
@@ -775,2 +820,9 @@ onKeyDown,
     };
+    if (href && isExternal) {
+      elementProps.target = '_blank';
+      elementProps.rel = 'noopener noreferrer';
+    }
+    if (href && (isNext || isPrevious || type)) {
+      anchorItemError(item);
+    }
     if (itemDisabled) {
@@ -777,0 +829,0 @@ return elementProps;

dist/typings/types.d.ts

@@ -14,2 +14,4 @@ /**
     disabled?: boolean;
+    href?: string;
+    isExternal?: boolean;
 }
@@ -16,0 +18,0 @@ export interface IMenuItemBase extends ISelectedItem {

dist/typings/utils.d.ts

@@ -9,2 +9,3 @@ /**
 import { MenuItem, ISelectedItem } from './types';
+export declare const triggerLink: (element: HTMLAnchorElement, view: Window) => void;
 export declare const StateChangeTypes: Record<string, string>;
@@ -11,0 +12,0 @@ export declare const isItemGroup: (item: MenuItem) => boolean;

package.json

 {
   "name": "@zendeskgarden/container-menu",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Containers relating to Menu in the Garden Design System",
@@ -24,3 +24,3 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.8.4",
-    "@zendeskgarden/container-selection": "^3.0.10",
+    "@zendeskgarden/container-selection": "^3.1.0",
     "@zendeskgarden/container-utilities": "^2.0.0"
@@ -47,3 +47,3 @@ },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "f20538e24c81c09be96684315918d74937d814e0"
+  "gitHead": "491956bc834aab2e23db721f85c77254cc37e178"
 }

README.md

@@ -64,3 +64,4 @@ # @zendeskgarden/container-menu [![npm version][npm version badge]][npm version link]
     { value: 'value-2', label: 'Two' },
-    { value: 'value-3', label: 'Three' }
+    { value: 'value-3', label: 'Three', href: '#0' },
+    { value: 'value-4', label: 'Four' }
   ];
@@ -74,7 +75,13 @@
           <ul {...getMenuProps()} style={{ visibility: isExpanded ? 'visible' : 'hidden' }}>
-            {items.map(item => (
-              <li key={item.value} {...getItemProps({ item })}>
-                {item.label}
-              </li>
-            ))}
+            {items.map(item =>
+              item.href ? (
+                <li key={item.value} role="none">
+                  <a {...getItemProps({ item })}>{item.label}</a>
+                </li>
+              ) : (
+                <li key={item.value} {...getItemProps({ item })}>
+                  {item.label}
+                </li>
+              )
+            )}
           </ul>
@@ -81,0 +88,0 @@ </>

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

77065

increased by4.08%

Lines of code

1928

increased by5.88%

Number of lines in readme file

92

increased by8.24%

Dependency changes

• Updated@zendeskgarden/container-selection@^3.1.0