You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-aria/toolbar

Package Overview
Dependencies
Maintainers
2
Versions
380
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-aria/toolbar - npm Package Compare versions

Comparing version

3.0.0-beta.3
to
3.0.0-beta.4

dist/useToolbar.main.js
dist/useToolbar.main.js.map
dist/useToolbar.mjs
dist/useToolbar.module.js
dist/useToolbar.module.js.map

95

dist/main.js

@@ -1,5 +0,2 @@

var $8sZuk$reactariafocus = require("@react-aria/focus");
var $8sZuk$react = require("react");
var $8sZuk$reactariautils = require("@react-aria/utils");
var $8sZuk$reactariai18n = require("@react-aria/i18n");
var $b132ee173e26a273$exports = require("./useToolbar.main.js");

@@ -9,3 +6,3 @@

Object.keys(source).forEach(function(key) {
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {
return;

@@ -24,6 +21,2 @@ }

}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
/*

@@ -39,87 +32,3 @@ * Copyright 2023 Adobe. All rights reserved.

* governing permissions and limitations under the License.
*/ var $b132ee173e26a273$exports = {};
$parcel$export($b132ee173e26a273$exports, "useToolbar", () => $b132ee173e26a273$export$fa142eb1681c520);
/*
* Copyright 2023 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
function $b132ee173e26a273$export$fa142eb1681c520(props, ref) {
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props;
let [isInToolbar, setInToolbar] = (0, $8sZuk$react.useState)(false);
// should be safe because re-calling set state with the same value it already has is a no-op
// this will allow us to react should a parent re-render and change its role though
// eslint-disable-next-line react-hooks/exhaustive-deps
(0, $8sZuk$reactariautils.useLayoutEffect)(()=>{
var _ref_current_parentElement;
setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
});
const { direction: direction } = (0, $8sZuk$reactariai18n.useLocale)();
const shouldReverse = direction === "rtl" && orientation === "horizontal";
let focusManager = (0, $8sZuk$reactariafocus.createFocusManager)(ref);
const onKeyDown = (e)=>{
// don't handle portalled events
if (!e.currentTarget.contains(e.target)) return;
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") {
if (shouldReverse) focusManager.focusNext();
else focusManager.focusPrevious();
} else if (e.key === "Tab") {
// When the tab key is pressed, we want to move focus
// out of the entire toolbar. To do this, move focus
// to the first or last focusable child, and let the
// browser handle the Tab key as usual from there.
e.stopPropagation();
lastFocused.current = document.activeElement;
if (e.shiftKey) focusManager.focusFirst();
else focusManager.focusLast();
return;
} else // if we didn't handle anything, return early so we don't preventDefault
return;
// Prevent arrow keys from being handled by nested action groups.
e.stopPropagation();
e.preventDefault();
};
// Record the last focused child when focus moves out of the toolbar.
const lastFocused = (0, $8sZuk$react.useRef)(null);
const onBlur = (e)=>{
if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
};
// Restore focus to the last focused child when focus returns into the toolbar.
// If the element was removed, do nothing, either the first item in the first group,
// or the last item in the last group will be focused, depending on direction.
const onFocus = (e)=>{
var _ref_current;
if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
var _lastFocused_current;
(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
lastFocused.current = null;
}
};
return {
toolbarProps: {
role: !isInToolbar ? "toolbar" : "group",
"aria-orientation": orientation,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined,
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
onFocusCapture: !isInToolbar ? onFocus : undefined,
onBlurCapture: !isInToolbar ? onBlur : undefined
}
};
}
$parcel$exportWildcard(module.exports, $b132ee173e26a273$exports);

@@ -126,0 +35,0 @@

93

dist/module.js

@@ -1,10 +0,3 @@

import {createFocusManager as $gw6el$createFocusManager} from "@react-aria/focus";
import {useState as $gw6el$useState, useRef as $gw6el$useRef} from "react";
import {useLayoutEffect as $gw6el$useLayoutEffect} from "@react-aria/utils";
import {useLocale as $gw6el$useLocale} from "@react-aria/i18n";
import {useToolbar as $2680b1829e803644$export$fa142eb1681c520} from "./useToolbar.module.js";
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
/*

@@ -20,90 +13,6 @@ * Copyright 2023 Adobe. All rights reserved.

* governing permissions and limitations under the License.
*/ var $2680b1829e803644$exports = {};
$parcel$export($2680b1829e803644$exports, "useToolbar", () => $2680b1829e803644$export$fa142eb1681c520);
/*
* Copyright 2023 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props;
let [isInToolbar, setInToolbar] = (0, $gw6el$useState)(false);
// should be safe because re-calling set state with the same value it already has is a no-op
// this will allow us to react should a parent re-render and change its role though
// eslint-disable-next-line react-hooks/exhaustive-deps
(0, $gw6el$useLayoutEffect)(()=>{
var _ref_current_parentElement;
setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
});
const { direction: direction } = (0, $gw6el$useLocale)();
const shouldReverse = direction === "rtl" && orientation === "horizontal";
let focusManager = (0, $gw6el$createFocusManager)(ref);
const onKeyDown = (e)=>{
// don't handle portalled events
if (!e.currentTarget.contains(e.target)) return;
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") {
if (shouldReverse) focusManager.focusNext();
else focusManager.focusPrevious();
} else if (e.key === "Tab") {
// When the tab key is pressed, we want to move focus
// out of the entire toolbar. To do this, move focus
// to the first or last focusable child, and let the
// browser handle the Tab key as usual from there.
e.stopPropagation();
lastFocused.current = document.activeElement;
if (e.shiftKey) focusManager.focusFirst();
else focusManager.focusLast();
return;
} else // if we didn't handle anything, return early so we don't preventDefault
return;
// Prevent arrow keys from being handled by nested action groups.
e.stopPropagation();
e.preventDefault();
};
// Record the last focused child when focus moves out of the toolbar.
const lastFocused = (0, $gw6el$useRef)(null);
const onBlur = (e)=>{
if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
};
// Restore focus to the last focused child when focus returns into the toolbar.
// If the element was removed, do nothing, either the first item in the first group,
// or the last item in the last group will be focused, depending on direction.
const onFocus = (e)=>{
var _ref_current;
if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
var _lastFocused_current;
(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
lastFocused.current = null;
}
};
return {
toolbarProps: {
role: !isInToolbar ? "toolbar" : "group",
"aria-orientation": orientation,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined,
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
onFocusCapture: !isInToolbar ? onFocus : undefined,
onBlurCapture: !isInToolbar ? onBlur : undefined
}
};
}
export {$2680b1829e803644$export$fa142eb1681c520 as useToolbar};
//# sourceMappingURL=module.js.map

12

package.json
{
"name": "@react-aria/toolbar",
"version": "3.0.0-beta.3",
"version": "3.0.0-beta.4",
"description": "Spectrum UI components in React",

@@ -25,6 +25,6 @@ "license": "Apache-2.0",

"dependencies": {
"@react-aria/focus": "^3.16.2",
"@react-aria/i18n": "^3.10.2",
"@react-aria/utils": "^3.23.2",
"@react-types/shared": "^3.22.1",
"@react-aria/focus": "^3.17.0",
"@react-aria/i18n": "^3.11.0",
"@react-aria/utils": "^3.24.0",
"@react-types/shared": "^3.23.0",
"@swc/helpers": "^0.5.0"

@@ -38,3 +38,3 @@ },

},
"gitHead": "de9f84a22583fc741c29b341d14cd35ef4cca161"
"gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
}
dist/import.mjs

Sorry, the diff of this file is not supported yet

dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet