100 lines
3.4 KiB
JavaScript
100 lines
3.4 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
Object.defineProperty(exports, "useCard_unstable", {
|
|
enumerable: true,
|
|
get: function() {
|
|
return useCard_unstable;
|
|
}
|
|
});
|
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
const _useCardSelectable = require("./useCardSelectable");
|
|
const _CardContext = require("./CardContext");
|
|
const focusMap = {
|
|
off: undefined,
|
|
'no-tab': 'limited-trap-focus',
|
|
'tab-exit': 'limited',
|
|
'tab-only': 'unlimited'
|
|
};
|
|
/**
|
|
* Create the state for interactive cards.
|
|
*
|
|
* This internal hook defines if the card is interactive
|
|
* and control focus properties based on that.
|
|
*
|
|
* @param props - props from this instance of Card
|
|
*/ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
|
|
const interactive = [
|
|
'onClick',
|
|
'onDoubleClick',
|
|
'onMouseUp',
|
|
'onMouseDown',
|
|
'onPointerUp',
|
|
'onPointerDown',
|
|
'onTouchStart',
|
|
'onTouchEnd',
|
|
'onDragStart',
|
|
'onDragEnd'
|
|
].some((prop)=>props[prop]);
|
|
// default focusMode to tab-only when interactive, and off when not
|
|
const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
|
|
const groupperAttrs = (0, _reacttabster.useFocusableGroup)({
|
|
tabBehavior: focusMap[focusMode]
|
|
});
|
|
const interactiveFocusAttributes = {
|
|
...groupperAttrs,
|
|
tabIndex: 0
|
|
};
|
|
return {
|
|
interactive,
|
|
focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
|
|
};
|
|
};
|
|
const useCard_unstable = (props, ref)=>{
|
|
const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;
|
|
const [referenceId, setReferenceId] = _react.useState(_CardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
|
|
const [referenceLabel, setReferenceLabel] = _react.useState(_CardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
|
|
const cardBaseRef = (0, _reacttabster.useFocusWithin)();
|
|
const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = (0, _useCardSelectable.useCardSelectable)(props, {
|
|
referenceId,
|
|
referenceLabel
|
|
}, cardBaseRef);
|
|
const cardRef = (0, _reactutilities.useMergedRefs)(cardBaseRef, ref);
|
|
const { interactive, focusAttributes } = useCardInteractive(props);
|
|
return {
|
|
appearance,
|
|
orientation,
|
|
size,
|
|
interactive,
|
|
selectable,
|
|
selectFocused,
|
|
selected,
|
|
selectableA11yProps: {
|
|
setReferenceId,
|
|
referenceId,
|
|
referenceLabel,
|
|
setReferenceLabel
|
|
},
|
|
components: {
|
|
root: 'div',
|
|
floatingAction: 'div',
|
|
checkbox: 'input'
|
|
},
|
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
ref: cardRef,
|
|
role: 'group',
|
|
...!selectable ? focusAttributes : null,
|
|
...props,
|
|
...selectableCardProps
|
|
}), {
|
|
elementType: 'div'
|
|
}),
|
|
floatingAction: floatingActionSlot,
|
|
checkbox: checkboxSlot
|
|
};
|
|
};
|