@react-spectrum/s2
Version:
Spectrum 2 UI components in React
265 lines (247 loc) • 11.4 kB
JavaScript
require("./ActionBar.css");
var $7a26131f6144af2b$exports = require("./ActionButtonGroup.cjs");
var $2f907cb84c6e9e75$exports = require("./CloseButton.cjs");
var $4526404114e78c80$exports = require("./intlStrings.cjs");
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
var $cRsNx$reactjsxruntime = require("react/jsx-runtime");
var $cRsNx$reactarialiveannouncer = require("@react-aria/live-announcer");
var $cRsNx$react = require("react");
var $cRsNx$reactaria = require("react-aria");
var $cRsNx$reactstatelyutils = require("@react-stately/utils");
var $cRsNx$reactspectrumutils = require("@react-spectrum/utils");
var $cRsNx$reactariautils = require("@react-aria/utils");
var $cRsNx$reactariai18n = require("@react-aria/i18n");
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "ActionBarContext", () => $85bf454149fe9ddc$export$9f306827c48feef4);
$parcel$export(module.exports, "ActionBar", () => $85bf454149fe9ddc$export$e213cebad6250b4a);
$parcel$export(module.exports, "useActionBarContainer", () => $85bf454149fe9ddc$export$13f32e21845e01d0);
/*
* 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 $85bf454149fe9ddc$var$actionBarStyles = function anonymous(props) {
let rules = " ";
rules += ' oc1';
rules += ' nc1';
rules += ' kc1';
rules += ' jc1';
if (props.isEmphasized) rules += ' -Ovbhqd-g01';
else rules += ' -Ovbhqd-g_g1';
rules += ' gEzkoQe1';
rules += ' _nLeasBb1';
rules += ' _oa1';
rules += ' _Lf1';
rules += ' _Mb1';
if (props.isEmphasized) rules += ' Oj1';
else rules += ' Oye39g1';
rules += ' Ola1';
rules += ' St1';
rules += ' Rt1';
rules += ' Te1';
rules += ' Qe1';
rules += ' sd1';
rules += ' Ul1';
rules += ' ql1';
rules += ' eb1';
if (props.isInContainer) rules += ' _Pa1';
rules += ' _lr1';
rules += ' _AI1';
rules += ' -F3Iohc-_zI1';
if (props.isInContainer) rules += ' Zd1';
else rules += ' Za1';
rules += ' IM1';
rules += ' HM1';
rules += ' Ll1';
rules += ' Yg1';
rules += ' Xc1';
rules += ' _2b1';
if (props.isExiting) {
rules += ' -_8PloMd-t1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_8PloMd-t1';
rules += ' __Ya1';
} else {
rules += ' -_8PloMd-q1';
rules += ' __Ya1';
}
return rules;
};
const $85bf454149fe9ddc$export$9f306827c48feef4 = /*#__PURE__*/ (0, $cRsNx$react.createContext)(null);
const $85bf454149fe9ddc$export$e213cebad6250b4a = /*#__PURE__*/ (0, $cRsNx$react.forwardRef)(function ActionBar(props, ref) {
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $85bf454149fe9ddc$export$9f306827c48feef4);
let domRef = (0, $cRsNx$reactspectrumutils.useDOMRef)(ref);
let isOpen = props.selectedItemCount !== 0;
let isExiting = (0, $cRsNx$reactariautils.useExitAnimation)(domRef, isOpen && props.scrollRef != null);
if (!isOpen && !isExiting) return null;
return /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)($85bf454149fe9ddc$var$ActionBarInner, {
...props,
ref: domRef,
isExiting: isExiting
});
});
const $85bf454149fe9ddc$var$ActionBarInner = /*#__PURE__*/ (0, $cRsNx$react.forwardRef)(function ActionBarInner(props1, ref) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let { isEmphasized: isEmphasized, selectedItemCount: selectedItemCount = 0, children: children, onClearSelection: onClearSelection, isExiting: isExiting, slot: slot, scrollRef: scrollRef, ...otherProps } = props1;
let stringFormatter = (0, $cRsNx$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '-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, $cRsNx$react.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 [scrollbarWidth, setScrollbarWidth] = (0, $cRsNx$react.useState)(0);
let updateScrollbarWidth = (0, $cRsNx$react.useCallback)(()=>{
let el = scrollRef?.current;
if (el) {
let w = el.offsetWidth - el.clientWidth;
setScrollbarWidth(w);
}
}, [
scrollRef
]);
(0, $cRsNx$reactariautils.useResizeObserver)({
ref: scrollRef,
onResize: updateScrollbarWidth
});
let { keyboardProps: keyboardProps } = (0, $cRsNx$reactaria.useKeyboard)({
onKeyDown (e) {
if (e.key === 'Escape') {
e.preventDefault();
onClearSelection?.();
} else e.continuePropagation();
}
});
// Announce "actions available" on mount.
let isInitial = (0, $cRsNx$react.useRef)(true);
(0, $cRsNx$react.useEffect)(()=>{
if (isInitial.current && scrollRef) {
isInitial.current = false;
(0, $cRsNx$reactarialiveannouncer.announce)(stringFormatter.format('actionbar.actionsAvailable'));
}
}, [
stringFormatter,
scrollRef
]);
let objectRef = (0, $cRsNx$reactariautils.useObjectRef)(ref);
let isEntering = (0, $cRsNx$reactariautils.useEnterAnimation)(objectRef, !!scrollRef);
return /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)((0, $cRsNx$reactaria.FocusScope), {
restoreFocus: true,
children: /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsxs)("div", {
ref: objectRef,
...otherProps,
...keyboardProps,
className: $85bf454149fe9ddc$var$actionBarStyles({
isEmphasized: isEmphasized,
isInContainer: !!scrollRef,
isEntering: isEntering,
isExiting: isExiting
}),
style: {
insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`
},
children: [
/*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)("div", {
className: " _Jb1 IM1",
children: /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)((0, $7a26131f6144af2b$exports.ActionButtonGroup), {
staticColor: isEmphasized ? 'auto' : undefined,
isQuiet: true,
"aria-label": stringFormatter.format('actionbar.actions'),
children: children
})
}),
/*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsxs)("div", {
className: " _Ja1 sd1 eb1 Ub1 qb1",
children: [
/*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)((0, $2f907cb84c6e9e75$exports.CloseButton), {
staticColor: isEmphasized ? 'auto' : undefined,
"aria-label": stringFormatter.format('actionbar.clearSelection'),
onPress: ()=>onClearSelection?.()
}),
/*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)("span", {
className: function anonymous(props) {
let rules = " ";
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
rules += ' -_6BNtrc-c1';
rules += ' vx1';
rules += ' xb1';
rules += ' _xa1';
rules += ' _Fd1';
rules += ' _FnuYUweb1';
if (props.isEmphasized) rules += ' pr1';
else rules += ' pt1';
return rules;
}({
isEmphasized: isEmphasized
}),
children: lastCount === 'all' ? stringFormatter.format('actionbar.selectedAll') : stringFormatter.format('actionbar.selected', {
count: lastCount
})
})
]
})
]
})
});
});
function $85bf454149fe9ddc$export$13f32e21845e01d0(props) {
let { renderActionBar: renderActionBar, scrollRef: scrollRef } = props;
let [selectedKeys, setSelectedKeys] = (0, $cRsNx$reactstatelyutils.useControlledState)(props.selectedKeys, props.defaultSelectedKeys || new Set(), props.onSelectionChange);
let selectedKeysSet = (0, $cRsNx$react.useMemo)(()=>selectedKeys === 'all' ? selectedKeys : new Set(selectedKeys), [
selectedKeys
]);
let actionBar = (0, $cRsNx$react.useMemo)(()=>renderActionBar?.(selectedKeysSet), [
renderActionBar,
selectedKeysSet
]);
let selectedItemCount = selectedKeysSet === 'all' ? 'all' : selectedKeysSet.size;
let [actionBarHeight, setActionBarHeight] = (0, $cRsNx$react.useState)(0);
let actionBarRef = (0, $cRsNx$react.useCallback)((ref)=>{
let actionBar = ref?.UNSAFE_getDOMNode();
if (actionBar) setActionBarHeight(actionBar.offsetHeight + 8);
else setActionBarHeight(0);
}, []);
let actionBarContext = (0, $cRsNx$react.useMemo)(()=>({
ref: actionBarRef,
scrollRef: scrollRef,
selectedItemCount: selectedItemCount,
onClearSelection: ()=>setSelectedKeys(new Set())
}), [
scrollRef,
actionBarRef,
selectedItemCount,
setSelectedKeys
]);
let wrappedActionBar = (0, $cRsNx$react.useMemo)(()=>/*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)($85bf454149fe9ddc$export$9f306827c48feef4.Provider, {
value: actionBarContext,
children: actionBar
}), [
actionBarContext,
actionBar
]);
return {
selectedKeys: selectedKeys,
onSelectionChange: setSelectedKeys,
actionBar: wrappedActionBar,
actionBarHeight: actionBarHeight
};
}
//# sourceMappingURL=ActionBar.cjs.map