@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
43 lines (42 loc) • 1.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.mouseFocusBehavior = exports.hideMouseFocus = void 0;
/**
* A utility to hide the default canvas style focus ring when using mouse input.
* Requires wrapping your components in an InputProvider component.
* @deprecated `hideMouseFocus` is deprecated and will be removed in a future major version. Please use [`focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) when applying focus styles to elements.
*/
exports.hideMouseFocus = {
[`[data-whatinput="mouse"] &:focus,
[data-whatinput="touch"] &:focus,
[data-whatinput="pointer"] &:focus`]: {
outline: 'none',
boxShadow: 'none',
animation: 'none',
},
};
/**
* A utility that simplifies focus selectors since you can't use nested syntax for some reason. Example:
* [`[data-whatinput="mouse"],
[data-whatinput="touch"],
[data-whatinput="pointer"]: {
'& .my-selector': {
...
}
},
* @deprecated `mouseFocusBehavior` is deprecated and will be removed in a future major version. Please use [`focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) when applying focus styles to elements.
*/
const mouseFocusBehavior = (selectors) => {
const output = {};
Object.keys(selectors).map((selector, index) => {
selector.split(',').forEach(selectorPart => {
const prefixedSelector = `
[data-whatinput="mouse"] ${selectorPart},
[data-whatinput="touch"] ${selectorPart},
[data-whatinput="pointer"] ${selectorPart}`;
output[prefixedSelector] = selectors[selector];
});
});
return output;
};
exports.mouseFocusBehavior = mouseFocusBehavior;