@react-aria/toolbar
Advanced tools
@react-aria/toolbar - npm Package Compare versions
Comparing version
@@ -27,3 +27,3 @@ var $37ePF$reactariafocus = require("@react-aria/focus"); | ||
| function $b132ee173e26a273$export$fa142eb1681c520(props, ref) { | ||
| const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props; | ||
| const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, orientation: orientation = 'horizontal' } = props; | ||
| let [isInToolbar, setInToolbar] = (0, $37ePF$react.useState)(false); | ||
@@ -38,3 +38,3 @@ // should be safe because re-calling set state with the same value it already has is a no-op | ||
| const { direction: direction } = (0, $37ePF$reactariai18n.useLocale)(); | ||
| const shouldReverse = direction === "rtl" && orientation === "horizontal"; | ||
| const shouldReverse = direction === 'rtl' && orientation === 'horizontal'; | ||
| let focusManager = (0, $37ePF$reactariafocus.createFocusManager)(ref); | ||
@@ -44,9 +44,9 @@ const onKeyDown = (e)=>{ | ||
| if (!e.currentTarget.contains(e.target)) return; | ||
| if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") { | ||
| if (orientation === 'horizontal' && e.key === 'ArrowRight' || orientation === 'vertical' && e.key === 'ArrowDown') { | ||
| if (shouldReverse) focusManager.focusPrevious(); | ||
| else focusManager.focusNext(); | ||
| } else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") { | ||
| } else if (orientation === 'horizontal' && e.key === 'ArrowLeft' || orientation === 'vertical' && e.key === 'ArrowUp') { | ||
| if (shouldReverse) focusManager.focusNext(); | ||
| else focusManager.focusPrevious(); | ||
| } else if (e.key === "Tab") { | ||
| } else if (e.key === 'Tab') { | ||
| // When the tab key is pressed, we want to move focus | ||
@@ -85,6 +85,6 @@ // out of the entire toolbar. To do this, move focus | ||
| toolbarProps: { | ||
| role: !isInToolbar ? "toolbar" : "group", | ||
| "aria-orientation": orientation, | ||
| "aria-label": ariaLabel, | ||
| "aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined, | ||
| role: !isInToolbar ? 'toolbar' : 'group', | ||
| 'aria-orientation': orientation, | ||
| 'aria-label': ariaLabel, | ||
| 'aria-labelledby': ariaLabel == null ? ariaLabelledBy : undefined, | ||
| onKeyDownCapture: !isInToolbar ? onKeyDown : undefined, | ||
@@ -91,0 +91,0 @@ onFocusCapture: !isInToolbar ? onFocus : undefined, |
@@ -21,3 +21,3 @@ import {createFocusManager as $k3LOe$createFocusManager} from "@react-aria/focus"; | ||
| function $2680b1829e803644$export$fa142eb1681c520(props, ref) { | ||
| const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props; | ||
| const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, orientation: orientation = 'horizontal' } = props; | ||
| let [isInToolbar, setInToolbar] = (0, $k3LOe$useState)(false); | ||
@@ -32,3 +32,3 @@ // should be safe because re-calling set state with the same value it already has is a no-op | ||
| const { direction: direction } = (0, $k3LOe$useLocale)(); | ||
| const shouldReverse = direction === "rtl" && orientation === "horizontal"; | ||
| const shouldReverse = direction === 'rtl' && orientation === 'horizontal'; | ||
| let focusManager = (0, $k3LOe$createFocusManager)(ref); | ||
@@ -38,9 +38,9 @@ const onKeyDown = (e)=>{ | ||
| if (!e.currentTarget.contains(e.target)) return; | ||
| if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") { | ||
| if (orientation === 'horizontal' && e.key === 'ArrowRight' || orientation === 'vertical' && e.key === 'ArrowDown') { | ||
| if (shouldReverse) focusManager.focusPrevious(); | ||
| else focusManager.focusNext(); | ||
| } else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") { | ||
| } else if (orientation === 'horizontal' && e.key === 'ArrowLeft' || orientation === 'vertical' && e.key === 'ArrowUp') { | ||
| if (shouldReverse) focusManager.focusNext(); | ||
| else focusManager.focusPrevious(); | ||
| } else if (e.key === "Tab") { | ||
| } else if (e.key === 'Tab') { | ||
| // When the tab key is pressed, we want to move focus | ||
@@ -79,6 +79,6 @@ // out of the entire toolbar. To do this, move focus | ||
| toolbarProps: { | ||
| role: !isInToolbar ? "toolbar" : "group", | ||
| "aria-orientation": orientation, | ||
| "aria-label": ariaLabel, | ||
| "aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined, | ||
| role: !isInToolbar ? 'toolbar' : 'group', | ||
| 'aria-orientation': orientation, | ||
| 'aria-label': ariaLabel, | ||
| 'aria-labelledby': ariaLabel == null ? ariaLabelledBy : undefined, | ||
| onKeyDownCapture: !isInToolbar ? onKeyDown : undefined, | ||
@@ -85,0 +85,0 @@ onFocusCapture: !isInToolbar ? onFocus : undefined, |
| { | ||
| "name": "@react-aria/toolbar", | ||
| "version": "3.0.0-nightly.4624+d80999e89", | ||
| "version": "3.0.0-nightly.4629+c34886769", | ||
| "description": "Spectrum UI components in React", | ||
@@ -25,6 +25,6 @@ "license": "Apache-2.0", | ||
| "dependencies": { | ||
| "@react-aria/focus": "3.0.0-nightly.2912+d80999e89", | ||
| "@react-aria/i18n": "3.0.0-nightly.2912+d80999e89", | ||
| "@react-aria/utils": "3.0.0-nightly.2912+d80999e89", | ||
| "@react-types/shared": "3.0.0-nightly.2912+d80999e89", | ||
| "@react-aria/focus": "3.0.0-nightly.2917+c34886769", | ||
| "@react-aria/i18n": "3.0.0-nightly.2917+c34886769", | ||
| "@react-aria/utils": "3.0.0-nightly.2917+c34886769", | ||
| "@react-types/shared": "3.0.0-nightly.2917+c34886769", | ||
| "@swc/helpers": "^0.5.0" | ||
@@ -38,3 +38,3 @@ }, | ||
| }, | ||
| "gitHead": "d80999e897b4d4db9fcfb4e9b8fcdc9fdd700882" | ||
| "gitHead": "c34886769d3e69bb56553a02eead6a0fd877e754" | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package