1 line
8.0 KiB
JSON
1 line
8.0 KiB
JSON
{"ast":null,"code":"import matches from 'dom-helpers/matches';\nimport qsa from 'dom-helpers/querySelectorAll';\nimport React, { useCallback, useRef, useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { useUncontrolled } from 'uncontrollable';\nimport usePrevious from '@restart/hooks/usePrevious';\nimport useCallbackRef from '@restart/hooks/useCallbackRef';\nimport useForceUpdate from '@restart/hooks/useForceUpdate';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport DropdownContext from './DropdownContext';\nimport DropdownMenu from './DropdownMenu';\nimport DropdownToggle from './DropdownToggle';\nvar propTypes = {\n /**\n * A render prop that returns the root dropdown element. The `props`\n * argument should spread through to an element containing _both_ the\n * menu and toggle in order to handle keyboard events for focus management.\n *\n * @type {Function ({\n * props: {\n * onKeyDown: (SyntheticEvent) => void,\n * },\n * }) => React.Element}\n */\n children: PropTypes.func.isRequired,\n\n /**\n * Determines the direction and location of the Menu in relation to it's Toggle.\n */\n drop: PropTypes.oneOf(['up', 'left', 'right', 'down']),\n\n /**\n * Controls the focus behavior for when the Dropdown is opened. Set to\n * `true` to always focus the first menu item, `keyboard` to focus only when\n * navigating via the keyboard, or `false` to disable completely\n *\n * The Default behavior is `false` **unless** the Menu has a `role=\"menu\"`\n * where it will default to `keyboard` to match the recommended [ARIA Authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton).\n */\n focusFirstItemOnShow: PropTypes.oneOf([false, true, 'keyboard']),\n\n /**\n * A css slector string that will return __focusable__ menu items.\n * Selectors should be relative to the menu component:\n * e.g. ` > li:not('.disabled')`\n */\n itemSelector: PropTypes.string.isRequired,\n\n /**\n * Align the menu to the 'end' side of the placement side of the Dropdown toggle. The default placement is `top-start` or `bottom-start`.\n */\n alignEnd: PropTypes.bool,\n\n /**\n * Whether or not the Dropdown is visible.\n *\n * @controllable onToggle\n */\n show: PropTypes.bool,\n\n /**\n * Sets the initial show position of the Dropdown.\n */\n defaultShow: PropTypes.bool,\n\n /**\n * A callback fired when the Dropdown wishes to change visibility. Called with the requested\n * `show` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`.\n *\n * ```js\n * function(\n * isOpen: boolean,\n * event: SyntheticEvent,\n * ): void\n * ```\n *\n * @controllable show\n */\n onToggle: PropTypes.func\n};\nvar defaultProps = {\n itemSelector: '* > *'\n};\n/**\n * `Dropdown` is set of structural components for building, accessible dropdown menus with close-on-click,\n * keyboard navigation, and correct focus handling. As with all the react-overlay's\n * components its BYOS (bring your own styles). Dropdown is primarily\n * built from three base components, you should compose to build your Dropdowns.\n *\n * - `Dropdown`, which wraps the menu and toggle, and handles keyboard navigation\n * - `Dropdown.Toggle` generally a button that triggers the menu opening\n * - `Dropdown.Menu` The overlaid, menu, positioned to the toggle with PopperJs\n */\n\nfunction Dropdown(_ref) {\n var drop = _ref.drop,\n alignEnd = _ref.alignEnd,\n defaultShow = _ref.defaultShow,\n rawShow = _ref.show,\n rawOnToggle = _ref.onToggle,\n itemSelector = _ref.itemSelector,\n focusFirstItemOnShow = _ref.focusFirstItemOnShow,\n children = _ref.children;\n var forceUpdate = useForceUpdate();\n\n var _useUncontrolled = useUncontrolled({\n defaultShow: defaultShow,\n show: rawShow,\n onToggle: rawOnToggle\n }, {\n show: 'onToggle'\n }),\n show = _useUncontrolled.show,\n onToggle = _useUncontrolled.onToggle;\n\n var _useCallbackRef = useCallbackRef(),\n toggleElement = _useCallbackRef[0],\n setToggle = _useCallbackRef[1]; // We use normal refs instead of useCallbackRef in order to populate the\n // the value as quickly as possible, otherwise the effect to focus the element\n // may run before the state value is set\n\n\n var menuRef = useRef();\n var menuElement = menuRef.current;\n var setMenu = useCallback(function (ref) {\n menuRef.current = ref; // ensure that a menu set triggers an update for consumers\n\n forceUpdate();\n }, [forceUpdate]);\n var lastShow = usePrevious(show);\n var lastSourceEvent = useRef(null);\n var focusInDropdown = useRef(false);\n var toggle = useCallback(function (event) {\n onToggle(!show, event);\n }, [onToggle, show]);\n var context = useMemo(function () {\n return {\n toggle: toggle,\n drop: drop,\n show: show,\n alignEnd: alignEnd,\n menuElement: menuElement,\n toggleElement: toggleElement,\n setMenu: setMenu,\n setToggle: setToggle\n };\n }, [toggle, drop, show, alignEnd, menuElement, toggleElement, setMenu, setToggle]);\n\n if (menuElement && lastShow && !show) {\n focusInDropdown.current = menuElement.contains(document.activeElement);\n }\n\n var focusToggle = useEventCallback(function () {\n if (toggleElement && toggleElement.focus) {\n toggleElement.focus();\n }\n });\n var maybeFocusFirst = useEventCallback(function () {\n var type = lastSourceEvent.current;\n var focusType = focusFirstItemOnShow;\n\n if (focusType == null) {\n focusType = menuRef.current && matches(menuRef.current, '[role=menu]') ? 'keyboard' : false;\n }\n\n if (focusType === false || focusType === 'keyboard' && !/^key.+$/.test(type)) {\n return;\n }\n\n var first = qsa(menuRef.current, itemSelector)[0];\n if (first && first.focus) first.focus();\n });\n useEffect(function () {\n if (show) maybeFocusFirst();else if (focusInDropdown.current) {\n focusInDropdown.current = false;\n focusToggle();\n } // only `show` should be changing\n }, [show, focusInDropdown, focusToggle, maybeFocusFirst]);\n useEffect(function () {\n lastSourceEvent.current = null;\n });\n\n var getNextFocusedChild = function getNextFocusedChild(current, offset) {\n if (!menuRef.current) return null;\n var items = qsa(menuRef.current, itemSelector);\n var index = items.indexOf(current) + offset;\n index = Math.max(0, Math.min(index, items.length));\n return items[index];\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n var key = event.key,\n target = event.target; // Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400\n // in inscrutability\n\n var isInput = /input|textarea/i.test(target.tagName);\n\n if (isInput && (key === ' ' || key !== 'Escape' && menuRef.current && menuRef.current.contains(target))) {\n return;\n }\n\n lastSourceEvent.current = event.type;\n\n switch (key) {\n case 'ArrowUp':\n {\n var next = getNextFocusedChild(target, -1);\n if (next && next.focus) next.focus();\n event.preventDefault();\n return;\n }\n\n case 'ArrowDown':\n event.preventDefault();\n\n if (!show) {\n toggle(event);\n } else {\n var _next = getNextFocusedChild(target, 1);\n\n if (_next && _next.focus) _next.focus();\n }\n\n return;\n\n case 'Escape':\n case 'Tab':\n onToggle(false, event);\n break;\n\n default:\n }\n };\n\n return React.createElement(DropdownContext.Provider, {\n value: context\n }, children({\n props: {\n onKeyDown: handleKeyDown\n }\n }));\n}\n\nDropdown.displayName = 'ReactOverlaysDropdown';\nDropdown.propTypes = propTypes;\nDropdown.defaultProps = defaultProps;\nDropdown.Menu = DropdownMenu;\nDropdown.Toggle = DropdownToggle;\nexport default Dropdown;","map":null,"metadata":{},"sourceType":"module"} |