@wix/design-system
Version:
@wix/design-system
72 lines • 3.25 kB
JavaScript
const queryElementOrDocument = (query, element) => {
return element?.querySelector(query) ?? document.body.querySelector(query);
};
const getPopoverDataHook = (element) => {
const popoverRootQuery = '[data-popover-root]';
const foundElement = queryElementOrDocument(popoverRootQuery, element);
return foundElement?.getAttribute('data-hook') || undefined;
};
const getTriggerElement = (element) => queryElementOrDocument(`[data-hook="${getPopoverDataHook(element)}-trigger"]`, element);
const getContentElement = (element) => queryElementOrDocument(`[data-hook="${getPopoverDataHook(element)}-content"]`, element);
// TODO: update when implemented
const getArrowElement = (element) => element && element.querySelectorAll('[data-hook="popover-arrow"]')[0];
/** @deprecated use popoverNextUniDriverFactory instead */
export const popoverNextLegacyDriverFactory = ({ element, eventTrigger }) => ({
/** Whether the element exists or not */
exists: () => !!element,
/** Returns the target element (`<Popover.Trigger/>`)
* @deprecated
* Use getTriggerElement
*/
getTargetElement: () => getTriggerElement(element),
/** Returns the trigger element (`<Popover.Trigger/>`) */
getTriggerElement: () => getTriggerElement(element),
/** Returns the content element (`<Popover.Content/>`) */
getContentElement: () => getContentElement(element),
/** Returns the arrow element
* @todo not yet implemented
*/
getArrowElement: () => getArrowElement(element),
/** Returns `true` whether the target element (`<Popover.Trigger/>`) exists
* @deprecated - use isTriggerElementExists
*/
isTargetElementExists: () => !!getTriggerElement(element),
/** Returns `true` whether the target element (`<Popover.Trigger/>`) exists */
isTriggerElementExists: () => !!getTriggerElement(element),
/** Returns `true` whether the content element (`<Popover.Content/>`) exists */
isContentElementExists: () => !!getContentElement(element),
/** Trigger `mouseEnter` on the element */
mouseEnter: () => element && eventTrigger.mouseEnter(element),
/** Trigger `mouseLeave` on the element */
mouseLeave: () => element && eventTrigger.mouseLeave(element),
/** Trigger key press on the element */
pressKey: async (key) => element && eventTrigger.keyPress(element, { key }),
/** Click on the element */
click: () => {
const triggerElement = getTriggerElement(element);
if (triggerElement) {
eventTrigger.click(triggerElement);
}
},
/** Click outside the element */
clickOutside: () => {
document.dispatchEvent(new Event('mousedown'));
document.dispatchEvent(new Event('mouseup'));
},
/** Returns the arrow offset */
getArrowOffset: () => {
// @ts-ignore
const { top, left, right, bottom } = getArrowElement(element)?.style;
return { top, left, right, bottom };
},
/** Returns the element's inline styles
* @deprecated
*/
// @ts-ignore
inlineStyles: () => element?.style,
/** Returns the element's id
* @deprecated
*/
getElementId: () => element?.id,
});
//# sourceMappingURL=PopoverNext.driver.js.map