@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 8.55 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/autocomplete/autocompleter-ui.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { createPortal } from 'react-dom';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useEffect, useState } from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListBox({\n items,\n onSelect,\n selectedIndex,\n instanceId,\n listBoxId,\n className,\n Component = 'div'\n}) {\n return /*#__PURE__*/_jsx(Component, {\n id: listBoxId,\n role: \"listbox\",\n className: \"components-autocomplete__results\",\n children: items.map((option, index) => /*#__PURE__*/_jsx(Button, {\n id: `components-autocomplete-item-${instanceId}-${option.key}`,\n role: \"option\",\n __next40pxDefaultSize: true,\n \"aria-selected\": index === selectedIndex,\n accessibleWhenDisabled: true,\n disabled: option.isDisabled,\n className: clsx('components-autocomplete__result', className, {\n // Unused, for backwards compatibility.\n 'is-selected': index === selectedIndex\n }),\n variant: index === selectedIndex ? 'primary' : undefined,\n onClick: () => onSelect(option),\n children: option.label\n }, option.key))\n });\n}\nexport function getAutoCompleterUI(autocompleter) {\n const useItems = autocompleter.useItems ?? getDefaultUseItems(autocompleter);\n function AutocompleterUI({\n filterValue,\n instanceId,\n listBoxId,\n className,\n selectedIndex,\n onChangeOptions,\n onSelect,\n onReset,\n reset,\n contentRef\n }) {\n const [items] = useItems(filterValue);\n const popoverAnchor = useAnchor({\n editableContentElement: contentRef.current\n });\n const [needsA11yCompat, setNeedsA11yCompat] = useState(false);\n const popoverRef = useRef(null);\n const popoverRefs = useMergeRefs([popoverRef, useRefEffect(node => {\n if (!contentRef.current) {\n return;\n }\n\n // If the popover is rendered in a different document than\n // the content, we need to duplicate the options list in the\n // content document so that it's available to the screen\n // readers, which check the DOM ID based aria-* attributes.\n setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);\n }, [contentRef])]);\n useOnClickOutside(popoverRef, reset);\n const debouncedSpeak = useDebounce(speak, 500);\n function announce(options) {\n if (!debouncedSpeak) {\n return;\n }\n if (!!options.length) {\n if (filterValue) {\n debouncedSpeak(sprintf(/* translators: %d: number of results. */\n _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', options.length), options.length), 'assertive');\n } else {\n debouncedSpeak(sprintf(/* translators: %d: number of results. */\n _n('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive');\n }\n } else {\n debouncedSpeak(__('No results.'), 'assertive');\n }\n }\n useLayoutEffect(() => {\n onChangeOptions(items);\n announce(items);\n // We want to avoid introducing unexpected side effects.\n // See https://github.com/WordPress/gutenberg/pull/41820\n }, [items]);\n if (items.length === 0) {\n return null;\n }\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(Popover, {\n offset: 8,\n focusOnMount: false,\n onClose: onReset,\n placement: \"top-start\",\n className: \"components-autocomplete__popover\",\n anchor: popoverAnchor,\n ref: popoverRefs,\n children: /*#__PURE__*/_jsx(ListBox, {\n items: items,\n onSelect: onSelect,\n selectedIndex: selectedIndex,\n instanceId: instanceId,\n listBoxId: listBoxId,\n className: className\n })\n }), contentRef.current && needsA11yCompat && createPortal(/*#__PURE__*/_jsx(ListBox, {\n items: items,\n onSelect: onSelect,\n selectedIndex: selectedIndex,\n instanceId: instanceId,\n listBoxId: listBoxId,\n className: className,\n Component: VisuallyHidden\n }), contentRef.current.ownerDocument.body)]\n });\n }\n return AutocompleterUI;\n}\nfunction useOnClickOutside(ref, handler) {\n useEffect(() => {\n const listener = event => {\n // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n handler(event);\n };\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [handler, ref]);\n}"],
"mappings": "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",
"names": []
}