@react-spectrum/s2
Version:
Spectrum 2 UI components in React
258 lines (242 loc) • 11.3 kB
JavaScript
import "./ActionBar.css";
import {ActionButtonGroup as $10401bdc118cbc90$export$73d695ae27330056} from "./ActionButtonGroup.mjs";
import {CloseButton as $a9cda54c4f47ce52$export$de65de8213222d10} from "./CloseButton.mjs";
import $kxwJw$intlStringsmjs from "./intlStrings.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $kxwJw$jsx, jsxs as $kxwJw$jsxs} from "react/jsx-runtime";
import {announce as $kxwJw$announce} from "@react-aria/live-announcer";
import {createContext as $kxwJw$createContext, forwardRef as $kxwJw$forwardRef, useState as $kxwJw$useState, useCallback as $kxwJw$useCallback, useRef as $kxwJw$useRef, useEffect as $kxwJw$useEffect, useMemo as $kxwJw$useMemo} from "react";
import {useKeyboard as $kxwJw$useKeyboard, FocusScope as $kxwJw$FocusScope} from "react-aria";
import {useControlledState as $kxwJw$useControlledState} from "@react-stately/utils";
import {useDOMRef as $kxwJw$useDOMRef} from "@react-spectrum/utils";
import {useExitAnimation as $kxwJw$useExitAnimation, useResizeObserver as $kxwJw$useResizeObserver, useObjectRef as $kxwJw$useObjectRef, useEnterAnimation as $kxwJw$useEnterAnimation} from "@react-aria/utils";
import {useLocalizedStringFormatter as $kxwJw$useLocalizedStringFormatter} from "@react-aria/i18n";
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
/*
* Copyright 2024 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.
*/
const $f21f2186348fbc5b$var$actionBarStyles = function anonymous(props) {
let rules = " ";
rules += ' oc91';
rules += ' nc91';
rules += ' kc91';
rules += ' jc91';
if (props.isEmphasized) rules += ' -Ovbhqd-g091';
else rules += ' -Ovbhqd-g_g91';
rules += ' gEzkoQe91';
rules += ' _nb91';
rules += ' _oa91';
rules += ' _Lf91';
rules += ' _Mb91';
rules += ' _Ka91';
if (props.isEmphasized) rules += ' Oj91';
else rules += ' Of91';
rules += ' Ola91';
rules += ' St91';
rules += ' Rt91';
rules += ' Te91';
rules += ' Qe91';
rules += ' sd91';
rules += ' Ul91';
rules += ' ql91';
rules += ' eb91';
if (props.isInContainer) rules += ' _Pa91';
rules += ' _lr91';
rules += ' _AI91';
rules += ' -F3Iohc-_zI91';
if (props.isInContainer) rules += ' Zd91';
else rules += ' Za91';
rules += ' IM91';
rules += ' HM91';
rules += ' Ll91';
rules += ' Yg91';
rules += ' Xc91';
rules += ' _2b91';
if (props.isExiting) {
rules += ' -_8PloMd-t91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_8PloMd-t91';
rules += ' __Ya91';
} else {
rules += ' -_8PloMd-q91';
rules += ' __Ya91';
}
return rules;
};
const $f21f2186348fbc5b$export$9f306827c48feef4 = /*#__PURE__*/ (0, $kxwJw$createContext)(null);
const $f21f2186348fbc5b$export$e213cebad6250b4a = /*#__PURE__*/ (0, $kxwJw$forwardRef)(function ActionBar(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $f21f2186348fbc5b$export$9f306827c48feef4);
let domRef = (0, $kxwJw$useDOMRef)(ref);
let isOpen = props.selectedItemCount !== 0;
let isExiting = (0, $kxwJw$useExitAnimation)(domRef, isOpen && props.scrollRef != null);
if (!isOpen && !isExiting) return null;
return /*#__PURE__*/ (0, $kxwJw$jsx)($f21f2186348fbc5b$var$ActionBarInner, {
...props,
ref: domRef,
isExiting: isExiting
});
});
const $f21f2186348fbc5b$var$ActionBarInner = /*#__PURE__*/ (0, $kxwJw$forwardRef)(function ActionBarInner(props1, ref) {
let { isEmphasized: isEmphasized, selectedItemCount: selectedItemCount = 0, children: children, onClearSelection: onClearSelection, isExiting: isExiting } = props1;
let stringFormatter = (0, $kxwJw$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kxwJw$intlStringsmjs))), '@react-spectrum/s2');
// Store the last count greater than zero so that we can retain it while rendering the fade-out animation.
let [lastCount, setLastCount] = (0, $kxwJw$useState)(selectedItemCount);
if ((selectedItemCount === 'all' || selectedItemCount > 0) && selectedItemCount !== lastCount) setLastCount(selectedItemCount);
// Measure the width of the collection's scrollbar and offset the action bar by that amount.
let scrollRef = props1.scrollRef;
let [scrollbarWidth, setScrollbarWidth] = (0, $kxwJw$useState)(0);
let updateScrollbarWidth = (0, $kxwJw$useCallback)(()=>{
let el = scrollRef?.current;
if (el) {
let w = el.offsetWidth - el.clientWidth;
setScrollbarWidth(w);
}
}, [
scrollRef
]);
(0, $kxwJw$useResizeObserver)({
ref: scrollRef,
onResize: updateScrollbarWidth
});
let { keyboardProps: keyboardProps } = (0, $kxwJw$useKeyboard)({
onKeyDown (e) {
if (e.key === 'Escape') {
e.preventDefault();
onClearSelection?.();
} else e.continuePropagation();
}
});
// Announce "actions available" on mount.
let isInitial = (0, $kxwJw$useRef)(true);
(0, $kxwJw$useEffect)(()=>{
if (isInitial.current && scrollRef) {
isInitial.current = false;
(0, $kxwJw$announce)(stringFormatter.format('actionbar.actionsAvailable'));
}
}, [
stringFormatter,
scrollRef
]);
let objectRef = (0, $kxwJw$useObjectRef)(ref);
let isEntering = (0, $kxwJw$useEnterAnimation)(objectRef, !!scrollRef);
return /*#__PURE__*/ (0, $kxwJw$jsx)((0, $kxwJw$FocusScope), {
restoreFocus: true,
children: /*#__PURE__*/ (0, $kxwJw$jsxs)("div", {
ref: objectRef,
...keyboardProps,
className: $f21f2186348fbc5b$var$actionBarStyles({
isEmphasized: isEmphasized,
isInContainer: !!scrollRef,
isEntering: isEntering,
isExiting: isExiting
}),
style: {
insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`
},
children: [
/*#__PURE__*/ (0, $kxwJw$jsx)("div", {
className: " _Jb91 IM91",
children: /*#__PURE__*/ (0, $kxwJw$jsx)((0, $10401bdc118cbc90$export$73d695ae27330056), {
staticColor: isEmphasized ? 'auto' : undefined,
isQuiet: true,
"aria-label": stringFormatter.format('actionbar.actions'),
children: children
})
}),
/*#__PURE__*/ (0, $kxwJw$jsxs)("div", {
className: " _Ja91 sd91 eb91 Ub91 qb91",
children: [
/*#__PURE__*/ (0, $kxwJw$jsx)((0, $a9cda54c4f47ce52$export$de65de8213222d10), {
staticColor: isEmphasized ? 'auto' : undefined,
"aria-label": stringFormatter.format('actionbar.clearSelection'),
onPress: ()=>onClearSelection?.()
}),
/*#__PURE__*/ (0, $kxwJw$jsx)("span", {
className: function anonymous(props) {
let rules = " ";
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
rules += ' vd91';
rules += ' vsf91';
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
rules += ' _Fa91';
rules += ' _Ffb91';
if (props.isEmphasized) rules += ' pr91';
else rules += ' pt91';
return rules;
}({
isEmphasized: isEmphasized
}),
children: lastCount === 'all' ? stringFormatter.format('actionbar.selectedAll') : stringFormatter.format('actionbar.selected', {
count: lastCount
})
})
]
})
]
})
});
});
function $f21f2186348fbc5b$export$13f32e21845e01d0(props) {
let { renderActionBar: renderActionBar, scrollRef: scrollRef } = props;
let [selectedKeys, setSelectedKeys] = (0, $kxwJw$useControlledState)(props.selectedKeys, props.defaultSelectedKeys || new Set(), props.onSelectionChange);
let selectedKeysSet = (0, $kxwJw$useMemo)(()=>selectedKeys === 'all' ? selectedKeys : new Set(selectedKeys), [
selectedKeys
]);
let actionBar = (0, $kxwJw$useMemo)(()=>renderActionBar?.(selectedKeysSet), [
renderActionBar,
selectedKeysSet
]);
let selectedItemCount = selectedKeysSet === 'all' ? 'all' : selectedKeysSet.size;
let [actionBarHeight, setActionBarHeight] = (0, $kxwJw$useState)(0);
let actionBarRef = (0, $kxwJw$useCallback)((ref)=>{
let actionBar = ref?.UNSAFE_getDOMNode();
if (actionBar) setActionBarHeight(actionBar.offsetHeight + 8);
else setActionBarHeight(0);
}, []);
let actionBarContext = (0, $kxwJw$useMemo)(()=>({
ref: actionBarRef,
scrollRef: scrollRef,
selectedItemCount: selectedItemCount,
onClearSelection: ()=>setSelectedKeys(new Set())
}), [
scrollRef,
actionBarRef,
selectedItemCount,
setSelectedKeys
]);
let wrappedActionBar = (0, $kxwJw$useMemo)(()=>/*#__PURE__*/ (0, $kxwJw$jsx)($f21f2186348fbc5b$export$9f306827c48feef4.Provider, {
value: actionBarContext,
children: actionBar
}), [
actionBarContext,
actionBar
]);
return {
selectedKeys: selectedKeys,
onSelectionChange: setSelectedKeys,
actionBar: wrappedActionBar,
actionBarHeight: actionBarHeight
};
}
export {$f21f2186348fbc5b$export$9f306827c48feef4 as ActionBarContext, $f21f2186348fbc5b$export$e213cebad6250b4a as ActionBar, $f21f2186348fbc5b$export$13f32e21845e01d0 as useActionBarContainer};
//# sourceMappingURL=ActionBar.mjs.map