@keybindy/react 1.1.7 → 1.1.8

package/dist/ShortcutLabel.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 
 /**
@@ -15,6 +15,10 @@ import React from 'react';
  * <ShortcutLabel keys={['ctrl', 's']} />
  *
  * @example
+ * // With multiple bindings
+ * <ShortcutLabel keys={[['ctrl', 's'], ['meta', 's']]} />
+ *
+ * @example
  * // With custom renderKey
  * <ShortcutLabel
  *   keys={['ctrl', 'alt', 'delete']}
@@ -27,7 +31,7 @@ import React from 'react';
  * />
  *
  * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
- * @param {string[]} props.keys - The list of keys to display.
+ * @param {string[] | string[][]} props.keys - The list of keys to display.
  * @param {Function} [props.renderKey] - Optional custom render function for full control over how each key appears.
  *
  * @returns {JSX.Element} Rendered shortcut label
@@ -50,11 +54,13 @@ const ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
                 return key.toUpperCase();
         }
     };
-    const rendered = renderKey
-        ? keys.map((key, i) => (jsx(React.Fragment, { children: renderKey(key, i, keys) }, i)))
-        : defaultRenderKey
-            ? [keys.map(key => defaultRenderKey(key)).join(' + ')]
-            : [];
+    const renderSingleBinding = (binding) => {
+        if (renderKey) {
+            return binding.map((key, i) => (jsx(React.Fragment, { children: renderKey(key, i, binding) }, i)));
+        }
+        return binding.map(key => defaultRenderKey(key)).join(' + ');
+    };
+    const isNestedArray = Array.isArray(keys[0]);
     return (jsx("kbd", { style: {
             fontFamily: 'monospace',
             padding: '2.5px 5px',
@@ -63,7 +69,9 @@ const ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
             borderRadius: '4px',
             userSelect: 'none',
             ...style,
-        }, ...props, children: rendered }));
+        }, ...props, children: isNestedArray
+            ? keys.map((binding, index) => (jsxs(React.Fragment, { children: [renderSingleBinding(binding), index < keys.length - 1 && ' / '] }, index)))
+            : renderSingleBinding(keys) }));
 };
 
 export { ShortcutLabel };

package/dist/index.d.ts

@@ -56,11 +56,12 @@ type KeybindyProps = {
 };
 declare const Keybindy: React.NamedExoticComponent<KeybindyProps>;
 
+type AllowedKeys = Omit<Keys, 'Ctrl (Left)' | 'Ctrl (Right)' | 'Shift (Left)' | 'Shift (Right)' | 'Alt (Left)' | 'Alt (Right)' | 'Meta (Left)' | 'Meta (Right)'>;
 interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     /**
-     * Array of keys to display
+     * Array of keys to display. Can be a single binding `['Ctrl', 'S']` or multiple bindings `[['Ctrl', 'S'], ['Cmd', 'S']]`.
      */
-    keys: Omit<Keys, 'Ctrl (Left)' | 'Ctrl (Right)' | 'Shift (Left)' | 'Shift (Right)' | 'Alt (Left)' | 'Alt (Right)' | 'Meta (Left)' | 'Meta (Right)'>[];
+    keys: AllowedKeys[] | AllowedKeys[][];
     /**
      * Custom render function for each key
      */
@@ -74,7 +75,7 @@ interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttribute
      */
     index: number, 
     /**
-     * All keys in the array
+     * All keys in the current binding
      */
     allKeys: string[]) => React.ReactNode;
 }
@@ -92,6 +93,10 @@ interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttribute
  * <ShortcutLabel keys={['ctrl', 's']} />
  *
  * @example
+ * // With multiple bindings
+ * <ShortcutLabel keys={[['ctrl', 's'], ['meta', 's']]} />
+ *
+ * @example
  * // With custom renderKey
  * <ShortcutLabel
  *   keys={['ctrl', 'alt', 'delete']}
@@ -104,7 +109,7 @@ interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttribute
  * />
  *
  * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
- * @param {string[]} props.keys - The list of keys to display.
+ * @param {string[] | string[][]} props.keys - The list of keys to display.
  * @param {Function} [props.renderKey] - Optional custom render function for full control over how each key appears.
  *
  * @returns {JSX.Element} Rendered shortcut label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keybindy/react",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Keybindy for React: Simple, scoped keyboard shortcuts that require little setup. designed to smoothly blend in with your React applications, allowing for robust keybinding functionality without the overhead.",
   "author": {
     "name": "PRASSamin",