@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 6.42 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/navigable-container/container.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect, useCallback } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst MENU_ITEM_ROLES = ['menuitem', 'menuitemradio', 'menuitemcheckbox'];\nfunction cycleValue(value, total, offset) {\n const nextValue = value + offset;\n if (nextValue < 0) {\n return total + nextValue;\n } else if (nextValue >= total) {\n return nextValue - total;\n }\n return nextValue;\n}\nfunction UnforwardedNavigableContainer({\n children,\n stopNavigationEvents,\n eventToOffset,\n onNavigate = noop,\n onKeyDown,\n cycle = true,\n onlyBrowserTabstops,\n ...restProps\n}, ref) {\n const containerRef = useRef(null);\n const getFocusableIndex = useCallback((focusables, target) => {\n return focusables.indexOf(target);\n }, []);\n const getFocusableContext = useCallback(target => {\n if (!containerRef.current) {\n return null;\n }\n const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;\n const focusables = finder.find(containerRef.current);\n const index = getFocusableIndex(focusables, target);\n if (index > -1 && target) {\n return {\n index,\n target,\n focusables\n };\n }\n return null;\n }, [onlyBrowserTabstops, getFocusableIndex]);\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n function handleKeyDown(event) {\n if (onKeyDown) {\n onKeyDown(event);\n }\n const offset = eventToOffset(event);\n\n // eventToOffset returns undefined if the event is not handled by the component.\n if (offset !== undefined && stopNavigationEvents) {\n // Prevents arrow key handlers bound to the document directly interfering.\n event.stopImmediatePropagation();\n\n // When navigating a collection of items, prevent scroll containers\n // from scrolling. The preventDefault also prevents Voiceover from\n // 'handling' the event, as voiceover will try to use arrow keys\n // for highlighting text.\n const targetRole = event.target?.getAttribute('role');\n const targetHasMenuItemRole = !!targetRole && MENU_ITEM_ROLES.includes(targetRole);\n if (targetHasMenuItemRole) {\n event.preventDefault();\n }\n }\n if (!offset) {\n return;\n }\n const activeElement = event.target?.ownerDocument?.activeElement;\n if (!activeElement) {\n return;\n }\n const context = getFocusableContext(activeElement);\n if (!context) {\n return;\n }\n const {\n index,\n focusables\n } = context;\n const nextIndex = cycle ? cycleValue(index, focusables.length, offset) : index + offset;\n if (nextIndex >= 0 && nextIndex < focusables.length) {\n focusables[nextIndex].focus();\n onNavigate(nextIndex, focusables[nextIndex]);\n\n // `preventDefault()` on tab to avoid having the browser move the focus\n // after this component has already moved it.\n if (event.code === 'Tab') {\n event.preventDefault();\n }\n }\n }\n\n // We use DOM event listeners instead of React event listeners\n // because we want to catch events from the underlying DOM tree.\n // The React Tree can be different from the DOM tree when using\n // portals. Block Toolbars for instance are rendered in a separate\n // React Trees.\n container.addEventListener('keydown', handleKeyDown);\n return () => {\n container.removeEventListener('keydown', handleKeyDown);\n };\n }, [onKeyDown, eventToOffset, stopNavigationEvents, cycle, onNavigate, getFocusableContext]);\n const mergedRef = useMergeRefs([containerRef, ref]);\n return /*#__PURE__*/_jsx(\"div\", {\n ref: mergedRef,\n ...restProps,\n children: children\n });\n}\nconst NavigableContainer = forwardRef(UnforwardedNavigableContainer);\nNavigableContainer.displayName = 'NavigableContainer';\nexport default NavigableContainer;"],
"mappings": ";AAOA,SAAS,YAAY,QAAQ,WAAW,mBAAmB;AAC3D,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAKtB,SAAS,OAAO,YAAY;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,IAAM,kBAAkB,CAAC,YAAY,iBAAiB,kBAAkB;AACxE,SAAS,WAAW,OAAO,OAAO,QAAQ;AACxC,QAAM,YAAY,QAAQ;AAC1B,MAAI,YAAY,GAAG;AACjB,WAAO,QAAQ;AAAA,EACjB,WAAW,aAAa,OAAO;AAC7B,WAAO,YAAY;AAAA,EACrB;AACA,SAAO;AACT;AACA,SAAS,8BAA8B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,oBAAoB,YAAY,CAAC,YAAY,WAAW;AAC5D,WAAO,WAAW,QAAQ,MAAM;AAAA,EAClC,GAAG,CAAC,CAAC;AACL,QAAM,sBAAsB,YAAY,YAAU;AAChD,QAAI,CAAC,aAAa,SAAS;AACzB,aAAO;AAAA,IACT;AACA,UAAM,SAAS,sBAAsB,MAAM,WAAW,MAAM;AAC5D,UAAM,aAAa,OAAO,KAAK,aAAa,OAAO;AACnD,UAAM,QAAQ,kBAAkB,YAAY,MAAM;AAClD,QAAI,QAAQ,MAAM,QAAQ;AACxB,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,qBAAqB,iBAAiB,CAAC;AAC3C,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,aAAS,cAAc,OAAO;AAC5B,UAAI,WAAW;AACb,kBAAU,KAAK;AAAA,MACjB;AACA,YAAM,SAAS,cAAc,KAAK;AAGlC,UAAI,WAAW,UAAa,sBAAsB;AAEhD,cAAM,yBAAyB;AAM/B,cAAM,aAAa,MAAM,QAAQ,aAAa,MAAM;AACpD,cAAM,wBAAwB,CAAC,CAAC,cAAc,gBAAgB,SAAS,UAAU;AACjF,YAAI,uBAAuB;AACzB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AACA,UAAI,CAAC,QAAQ;AACX;AAAA,MACF;AACA,YAAM,gBAAgB,MAAM,QAAQ,eAAe;AACnD,UAAI,CAAC,eAAe;AAClB;AAAA,MACF;AACA,YAAM,UAAU,oBAAoB,aAAa;AACjD,UAAI,CAAC,SAAS;AACZ;AAAA,MACF;AACA,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI;AACJ,YAAM,YAAY,QAAQ,WAAW,OAAO,WAAW,QAAQ,MAAM,IAAI,QAAQ;AACjF,UAAI,aAAa,KAAK,YAAY,WAAW,QAAQ;AACnD,mBAAW,SAAS,EAAE,MAAM;AAC5B,mBAAW,WAAW,WAAW,SAAS,CAAC;AAI3C,YAAI,MAAM,SAAS,OAAO;AACxB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAOA,cAAU,iBAAiB,WAAW,aAAa;AACnD,WAAO,MAAM;AACX,gBAAU,oBAAoB,WAAW,aAAa;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,eAAe,sBAAsB,OAAO,YAAY,mBAAmB,CAAC;AAC3F,QAAM,YAAY,aAAa,CAAC,cAAc,GAAG,CAAC;AAClD,SAAoB,qBAAK,OAAO;AAAA,IAC9B,KAAK;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACA,IAAM,qBAAqB,WAAW,6BAA6B;AACnE,mBAAmB,cAAc;AACjC,IAAO,oBAAQ;",
"names": []
}