@zendeskgarden/container-menu - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/index.cjs.js

@@ -212,3 +212,3 @@ /**
   const isExpandedControlled = isExpanded !== undefined;
-  const isSelectionValueControlled = selectedItems !== undefined;
+  const isSelectedItemsControlled = selectedItems !== undefined;
   const isFocusedValueControlled = focusedValue !== undefined;
@@ -223,2 +223,3 @@ const menuItems = React.useMemo(() => rawItems.reduce((items, item) => {
   }, []), [rawItems]);
+  const initialSelectedItems = React.useMemo(() => menuItems.filter(item => !!(item.type && ['radio', 'checkbox'].includes(item.type) && item.selected)), [menuItems]);
   const values = React.useMemo(() => menuItems.map(item => item.value), [menuItems]);
@@ -233,3 +234,3 @@ const itemRefs = React.useMemo(() => values.reduce((acc, v) => {
     isExpanded: isExpanded || defaultExpanded,
-    selectedItems: [],
+    selectedItems: initialSelectedItems,
     valuesRef: values,
@@ -270,20 +271,10 @@ focusOnOpen: false,
   const isItemSelected = React.useCallback((value, type, name) => {
-    switch (type) {
-      case 'checkbox':
-        {
-          return !!controlledSelectedItems.find(item => item.value === value);
-        }
-      case 'radio':
-        {
-          const match = controlledSelectedItems.filter(item => item.name === name)[0];
-          if (match) {
-            return match.value === value;
-          }
-          return false;
-        }
-      default:
-        {
-          return undefined;
-        }
+    let isSelected;
+    if (type === 'checkbox') {
+      isSelected = !!controlledSelectedItems.find(item => item.value === value);
+    } else if (type === 'radio') {
+      const match = controlledSelectedItems.filter(item => item.name === name)[0];
+      isSelected = match?.value === value;
     }
+    return isSelected;
   }, [controlledSelectedItems]);
@@ -466,3 +457,3 @@ const getNextFocusedValue = React.useCallback(_ref2 => {
         }),
-        ...(!isSelectionValueControlled && nextSelection && {
+        ...(!isSelectedItemsControlled && nextSelection && {
           selectedItems: nextSelection
@@ -481,3 +472,3 @@ })
     });
-  }, [state.nestedPathIds, isExpandedControlled, isSelectionValueControlled, getSelectedItems, onChange]);
+  }, [state.nestedPathIds, isExpandedControlled, isSelectedItemsControlled, getSelectedItems, onChange]);
   const handleItemKeyDown = React.useCallback((event, item) => {
@@ -514,3 +505,3 @@ const {
         }),
-        ...(!isSelectionValueControlled && nextSelection && {
+        ...(!isSelectedItemsControlled && nextSelection && {
           selectedItems: nextSelection
@@ -585,3 +576,3 @@ })
     }
-  }, [rtl, triggerRef, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectionValueControlled, getNextFocusedValue, getSelectedItems, onChange]);
+  }, [rtl, triggerRef, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, getNextFocusedValue, getSelectedItems, onChange]);
   const handleItemMouseEnter = React.useCallback(value => {
@@ -668,3 +659,3 @@ const changeType = StateChangeTypes.MenuItemMouseMove;
       'data-garden-container-id': 'containers.menu.trigger',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       ref: triggerRef,
@@ -694,3 +685,3 @@ id: triggerId,
       'data-garden-container-id': 'containers.menu',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       'aria-labelledby': triggerId,
@@ -710,3 +701,3 @@ tabIndex: -1,
       'data-garden-container-id': 'containers.menu.separator',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       role: role === null ? undefined : role
@@ -723,3 +714,3 @@ };
       'data-garden-container-id': 'containers.menu.item_group',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       role: role === null ? undefined : role
@@ -755,3 +746,3 @@ };
       'data-garden-container-id': 'containers.menu.item',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       'aria-selected': undefined,
@@ -758,0 +749,0 @@ 'aria-checked': selected,

dist/index.esm.js

@@ -210,3 +210,3 @@ /**
   const isExpandedControlled = isExpanded !== undefined;
-  const isSelectionValueControlled = selectedItems !== undefined;
+  const isSelectedItemsControlled = selectedItems !== undefined;
   const isFocusedValueControlled = focusedValue !== undefined;
@@ -221,2 +221,3 @@ const menuItems = useMemo(() => rawItems.reduce((items, item) => {
   }, []), [rawItems]);
+  const initialSelectedItems = useMemo(() => menuItems.filter(item => !!(item.type && ['radio', 'checkbox'].includes(item.type) && item.selected)), [menuItems]);
   const values = useMemo(() => menuItems.map(item => item.value), [menuItems]);
@@ -231,3 +232,3 @@ const itemRefs = useMemo(() => values.reduce((acc, v) => {
     isExpanded: isExpanded || defaultExpanded,
-    selectedItems: [],
+    selectedItems: initialSelectedItems,
     valuesRef: values,
@@ -268,20 +269,10 @@ focusOnOpen: false,
   const isItemSelected = useCallback((value, type, name) => {
-    switch (type) {
-      case 'checkbox':
-        {
-          return !!controlledSelectedItems.find(item => item.value === value);
-        }
-      case 'radio':
-        {
-          const match = controlledSelectedItems.filter(item => item.name === name)[0];
-          if (match) {
-            return match.value === value;
-          }
-          return false;
-        }
-      default:
-        {
-          return undefined;
-        }
+    let isSelected;
+    if (type === 'checkbox') {
+      isSelected = !!controlledSelectedItems.find(item => item.value === value);
+    } else if (type === 'radio') {
+      const match = controlledSelectedItems.filter(item => item.name === name)[0];
+      isSelected = match?.value === value;
     }
+    return isSelected;
   }, [controlledSelectedItems]);
@@ -464,3 +455,3 @@ const getNextFocusedValue = useCallback(_ref2 => {
         }),
-        ...(!isSelectionValueControlled && nextSelection && {
+        ...(!isSelectedItemsControlled && nextSelection && {
           selectedItems: nextSelection
@@ -479,3 +470,3 @@ })
     });
-  }, [state.nestedPathIds, isExpandedControlled, isSelectionValueControlled, getSelectedItems, onChange]);
+  }, [state.nestedPathIds, isExpandedControlled, isSelectedItemsControlled, getSelectedItems, onChange]);
   const handleItemKeyDown = useCallback((event, item) => {
@@ -512,3 +503,3 @@ const {
         }),
-        ...(!isSelectionValueControlled && nextSelection && {
+        ...(!isSelectedItemsControlled && nextSelection && {
           selectedItems: nextSelection
@@ -583,3 +574,3 @@ })
     }
-  }, [rtl, triggerRef, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectionValueControlled, getNextFocusedValue, getSelectedItems, onChange]);
+  }, [rtl, triggerRef, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, getNextFocusedValue, getSelectedItems, onChange]);
   const handleItemMouseEnter = useCallback(value => {
@@ -666,3 +657,3 @@ const changeType = StateChangeTypes.MenuItemMouseMove;
       'data-garden-container-id': 'containers.menu.trigger',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       ref: triggerRef,
@@ -692,3 +683,3 @@ id: triggerId,
       'data-garden-container-id': 'containers.menu',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       'aria-labelledby': triggerId,
@@ -708,3 +699,3 @@ tabIndex: -1,
       'data-garden-container-id': 'containers.menu.separator',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       role: role === null ? undefined : role
@@ -721,3 +712,3 @@ };
       'data-garden-container-id': 'containers.menu.item_group',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       role: role === null ? undefined : role
@@ -753,3 +744,3 @@ };
       'data-garden-container-id': 'containers.menu.item',
-      'data-garden-container-version': '0.1.1',
+      'data-garden-container-version': '0.2.0',
       'aria-selected': undefined,
@@ -756,0 +747,0 @@ 'aria-checked': selected,

dist/typings/types.d.ts

@@ -13,5 +13,6 @@ /**
     type?: 'radio' | 'checkbox';
+    disabled?: boolean;
 }
 export interface IMenuItemBase extends ISelectedItem {
-    disabled?: boolean;
+    selected?: boolean;
     isNext?: boolean;
@@ -34,9 +35,10 @@ isPrevious?: boolean;
      * @param {string} item.value Unique item value
-     * @param {string} item.label Human-readable item display value
+     * @param {string} item.label Optional human-readable text value (defaults to `item.value`)
      * @param {string} item.name A shared name corresponding to an item radio group
      * @param {boolean} item.disabled Indicates the item is not interactive
+     * @param {boolean} item.selected Sets initial selection for the option
      * @param {boolean} item.isNext - Indicates the item transitions to a nested menu
      * @param {boolean} item.isPrevious - Indicates the item will transition back from a nested menu
      * @param {boolean} item.separator Indicates the item is a placeholder for a separator
-     * @param {IMenuItemBase[]} item.items Groups a list of items
+     * @param {(IMenuItemBase | IMenuItemSeparator)[]} item.items Groups a list of items
      */
@@ -43,0 +45,0 @@ items: MenuItem[];

package.json

 {
   "name": "@zendeskgarden/container-menu",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Containers relating to Menu in the Garden Design System",
@@ -46,3 +46,3 @@ "license": "Apache-2.0",
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "c83c73752d29655d6a1a9286375c4c9d2e094e36"
+  "gitHead": "014474b642773f9a4f7c847b4791fa01ff324c43"
 }

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

72981

increased by0.38%

Worsened metrics

Lines of code

1785

decreased by-0.89%

No dependency changes