@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 4.18 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/navigation/menu/menu-title-search.tsx"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport withSpokenMessages from '../../higher-order/with-spoken-messages';\nimport { useNavigationMenuContext } from './context';\nimport { useNavigationContext } from '../context';\nimport { SEARCH_FOCUS_DELAY } from '../constants';\nimport SearchControl from '../../search-control';\nimport { MenuTitleSearchControlWrapper } from '../styles/navigation-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction MenuTitleSearch({\n debouncedSpeak,\n onCloseSearch,\n onSearch,\n search,\n title\n}) {\n const {\n navigationTree: {\n items\n }\n } = useNavigationContext();\n const {\n menu\n } = useNavigationMenuContext();\n const inputRef = useRef(null);\n\n // Wait for the slide-in animation to complete before autofocusing the input.\n // This prevents scrolling to the input during the animation.\n useEffect(() => {\n const delayedFocus = setTimeout(() => {\n inputRef.current?.focus();\n }, SEARCH_FOCUS_DELAY);\n return () => {\n clearTimeout(delayedFocus);\n };\n }, []);\n useEffect(() => {\n if (!search) {\n return;\n }\n const count = Object.values(items).filter(item => item._isVisible).length;\n const resultsFoundMessage = sprintf(/* translators: %d: number of results. */\n _n('%d result found.', '%d results found.', count), count);\n debouncedSpeak(resultsFoundMessage);\n // Not adding deps for now, as it would require either a larger refactor.\n // See https://github.com/WordPress/gutenberg/pull/44090\n }, [items, search]);\n const onClose = () => {\n onSearch?.('');\n onCloseSearch();\n };\n const onKeyDown = event => {\n if (event.code === 'Escape' && !event.defaultPrevented) {\n event.preventDefault();\n onClose();\n }\n };\n const inputId = `components-navigation__menu-title-search-${menu}`;\n const placeholder = sprintf(/* translators: placeholder for menu search box. %s: menu title */\n __('Search %s'), title?.toLowerCase() || '').trim();\n return /*#__PURE__*/_jsx(MenuTitleSearchControlWrapper, {\n children: /*#__PURE__*/_jsx(SearchControl, {\n className: \"components-navigation__menu-search-input\",\n id: inputId,\n onChange: value => onSearch?.(value),\n onKeyDown: onKeyDown,\n placeholder: placeholder,\n onClose: onClose,\n ref: inputRef,\n value: search\n })\n });\n}\nexport default withSpokenMessages(MenuTitleSearch);"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkC;AAClC,kBAAgC;AAKhC,kCAA+B;AAC/B,qBAAyC;AACzC,IAAAA,kBAAqC;AACrC,uBAAmC;AACnC,4BAA0B;AAC1B,+BAA8C;AAC9C,yBAA4B;AAC5B,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM;AAAA,IACJ,gBAAgB;AAAA,MACd;AAAA,IACF;AAAA,EACF,QAAI,sCAAqB;AACzB,QAAM;AAAA,IACJ;AAAA,EACF,QAAI,yCAAyB;AAC7B,QAAM,eAAW,uBAAO,IAAI;AAI5B,gCAAU,MAAM;AACd,UAAM,eAAe,WAAW,MAAM;AACpC,eAAS,SAAS,MAAM;AAAA,IAC1B,GAAG,mCAAkB;AACrB,WAAO,MAAM;AACX,mBAAa,YAAY;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,CAAC;AACL,gCAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,UAAM,QAAQ,OAAO,OAAO,KAAK,EAAE,OAAO,UAAQ,KAAK,UAAU,EAAE;AACnE,UAAM,0BAAsB;AAAA;AAAA,UAC5B,gBAAG,oBAAoB,qBAAqB,KAAK;AAAA,MAAG;AAAA,IAAK;AACzD,mBAAe,mBAAmB;AAAA,EAGpC,GAAG,CAAC,OAAO,MAAM,CAAC;AAClB,QAAM,UAAU,MAAM;AACpB,eAAW,EAAE;AACb,kBAAc;AAAA,EAChB;AACA,QAAM,YAAY,WAAS;AACzB,QAAI,MAAM,SAAS,YAAY,CAAC,MAAM,kBAAkB;AACtD,YAAM,eAAe;AACrB,cAAQ;AAAA,IACV;AAAA,EACF;AACA,QAAM,UAAU,4CAA4C,IAAI;AAChE,QAAM,kBAAc;AAAA;AAAA,QACpB,gBAAG,WAAW;AAAA,IAAG,OAAO,YAAY,KAAK;AAAA,EAAE,EAAE,KAAK;AAClD,SAAoB,uCAAAC,KAAK,wDAA+B;AAAA,IACtD,UAAuB,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,UAAU,WAAS,WAAW,KAAK;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,OAAO;AAAA,IACT,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,gCAAQ,4BAAAC,SAAmB,eAAe;",
"names": ["import_context", "_jsx", "SearchControl", "withSpokenMessages"]
}