1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[31],{640236(M,t,n){var b={id:"teambit.blog-content/[email protected]",homepage:"https://bit.dev/teambit/blog-content/composable-search-bar",exported:!0},O=this&&this.__createBinding||(Object.create?function(c,_,g,m){m===void 0&&(m=g);var S=Object.getOwnPropertyDescriptor(_,g);(!S||("get"in S?!_.__esModule:S.writable||S.configurable))&&(S={enumerable:!0,get:function(){return _[g]}}),Object.defineProperty(c,m,S)}:function(c,_,g,m){m===void 0&&(m=g),c[m]=_[g]}),N=this&&this.__setModuleDefault||(Object.create?function(c,_){Object.defineProperty(c,"default",{enumerable:!0,value:_})}:function(c,_){c.default=_}),e=this&&this.__importStar||function(c){if(c&&c.__esModule)return c;var _={};if(c!=null)for(var g in c)g!=="default"&&Object.prototype.hasOwnProperty.call(c,g)&&O(_,c,g);return N(_,c),_},C=this&&this.__importDefault||function(c){return c&&c.__esModule?c:{default:c}};Object.defineProperty(t,"__esModule",{value:!0}),t.CommandBar=void 0;const s=e(n(531715)),u=C(n(879288)),w=n(179565),f=n(345018),p=n(420845),x=n(119259),r=n(111947),o=n(669642),h=n(303007),v=C(n(655846));function d({isVisible:c}){const[_,g]=(0,s.useState)(),m=(0,h.useInPageSearcher)(_||[]),[S,j]=(0,s.useState)(!1);return(0,w.useHotkeys)("command+shift+k, ctrl+shift+k",()=>j(!0)),(0,s.useEffect)(()=>{g([...document.getElementsByTagName("h3")].map(B=>({id:B.textContent,title:B.textContent,element:B})))},[]),c?s.default.createElement(o.CommandBar,{className:(0,u.default)(p.textColumn,v.default.commandBarVisible),searcher:m.search,visible:!0,onVisibilityChange:B=>j(B),placeholder:"Search post headings"}):s.default.createElement("div",{className:v.default.container},s.default.createElement(x.Tooltip,{content:s.default.createElement(i,null),placement:"bottom"},s.default.createElement("span",null,s.default.createElement(f.OptionButton,{icon:"magnifying",onClick:()=>j(!0)}))),s.default.createElement(o.CommandBar,{className:(0,u.default)(p.textColumn,v.default.commandBar),searcher:m.search,visible:S,onVisibilityChange:B=>j(B),placeholder:"Search post headings"}))}d.__bit_component=b,t.CommandBar=d;function i(){return s.default.createElement("div",{className:v.default.keys},"search ",s.default.createElement(r.KeyCombo,null,"mod+shift+k"))}i.__bit_component=b},841581(M,t,n){var b={id:"teambit.blog-content/[email protected]",homepage:"https://bit.dev/teambit/blog-content/composable-search-bar",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.CommandBar=void 0;var O=n(640236);Object.defineProperty(t,"CommandBar",{enumerable:!0,get:function(){return O.CommandBar}})},303007(M,t,n){var b={id:"teambit.blog-content/[email protected]",homepage:"https://bit.dev/teambit/blog-content/composable-search-bar",exported:!0},O=this&&this.__createBinding||(Object.create?function(o,h,v,d){d===void 0&&(d=v);var i=Object.getOwnPropertyDescriptor(h,v);(!i||("get"in i?!h.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return h[v]}}),Object.defineProperty(o,d,i)}:function(o,h,v,d){d===void 0&&(d=v),o[d]=h[v]}),N=this&&this.__setModuleDefault||(Object.create?function(o,h){Object.defineProperty(o,"default",{enumerable:!0,value:h})}:function(o,h){o.default=h}),e=this&&this.__importStar||function(o){if(o&&o.__esModule)return o;var h={};if(o!=null)for(var v in o)v!=="default"&&Object.prototype.hasOwnProperty.call(o,v)&&O(h,o,v);return N(h,o),h},C=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(t,"__esModule",{value:!0}),t.useInPageSearcher=t.InPageSearcher=void 0;const s=e(n(531715)),u=n(895625),w=C(n(879288)),f=n(669642),p=C(n(655846));class x extends f.Searcher{constructor(){super({searchKeys:["title","id"]});this.toSearchResult=({item:h})=>({id:h.id,title:h.title,element:h.element,action:()=>{h.element.scrollIntoView({behavior:"smooth",block:"start"})},children:s.default.createElement("div",{className:p.default.searchBoxItem},s.default.createElement("span",{className:(0,w.default)(u.ellipsis,p.default.title)},h.title))})}toSearchableItem(h){return h}}t.InPageSearcher=x;function r(o){const h=(0,s.useRef)();
1h.current||(h.current=new x);const v=h.current;return v.update(o),v}r.__bit_component=b,t.useInPageSearcher=r},8838(M,t,n){var b={id:"teambit.blog-content/[email protected]",homepage:"https://bit.dev/teambit/blog-content/composable-search-bar",exported:!0};function O(m){return O=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(S){return typeof S}:function(S){return S&&typeof Symbol=="function"&&S.constructor===Symbol&&S!==Symbol.prototype?"symbol":typeof S},O(m)}O.__bit_component=b,Object.defineProperty(t,"__esModule",{value:!0}),t.default=g;var N=h(n(531715)),e=n(437910),C=n(707330),s=n(5079),u=n(137e3),w=o(n(576958)),f=n(841581),p=h(n(548697)),x=["components"];function r(m){if(typeof WeakMap!="function")return null;var S=new WeakMap,j=new WeakMap;return(r=function(D){return D?j:S})(m)}r.__bit_component=b;function o(m,S){if(!S&&m&&m.__esModule)return m;if(m===null||O(m)!=="object"&&typeof m!="function")return{default:m};var j=r(S);if(j&&j.has(m))return j.get(m);var B={},D=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var T in m)if(T!=="default"&&Object.prototype.hasOwnProperty.call(m,T)){var Y=D?Object.getOwnPropertyDescriptor(m,T):null;Y&&(Y.get||Y.set)?Object.defineProperty(B,T,Y):B[T]=m[T]}return B.default=m,j&&j.set(m,B),B}o.__bit_component=b;function h(m){return m&&m.__esModule?m:{default:m}}h.__bit_component=b;function v(){return v=Object.assign?Object.assign.bind():function(m){for(var S=1;S<arguments.length;S++){var j=arguments[S];for(var B in j)Object.prototype.hasOwnProperty.call(j,B)&&(m[B]=j[B])}return m},v.apply(this,arguments)}v.__bit_component=b;function d(m,S){if(m==null)return{};var j=i(m,S),B,D;if(Object.getOwnPropertySymbols){var T=Object.getOwnPropertySymbols(m);for(D=0;D<T.length;D++)B=T[D],!(S.indexOf(B)>=0)&&(!Object.prototype.propertyIsEnumerable.call(m,B)||(j[B]=m[B]))}return j}d.__bit_component=b;function i(m,S){if(m==null)return{};var j={},B=Object.keys(m),D,T;for(T=0;T<B.length;T++)D=B[T],!(S.indexOf(D)>=0)&&(j[D]=m[D]);return j}i.__bit_component=b;var c={},_="wrapper";function g(m){var S=m.components,j=d(m,x);return(0,e.mdx)(_,v({},c,j,{components:S,mdxType:"MDXLayout"}),(0,e.mdx)(u.BlockQuote,{mdxType:"BlockQuote"},"You can search this blog post headings anytime by hitting cmd/ctrl+shift+k._"," ",(0,e.mdx)(f.CommandBar,{mdxType:"CommandBar"})),(0,e.mdx)("p",null,"The ability to search an app is a core feature of any application. It gets users to the resource they are looking for instantly without getting them frustrated."),(0,e.mdx)("p",null,`Many companies build their own search functionality. If you have only one app, that might not sound like such a bad idea, but 2when your company scales and more apps are added, it is a terrible idea to repeat yourself so many times. 3Let's put it out simple - repeatedly rewrites of the same code will most likely lead to many bugs and ruin the consistency of your brand.`),(0,e.mdx)("p",null,"Inspired by the ",(0,e.mdx)("a",{parentName:"p",href:"https://support.apple.com/en-il/guide/mac-help/mchlp1008/mac"},"Spotlight"),` search feature of macOS, we at Bit created a similar search bar (UI wise).
4Here it is:`),(0,e.mdx)(f.CommandBar,{isVisible:!0,mdxType:"CommandBar"}),(0,e.mdx)("p",null,`Initially, it was created to search for components and commands in a Bit 5`,(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/Workspace"},"Workspace"),`, but as we grew, we had to extend its ability to support 6more complex search queries. For instance, look at how the search functionality works in 7the following Bit component - the `,(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev"},"Bit.dev")," app. Click on the magnifier icon below:"),(0,e.mdx)(C.ComponentShowcase,{componentId:"teambit.community/apps/bit-dev@latest",mdxType:"ComponentShowcase"}),(0,e.mdx)("p",null,"As you can see, you can search for anything in the docs and navigate to it."),(0,e.mdx)("p",null,"If you navigate to any Workspace UI either locally or on the cloud(such as the ",(0,e.mdx)(s.ComponentName,{componentId:"teambit.blog-content/composable-search-bar",mdxType:"ComponentName"})," you are currently reading) and hit cmd/ctrl+k, you'll be able to see the original purpose of the search functionality - to find the components you need."),(0,e.mdx)("p",null,"While writing this post, we realized that it could also be great if we had the search functionality working on the blog you are currently browsing."),(0,e.mdx)("p",null,"It only took a few minutes to create a ",(0,e.mdx)(s.ComponentName,{componentId:"teambit.blog/blocks/search-bar",mdxType:"ComponentName"})," that would compose the original ",(0,e.mdx)(s.ComponentName,{componentId:"teambit.explorer/ui/command-bar",mdxType:"ComponentName"})," component. And trust me, we didn't copy and paste the code."),(0,e.mdx)("h3",null,"Write once, use anywhere"),(0,e.mdx)("p",null,"If you're not used to working with independent components, you might think that all of our apps exist in a ",(0,e.mdx)("a",{parentName:"p",href:"https://en.wikipedia.org/wiki/Monorepo"},"Monorepo"),`, and this is how we can reuse the same logic across all apps. 8While the Monorepo solution will work to some extent, it has a few disadvantages:`),(0,e.mdx)("ul",null,(0,e.mdx)("li",{parentName:"ul"},"Monorepos are difficult to maintain and scale."),(0,e.mdx)("li",{parentName:"ul"},"Monorepos require a lot of time to build and deploy."),(0,e.mdx)("li",{parentName:"ul"},"Monorepos are not easy to test.")),(0,e.mdx)("p",null,"Instead, the ",(0,e.mdx)(s.ComponentName,{componentId:"teambit.explorer/ui/command-bar",mdxType:"ComponentName"}),` is just an independent component 9living in the `,(0,e.mdx)("a",{parentName:"p",href:"https://bit.cloud/teambit/explorer"},"explorer scope"),". It is versioned, built, and unit-tested independently with Bit."),(0,e.mdx)("p",null,`The main benefit is that you can use the same search functionality across all your apps and keep a consistent brand and UX. 10The user browsing your apps may not even notice that they are switching between apps.`),(0,e.mdx)("h3",null,"How does this magic happen?"),(0,e.mdx)("p",null,"The ",(0,e.mdx)(s.ComponentName,{componentId:"teambit.explorer/ui/command-bar",mdxType:"ComponentName"})," is a headless search ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.dev/docs/Component"},"component"),` 11that uses the `,(0,e.mdx)("a",{parentName:"p",href:"https://fusejs.io/"},"Fuse.js")," library to ",(0,e.mdx)("a",{parentName:"p",href:"https://en.wikipedia.org/wiki/Fuzzy_search"},"Fuzzy Search")," anything."),(0,e.mdx)("p",null,"You have to pass the searching logic to the ",(0,e.mdx)("inlineCode",{parentName:"p"},"search"),` prop, and the rest is done for you. 12Occasionally, you want to control its visibility by passing a boolean to the `,(0,e.mdx)("inlineCode",{parentName:"p"},"visible")," prop."),(0,e.mdx)("pre",null,(0,e.mdx)("code",{parentName:"pre",className:"language-tsx"},`<BaseCommandBar 13 className={classnames(textColumn, styles.commandBar)} 14 searcher={searcher.search} 15 visible={visible} 16 onVisibilityChange={(next) => setVisible(next)} 17/> 18`)),(0,e.mdx)("p",null,"Here, for example, is the logic that I implemented for searching headings in this blog post:"),(0,e.mdx)("ol",null,(0,e.mdx)("li",{parentName:"ol"},"The first step is to create the searcher.")),(0,e.mdx)("pre",null,(0,e.mdx)("code",{parentName:"pre",className:"language-tsx"},`export type Heading = { 19 /** unique identifier for the heading */ 20 id: string; 21 /** the searchable text */ 22 title: string; 23 /**The DOM element */ 24 element: HTMLHeadingElement; 25}; 26 27export class InPageSearcher extends Searcher<Heading, Heading> { 28 constructor() { 29 super({ searchKeys: ["title", "id"] }); 30 } 31 32 override toSearchResult = ({ item }: FuzzySearchItem<Heading>) => { 33 return { 34 id: item.id, 35 title: item.title, 36 element: item.element, 37 action: () => { 38 item.element.scrollIntoView({ behavior: "smooth", block: "start" }); 39 }, 40 41 children: ( 42 <div className={styles.searchBoxItem}>
43 <span className={classnames(ellipsis, styles.title)}> 44 {item.title} 45 </span> 46 </div> 47 ), 48 }; 49 }; 50 51 override toSearchableItem(item: Heading) { 52 return item; 53 } 54} 55 56 57} 58`)),(0,e.mdx)("p",null,"In the ",(0,e.mdx)("inlineCode",{parentName:"p"},"InPageSearcher"),` class, we are overriding 59the `,(0,e.mdx)("inlineCode",{parentName:"p"},"toSearchResult")," and ",(0,e.mdx)("inlineCode",{parentName:"p"},"toSearchableItem")," methods. In the ",(0,e.mdx)("inlineCode",{parentName:"p"},"toSearchResult"),` method, we determine 60what props we want on the search result, the action we want to perform when the user clicks on the search result, 61and the children we want to display as the search results.`),(0,e.mdx)("ol",{start:2},(0,e.mdx)("li",{parentName:"ol"},"Next, we need to create the ",(0,e.mdx)("inlineCode",{parentName:"li"},"useInPageSearcher")," hook.")),(0,e.mdx)("pre",null,(0,e.mdx)("code",{parentName:"pre",className:"language-tsx"},`export function useInPageSearcher(Headings: Heading[]) { 62 const searcherRef = useRef<InPageSearcher>(); 63 if (!searcherRef.current) searcherRef.current = new InPageSearcher(); 64 65 const searcher = searcherRef.current; 66 searcher.update(Headings); 67 68 return searcher; 69`)),(0,e.mdx)("ol",{start:3},(0,e.mdx)("li",{parentName:"ol"},"And finally, we can have to pass all heading on the page to the ",(0,e.mdx)("inlineCode",{parentName:"li"},"useInPageSearcher")," hook.")),(0,e.mdx)("pre",null,(0,e.mdx)("code",{parentName:"pre",className:"language-tsx"},`const [headings, setHeadings] = useState<Heading[]>(); 70const searcher = useInPageSearcher(headings || []); 71const [visible, setVisible] = useState(false); 72 73useHotkeys('command+shift+k, ctrl+shift+k', () => setVisible(true)); 74 75useEffect(() => { 76 setHeadings( 77 [...document.getElementsByTagName('h3')].map((element) => ({ 78 id: element.textContent, 79 title: element.textContent, 80 element: element, 81 })) 82 ); 83}, []); 84`)),(0,e.mdx)("p",null,"The searcher returned from the ",(0,e.mdx)("inlineCode",{parentName:"p"},"useInPageSearcher"),` hook will be passed to 85the `,(0,e.mdx)("inlineCode",{parentName:"p"},"BaseCommandBar")," component, as seen in the first snippet."),(0,e.mdx)("h3",null,"Can I make it work in my app?"),(0,e.mdx)(p.default,{mdxType:"BitInstall"}),(0,e.mdx)("p",null,"The process of composing a search bar in your app is as simple as:"),(0,e.mdx)("ol",null,(0,e.mdx)("li",{parentName:"ol"},(0,e.mdx)("p",{parentName:"li"},"Fork the blogs' ",(0,e.mdx)(s.ComponentName,{componentId:"teambit.blog/blocks/search-bar",mdxType:"ComponentName"})," component and implement your own logic."),(0,e.mdx)(w.BitFork,{componentName:"teambit.blog/blocks/search-bar"})),(0,e.mdx)("li",{parentName:"ol"},(0,e.mdx)("p",{parentName:"li"},"Tag the component with its first version:"),(0,e.mdx)(w.BitTag,{message:"my awesome search bar"})),(0,e.mdx)("li",{parentName:"ol"},(0,e.mdx)("p",{parentName:"li"},"Export the component."),(0,e.mdx)(w.BitExport,null)),(0,e.mdx)("li",{parentName:"ol"},(0,e.mdx)("p",{parentName:"li"},"Enjoy the search bar in your app and/or share it with the entire world. \u{1F973}"))),(0,e.mdx)("h3",null,"Conclusion"),(0,e.mdx)("p",null,"In this blog post, we have covered the basics of how to use the ",(0,e.mdx)(s.ComponentName,{componentId:"teambit.explorer/ui/command-bar",mdxType:"ComponentName"}),` 86but the main takeaway is that by using independent component, you can reuse the same logic across all of your apps.`),(0,e.mdx)("p",null,"You see, in the beginning, when ",(0,e.mdx)("a",{parentName:"p",href:"https://bit.cloud/kutnerjs"},"Uri Kutner")," developed the ",(0,e.mdx)(s.ComponentName,{componentId:"teambit.explorer/ui/command-bar",mdxType:"ComponentName"}),` , 87he didn't think that one day this component would grow to serve all the applications in the world (ok, just at Bit. For now at least).`),(0,e.mdx)("p",null,`He just created the product that he was requested to build, and he was happy with it. 88But since every independent component is an asset, it was easy to refactor it into 89a more generic component that can be used in any app, and that is what he did.`),(0,e.mdx)("p",null,"This way, whenever anyone on our team builds a component, it becomes another piece of ",(0,e.mdx)("em",{parentName:"p"},"\u201CLego\u201D")," in our box that we can all use to create new things while making it easy to collaborate and keep our users consistently superb."))}g.__bit_component=b,g.isMDXComponent=!0},430223(M,t,n){var b={id:"teambit.blog-content/[email protected]",homepage:"https://bit.dev/teambit/blog-content/composable-search-bar",exported:!0}
89,O=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.ComposableSearchBar=void 0;var N=n(8838);Object.defineProperty(t,"ComposableSearchBar",{enumerable:!0,get:function(){return O(N).default}}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return O(N).default}})},786683(M,t,n){var b={id:"teambit.design/elements/[email protected]",homepage:"https://bit.dev/teambit/design/elements/icon",exported:!0},O=this&&this.__rest||function(w,f){var p={};for(var x in w)Object.prototype.hasOwnProperty.call(w,x)&&f.indexOf(x)<0&&(p[x]=w[x]);if(w!=null&&typeof Object.getOwnPropertySymbols=="function")for(var r=0,x=Object.getOwnPropertySymbols(w);r<x.length;r++)f.indexOf(x[r])<0&&Object.prototype.propertyIsEnumerable.call(w,x[r])&&(p[x[r]]=w[x[r]]);return p},N=this&&this.__importDefault||function(w){return w&&w.__esModule?w:{default:w}};Object.defineProperty(t,"__esModule",{value:!0}),t.Icon=void 0;const e=N(n(531715)),C=n(496),s="bitcon";function u(w){var{className:f,of:p}=w,x=O(w,["className","of"]);return e.default.createElement(C.BaseIcon,Object.assign({of:`${s}-${p}`,className:f,"data-bit-id":"teambit.evangelist/elements/icon"},x))}u.__bit_component=b,t.Icon=u},502012(M,t,n){var b={id:"teambit.design/elements/[email protected]",homepage:"https://bit.dev/teambit/design/elements/icon",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.Icon=void 0;var O=n(786683);Object.defineProperty(t,"Icon",{enumerable:!0,get:function(){return O.Icon}})},345018(M,t,n){var b={id:"teambit.design/ui/input/[email protected]",homepage:"https://bit.dev/teambit/design/ui/input/option-button",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.OptionButton=void 0;var O=n(815486);Object.defineProperty(t,"OptionButton",{enumerable:!0,get:function(){return O.OptionButton}})},815486(M,t,n){var b={id:"teambit.design/ui/input/[email protected]",homepage:"https://bit.dev/teambit/design/ui/input/option-button",exported:!0},O=this&&this.__rest||function(p,x){var r={};for(var o in p)Object.prototype.hasOwnProperty.call(p,o)&&x.indexOf(o)<0&&(r[o]=p[o]);if(p!=null&&typeof Object.getOwnPropertySymbols=="function")for(var h=0,o=Object.getOwnPropertySymbols(p);h<o.length;h++)x.indexOf(o[h])<0&&Object.prototype.propertyIsEnumerable.call(p,o[h])&&(r[o[h]]=p[o[h]]);return r},N=this&&this.__importDefault||function(p){return p&&p.__esModule?p:{default:p}};Object.defineProperty(t,"__esModule",{value:!0}),t.OptionButton=void 0;const e=N(n(531715)),C=N(n(879288)),s=N(n(579565)),u=n(502012),w=N(n(519698));function f(p){var{icon:x,className:r,active:o,children:h}=p,v=O(p,["icon","className","active","children"]);const d=x?e.default.createElement(u.Icon,{of:x}):null;return e.default.createElement(s.default,Object.assign({},v,{className:(0,C.default)(r,w.default.optionButton,o&&w.default.active)}),d,h)}f.__bit_component=b,t.OptionButton=f},188401(M,t,n){var b={id:"teambit.explorer/ui/[email protected]",homepage:"https://bit.dev/teambit/explorer/ui/command-bar",exported:!0},O=this&&this.__createBinding||(Object.create?function(r,o,h,v){v===void 0&&(v=h),Object.defineProperty(r,v,{enumerable:!0,get:function(){return o[h]}})}:function(r,o,h,v){v===void 0&&(v=h),r[v]=o[h]}),N=this&&this.__setModuleDefault||(Object.create?function(r,o){Object.defineProperty(r,"default",{enumerable:!0,value:o})}:function(r,o){r.default=o}),e=this&&this.__importStar||function(r){if(r&&r.__esModule)return r;var o={};if(r!=null)for(var h in r)h!=="default"&&Object.prototype.hasOwnProperty.call(r,h)&&O(o,r,h);return N(o,r),o},C=this&&this.__rest||function(r,o){var h={};for(var v in r)Object.prototype.hasOwnProperty.call(r,v)&&o.indexOf(v)<0&&(h[v]=r[v]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var d=0,v=Object.getOwnPropertySymbols(r);d<v.length;d++)o.indexOf(v[d])<0&&Object.prototype.propertyIsEnumerable.call(r,v[d])&&(h[v[d]]=r[v[d]]);return h},s=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(t,"__esModule",{value:!0}),t.AutoCompleteInput=void 0;const u=e(n(531715)),w=s(n(879288)),f=s(n(825009));
89function p(r){var{className:o,keyHandlers:h,onKeyDown:v,focus:d}=r,i=C(r,["className","keyHandlers","onKeyDown","focus"]);const c=(0,u.createRef)();(0,u.useEffect)(()=>{var g,m;d?(g=c.current)===null||g===void 0||g.focus():(m=c.current)===null||m===void 0||m.blur()},[d]);const _=x(h,v);return u.default.createElement("input",Object.assign({},i,{ref:c,className:(0,w.default)(f.default.input,o),onKeyDown:_}))}p.__bit_component=b,t.AutoCompleteInput=p;function x(r,o){const h=(0,u.useRef)(r);return h.current=r,(0,u.useCallback)(v=>{if(o?.(v),v.defaultPrevented)return;const d=h.current[v.key];!d||(v.preventDefault(),d(v))},[o])}x.__bit_component=b},408006(M,t,n){var b={id:"teambit.explorer/ui/[email protected]",homepage:"https://bit.dev/teambit/explorer/ui/command-bar",exported:!0},O=this&&this.__createBinding||(Object.create?function(e,C,s,u){u===void 0&&(u=s),Object.defineProperty(e,u,{enumerable:!0,get:function(){return C[s]}})}:function(e,C,s,u){u===void 0&&(u=s),e[u]=C[s]}),N=this&&this.__exportStar||function(e,C){for(var s in e)s!=="default"&&!Object.prototype.hasOwnProperty.call(C,s)&&O(C,e,s)};Object.defineProperty(t,"__esModule",{value:!0}),N(n(188401),t)},930465(M,t,n){var b={id:"teambit.explorer/ui/[email protected]",homepage:"https://bit.dev/teambit/explorer/ui/command-bar",exported:!0},O=this&&this.__rest||function(f,p){var x={};for(var r in f)Object.prototype.hasOwnProperty.call(f,r)&&p.indexOf(r)<0&&(x[r]=f[r]);if(f!=null&&typeof Object.getOwnPropertySymbols=="function")for(var o=0,r=Object.getOwnPropertySymbols(f);o<r.length;o++)p.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(f,r[o])&&(x[r[o]]=f[r[o]]);return x},N=this&&this.__importDefault||function(f){return f&&f.__esModule?f:{default:f}};Object.defineProperty(t,"__esModule",{value:!0}),t.CommandBarItem=void 0;const e=N(n(531715)),C=N(n(879288)),s=n(37705),u=N(n(469909));function w(f){var{className:p}=f,x=O(f,["className"]);return e.default.createElement(s.MenuItem,Object.assign({className:(0,C.default)(p,u.default.commandBarOption)},x))}w.__bit_component=b,t.CommandBarItem=w},546936(M,t,n){var b={id:"teambit.explorer/ui/[email protected]",homepage:"https://bit.dev/teambit/explorer/ui/command-bar",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.CommandBarItem=void 0;var O=n(930465);Object.defineProperty(t,"CommandBarItem",{enumerable:!0,get:function(){return O.CommandBarItem}})},107261(M,t,n){var b={id:"teambit.explorer/ui/[email protected]",homepage:"https://bit.dev/teambit/explorer/ui/command-bar",exported:!0},O=this&&this.__createBinding||(Object.create?function(i,c,_,g){g===void 0&&(g=_),Object.defineProperty(i,g,{enumerable:!0,get:function(){return c[_]}})}:function(i,c,_,g){g===void 0&&(g=_),i[g]=c[_]}),N=this&&this.__setModuleDefault||(Object.create?function(i,c){Object.defineProperty(i,"default",{enumerable:!0,value:c})}:function(i,c){i.default=c}),e=this&&this.__importStar||function(i){if(i&&i.__esModule)return i;var c={};if(i!=null)for(var _ in i)_!=="default"&&Object.prototype.hasOwnProperty.call(i,_)&&O(c,i,_);return N(c,i),c},C=this&&this.__rest||function(i,c){var _={};for(var g in i)Object.prototype.hasOwnProperty.call(i,g)&&c.indexOf(g)<0&&(_[g]=i[g]);if(i!=null&&typeof Object.getOwnPropertySymbols=="function")for(var m=0,g=Object.getOwnPropertySymbols(i);m<g.length;m++)c.indexOf(g[m])<0&&Object.prototype.propertyIsEnumerable.call(i,g[m])&&(_[g[m]]=i[g[m]]);return _},s=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(t,"__esModule",{value:!0}),t.CommandBar=void 0;const u=e(n(531715)),w=s(n(879288)),f=s(n(81620)),p=n(619519),x=n(408006),r=n(546936),o=s(n(415153));function h(i){var{elevation:c,className:_,visible:g=!0,searcher:m,resultsLimit:S=5,onVisibilityChange:j,placeholder:B="Search anything",value:D,defaultValue:T="",onChange:Y,autofocus:k}=i,J=C(i,["elevation","className","visible","searcher","resultsLimit","onVisibilityChange","placeholder","value","defaultValue","onChange","autofocus"]);const[Q="",q]=(0,f.default)({controlledValue:D,initialValue:T,onChange:Y});(0,u.useEffect)(()=>q(T),[g]);const V=(0,u.useMemo)(()=>m(Q,S),[Q,m,S]),$=d(V.length);(0,u.useEffect)(()=>$.reset(),[V]);const ee=()=>{j?.(!1);const W=V[$.activeIdx];W?.action()};ee.__bit_component=b;const te={ArrowDown:$.increment,ArrowUp:$.decrement,Enter:ee,Escape:()=>j?.(!1)};return u.default.createElement(p.Card,Object.assign({},J,{elevation:c,className:(0,w.default)(_,o.default.commandBar,g&&o.default.visible,!c&&o.default.shadow)}),u.default.createElement(x.AutoCompleteInput,{value:Q,focus:k?g:void 0,autoFocus:k,keyHandlers:te,className:o.default.input,placeholder:B,onChange:W=>q(W.target.value),onBlur:()=>j?.(!1)}),u.default.createElement("div",{className:o.default.results},V.map((W,ae)=>{var{action:re,id:a}=W,l=C(W,["action","id"]);return u.default.createElement(r.CommandBarItem,Object.assign({key:a,active:ae===$.activeIdx,onMouseDown:()=>re()},l))})))}h.__bit_component=b,t.CommandBar=h;const v=0;function d(i,c=0){const[_,g]=(0,u.useState)(c),m=(0,u.useCallback)(()=>g(B=>Math.min(B+1,i-1)),[i]),S=(0,u.useCallback)(()=>g(B=>Math.max(B-1,v)),[]),j=(0,u.useCallback)(()=>g(c),[c]);return{activeIdx:_,increment:m,decrement:S,reset:j}}d.__bit_component=b},794512(M,t,n){var b={id:"teambit.explorer/ui/[email protected]",homepage:"https://bit.dev/teambit/explorer/ui/command-bar",exported:!0}
89;Object.defineProperty(t,"__esModule",{value:!0}),t.CommandBar=void 0;var O=n(107261);Object.defineProperty(t,"CommandBar",{enumerable:!0,get:function(){return O.CommandBar}})},669642(M,t,n){var b={id:"teambit.explorer/ui/[email protected]",homepage:"https://bit.dev/teambit/explorer/ui/command-bar",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.Searcher=t.CommandBar=void 0;var O=n(794512);Object.defineProperty(t,"CommandBar",{enumerable:!0,get:function(){return O.CommandBar}});var N=n(411039);Object.defineProperty(t,"Searcher",{enumerable:!0,get:function(){return N.Searcher}})},411039(M,t,n){var b={id:"teambit.explorer/ui/[email protected]",homepage:"https://bit.dev/teambit/explorer/ui/command-bar",exported:!0},O=this&&this.__importDefault||function(s){return s&&s.__esModule?s:{default:s}};Object.defineProperty(t,"__esModule",{value:!0}),t.Searcher=void 0;const N=O(n(592644)),e=O(n(213162));class C{constructor(u){this.baseSearcherOptions=u,this.fuseCommands=new N.default([],{keys:this.baseSearcherOptions.searchKeys}),this.update=(0,e.default)(w=>{const f=w.map(this.toSearchableItem);this.fuseCommands.setCollection(f)}),this.search=(0,e.default)((w,f)=>this.fuseCommands.search(w,{limit:f}).map(this.toSearchResult))}}t.Searcher=C},804419(M,t,n){var b={id:"teambit.ui-foundation/ui/[email protected]",homepage:"https://bit.dev/teambit/ui-foundation/ui/is-browser",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.isBrowser=void 0;var O=n(810486);Object.defineProperty(t,"isBrowser",{enumerable:!0,get:function(){return O.isBrowser}})},810486(M,t){var n={id:"teambit.ui-foundation/ui/[email protected]",homepage:"https://bit.dev/teambit/ui-foundation/ui/is-browser",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.isBrowser=void 0;const b=typeof window<"u";t.isBrowser=b},111947(M,t,n){var b={id:"teambit.ui-foundation/ui/[email protected]",homepage:"https://bit.dev/teambit/ui-foundation/ui/keycap",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.Keycap=t.KeyCombo=t.KeySequence=void 0;var O=n(964782);Object.defineProperty(t,"KeySequence",{enumerable:!0,get:function(){return O.KeySequence}}),Object.defineProperty(t,"KeyCombo",{enumerable:!0,get:function(){return O.KeyCombo}}),Object.defineProperty(t,"Keycap",{enumerable:!0,get:function(){return O.Keycap}})},702345(M,t,n){var b={id:"teambit.ui-foundation/ui/[email protected]",homepage:"https://bit.dev/teambit/ui-foundation/ui/keycap",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.prettifyKey=void 0;const O=n(804419),N={shift:"\u21E7",ctrl:"\u2303",alt:"\u2325",command:"\u2318",meta:"\u2318",mod:"\u2318",backspace:"\u232B",tab:"\u21E5",enter:"\u21A9",return:"\u21A9",capslock:"\u21EA",esc:"\u238B",escape:"\u238B",space:"\u2423",pageup:"\u21DE",pagedown:"\u21DF",end:"end",home:"home",left:"\u2190",up:"\u2191",right:"\u2192",down:"\u2193",del:"\u2326",ins:"insert",plus:"+"},e={shift:"shift",ctrl:"ctrl",alt:"alt",meta:"win",mod:"ctrl",backspace:"backspace",tab:"tab",enter:"enter",return:"enter",capslock:"caps lock",esc:"Esc",escape:"Esc",space:"\u2423",pageup:"pgUp",pagedown:"pgDown",end:"end",home:"home",left:"\u2190",up:"\u2191",right:"\u2192",down:"\u2193",del:"del",ins:"insert",plus:"+"},C=/Mac|iPod|iPhone|iPad/;function s(u){if(typeof u!="string")return u;const f=!O.isBrowser||C.test(window.navigator.platform)?N:e;return u in f?f[u]:u}s.__bit_component=b,t.prettifyKey=s},964782(M,t,n){var b={id:"teambit.ui-foundation/ui/[email protected]",homepage:"https://bit.dev/teambit/ui-foundation/ui/keycap",exported:!0},O=this&&this.__createBinding||(Object.create?function(d,i,c,_){_===void 0&&(_=c),Object.defineProperty(d,_,{enumerable:!0,get:function(){return i[c]}})}:function(d,i,c,_){_===void 0&&(_=c),d[_]=i[c]}),N=this&&this.__setModuleDefault||(Object.create?function(d,i){Object.defineProperty(d,"default",{enumerable:!0,value:i})}:function(d,i){d.default=i}),e=this&&this.__importStar||function(d){if(d&&d.__esModule)return d;var i={};if(d!=null)for(var c in d)c!=="default"&&Object.prototype.hasOwnProperty.call(d,c)&&O(i,d,c);return N(i,d),i},C=this&&this.__rest||function(d,i){var c={};for(var _ in d)Object.prototype.hasOwnProperty.call(d,_)&&i.indexOf(_)<0&&(c[_]=d[_]);if(d!=null&&typeof Object.getOwnPropertySymbols=="function")for(var g=0,_=Object.getOwnPropertySymbols(d);g<_.length;g++)i.indexOf(_[g])<0&&Object.prototype.propertyIsEnumerable.call(d,_[g])&&(c[_[g]]=d[_[g]]);return c},s=this&&this.__importDefault||function(d){return d&&d.__esModule?d:{default:d}};
89Object.defineProperty(t,"__esModule",{value:!0}),t.Keycap=t.KeyCombo=t.KeySequence=void 0;const u=e(n(531715)),w=s(n(879288)),f=s(n(253928)),p=n(702345);function x(d){var{children:i,className:c}=d,_=C(d,["children","className"]);if(!i)return null;const g=(0,u.useMemo)(()=>{const S=i.split(" ").map(B=>B.trim()).filter(B=>!!B).map((B,D)=>u.default.createElement(r,{key:D},B));return h(S,B=>u.default.createElement(v,{key:`then-sep_${B}`}))},[i]);return u.default.createElement("div",Object.assign({},_,{className:(0,w.default)(f.default.keySequence,c)}),g)}x.__bit_component=b,t.KeySequence=x;function r(d){var{children:i,className:c}=d,_=C(d,["children","className"]);if(!i)return null;const g=i.split("+").map(m=>m.trim());return u.default.createElement("div",Object.assign({},_,{className:(0,w.default)(c,f.default.keyCombo)}),g.map((m,S)=>u.default.createElement(o,{key:S},m)))}r.__bit_component=b,t.KeyCombo=r;function o(d){var{className:i,children:c}=d,_=C(d,["className","children"]);const g=(0,p.prettifyKey)(c);return u.default.createElement("kbd",Object.assign({},_,{className:(0,w.default)(i,f.default.keycap)}),g)}o.__bit_component=b,t.Keycap=o;function h(d,i){const c=[];return d.forEach((_,g)=>{c.push(_),c.push(i(g))}),c.pop(),c}h.__bit_component=b;function v(){return u.default.createElement("span",{className:f.default.thenSep},"then")}v.__bit_component=b},213162(M,t,n){n.r(t),n.d(t,{default:()=>e});var b=Number.isNaN||function(s){return typeof s=="number"&&s!==s};function O(C,s){return!!(C===s||b(C)&&b(s))}function N(C,s){if(C.length!==s.length)return!1;for(var u=0;u<C.length;u++)if(!O(C[u],s[u]))return!1;return!0}function e(C,s){s===void 0&&(s=N);var u=null;function w(){for(var f=[],p=0;p<arguments.length;p++)f[p]=arguments[p];if(u&&u.lastThis===this&&s(f,u.lastArgs))return u.lastResult;var x=C.apply(this,f);return u={lastResult:x,lastArgs:f,lastThis:this},x}return w.clear=function(){u=null},w}},179565(M,t,n){n.r(t),n.d(t,{isHotkeyPressed:()=>re,useHotkeys:()=>ae,useIsHotkeyPressed:()=>ee});/*! 90 * hotkeys-js v3.8.7 91 * A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies. 92 * 93 * Copyright (c) 2021 kenny wong <[email protected]> 94 * http://jaywcjlove.github.io/hotkeys 95 * 96 * Licensed under the MIT license. 97 */var b=typeof navigator<"u"?navigator.userAgent.toLowerCase().indexOf("firefox")>0:!1;function O(a,l,y){a.addEventListener?a.addEventListener(l,y,!1):a.attachEvent&&a.attachEvent("on".concat(l),function(){y(window.event)})}function N(a,l){for(var y=l.slice(0,l.length-1),P=0;P<y.length;P++)y[P]=a[y[P].toLowerCase()];return y}function e(a){typeof a!="string"&&(a=""),a=a.replace(/\s/g,"");for(var l=a.split(","),y=l.lastIndexOf("");y>=0;)l[y-1]+=",",l.splice(y,1),y=l.lastIndexOf("");return l}function C(a,l){for(var y=a.length>=l.length?a:l,P=a.length>=l.length?l:a,E=!0,K=0;K<y.length;K++)P.indexOf(y[K])===-1&&(E=!1);return E}for(var s={backspace:8,tab:9,clear:12,enter:13,return:13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,delete:46,ins:45,insert:45,home:36,end:35,pageup:33,pagedown:34,capslock:20,num_0:96,num_1:97,num_2:98,num_3:99,num_4:100,num_5:101,num_6:102,num_7:103,num_8:104,num_9:105,num_multiply:106,num_add:107,num_enter:108,num_subtract:109,num_decimal:110,num_divide:111,"\u21EA":20,",":188,".":190,"/":191,"`":192,"-":b?173:189,"=":b?61:187,";":b?59:186,"'":222,"[":219,"]":221,"\\":220},u={"\u21E7":16,shift:16,"\u2325":18,alt:18,option:18,"\u2303":17,ctrl:17,control:17,"\u2318":91,cmd:91,command:91},w={16:"shiftKey",18:"altKey",17:"ctrlKey",91:"metaKey",shiftKey:16,ctrlKey:17,altKey:18,metaKey:91},f={16:!1,18:!1,17:!1,91:!1},p={},x=1;x<20;x++)s["f".concat(x)]=111+x;var r=[],o="all",h=[],v=function(l){return s[l.toLowerCase()]||u[l.toLowerCase()]||l.toUpperCase().charCodeAt(0)};function d(a){o=a||"all"}function i(){return o||"all"}function c(){return r.slice(0)}function _(a){var l=a.target||a.srcElement,y=l.tagName,P=!0;return(l.isContentEditable||(y==="INPUT"||y==="TEXTAREA"||y==="SELECT")&&!l.readOnly)&&(P=!1),P}function g(a){return typeof a=="string"&&(a=v(a)),r.indexOf(a)!==-1}function m(a,l){var y,P;a||(a=i());for(var E in p)if(Object.prototype.hasOwnProperty.call(p,E))for(y=p[E],P=0;P<y.length;
97)y[P].scope===a?y.splice(P,1):P++;i()===a&&d(l||"all")}function S(a){var l=a.keyCode||a.which||a.charCode,y=r.indexOf(l);if(y>=0&&r.splice(y,1),a.key&&a.key.toLowerCase()==="meta"&&r.splice(0,r.length),(l===93||l===224)&&(l=91),l in f){f[l]=!1;for(var P in u)u[P]===l&&(k[P]=!1)}}function j(a){if(!a)Object.keys(p).forEach(function(I){return delete p[I]});else if(Array.isArray(a))a.forEach(function(I){I.key&&B(I)});else if(typeof a=="object")a.key&&B(a);else if(typeof a=="string"){for(var l=arguments.length,y=new Array(l>1?l-1:0),P=1;P<l;P++)y[P-1]=arguments[P];var E=y[0],K=y[1];typeof E=="function"&&(K=E,E=""),B({key:a,scope:E,method:K,splitKey:"+"})}}var B=function(l){var y=l.key,P=l.scope,E=l.method,K=l.splitKey,I=K===void 0?"+":K,A=e(y);A.forEach(function(F){var L=F.split(I),U=L.length,R=L[U-1],X=R==="*"?"*":v(R);if(!!p[X]){P||(P=i());var z=U>1?N(u,L):[];p[X]=p[X].map(function(H){var G=E?H.method===E:!0;return G&&H.scope===P&&C(H.mods,z)?{}:H})}})};function D(a,l,y){var P;if(l.scope===y||l.scope==="all"){P=l.mods.length>0;for(var E in f)Object.prototype.hasOwnProperty.call(f,E)&&(!f[E]&&l.mods.indexOf(+E)>-1||f[E]&&l.mods.indexOf(+E)===-1)&&(P=!1);(l.mods.length===0&&!f[16]&&!f[18]&&!f[17]&&!f[91]||P||l.shortcut==="*")&&l.method(a,l)===!1&&(a.preventDefault?a.preventDefault():a.returnValue=!1,a.stopPropagation&&a.stopPropagation(),a.cancelBubble&&(a.cancelBubble=!0))}}function T(a){var l=p["*"],y=a.keyCode||a.which||a.charCode;if(!!k.filter.call(this,a)){if((y===93||y===224)&&(y=91),r.indexOf(y)===-1&&y!==229&&r.push(y),["ctrlKey","altKey","shiftKey","metaKey"].forEach(function(z){var H=w[z];a[z]&&r.indexOf(H)===-1?r.push(H):!a[z]&&r.indexOf(H)>-1?r.splice(r.indexOf(H),1):z==="metaKey"&&a[z]&&r.length===3&&(a.ctrlKey||a.shiftKey||a.altKey||(r=r.slice(r.indexOf(H))))}),y in f){f[y]=!0;for(var P in u)u[P]===y&&(k[P]=!0);if(!l)return}for(var E in f)Object.prototype.hasOwnProperty.call(f,E)&&(f[E]=a[w[E]]);a.getModifierState&&!(a.altKey&&!a.ctrlKey)&&a.getModifierState("AltGraph")&&(r.indexOf(17)===-1&&r.push(17),r.indexOf(18)===-1&&r.push(18),f[17]=!0,f[18]=!0);var K=i();if(l)for(var I=0;I<l.length;I++)l[I].scope===K&&(a.type==="keydown"&&l[I].keydown||a.type==="keyup"&&l[I].keyup)&&D(a,l[I],K);if(y in p){for(var A=0;A<p[y].length;A++)if((a.type==="keydown"&&p[y][A].keydown||a.type==="keyup"&&p[y][A].keyup)&&p[y][A].key){for(var F=p[y][A],L=F.splitKey,U=F.key.split(L),R=[],X=0;X<U.length;X++)R.push(v(U[X]));R.sort().join("")===r.sort().join("")&&D(a,F,K)}}}}function Y(a){return h.indexOf(a)>-1}function k(a,l,y){r=[];var P=e(a),E=[],K="all",I=document,A=0,F=!1,L=!0,U="+";for(y===void 0&&typeof l=="function"&&(y=l),Object.prototype.toString.call(l)==="[object Object]"&&(l.scope&&(K=l.scope),l.element&&(I=l.element),l.keyup&&(F=l.keyup),l.keydown!==void 0&&(L=l.keydown),typeof l.splitKey=="string"&&(U=l.splitKey)),typeof l=="string"&&(K=l);A<P.length;A++)a=P[A].split(U),E=[],a.length>1&&(E=N(u,a)),a=a[a.length-1],a=a==="*"?"*":v(a),a in p||(p[a]=[]),p[a].push({keyup:F,keydown:L,scope:K,mods:E,shortcut:P[A],method:y,key:P[A],splitKey:U});typeof I<"u"&&!Y(I)&&window&&(h.push(I),O(I,"keydown",function(R){T(R)}),O(window,"focus",function(){r=[]}),O(I,"keyup",function(R){T(R),S(R)}))}var J={setScope:d,getScope:i,deleteScope:m,getPressedKeyCodes:c,isPressed:g,filter:_,unbind:j};for(var Q in J)Object.prototype.hasOwnProperty.call(J,Q)&&(k[Q]=J[Q]);if(typeof window<"u"){var q=window.hotkeys;k.noConflict=function(a){return a&&window.hotkeys===k&&(window.hotkeys=q),k},window.hotkeys=k}const V=k;var $=n(531715);function ee(){return V.isPressed}V.filter=function(){return!0};var te=function(l,y){var P=l.target,E=P&&P.tagName;return Boolean(E&&y&&y.includes(E))},W=function(l){return te(l,["INPUT","TEXTAREA","SELECT"])};function ae(a,l,y,P){y instanceof Array&&(P=y,y=void 0);var E=y||{},K=E.enableOnTags,I=E.filter,A=E.keyup,F=E.keydown,L=E.filterPreventDefault,U=L===void 0?!0:L,R=E.enabled,X=R===void 0?!0:R,z=E.enableOnContentEditable,H=z===void 0?!1:z,G=(0,$.useRef)(null),ne=(0,$.useCallback)(function(Z,ie){var oe;return I&&!I(Z)?!U:W(Z)&&!te(Z,K)||(oe=Z.target)!=null&&oe.isContentEditable&&!H?!0:G.current===null||document.activeElement===G.current?(l(Z,ie),!0):!1},P?[G,K,I].concat(P):[G,K,I]);return(0,$.useEffect)(function(){if(!X){V.unbind(a,ne);return}return A&&F!==!0&&(y.keydown=!1),V(a,y||{},ne),function(){return V.unbind(a,ne)}},[ne,a,X]),G}var re=V.isPressed},81620(M,t,n){n.r(t),n.d(t,{default:()=>C});var b=n(531715);function O(s){var u=(0,b.useRef)();return u.current||(u.current={v:s()}),u.current.v}const N=O;function e(s){var u=s.controlledValue,w=s.initialValue,f=s.onChange,p=u!==void 0,x=N(function(){return p}),r=(0,b.useState)(w),o=r[0],h=r[1],v=p?u:o;function d(i){p||h(i),f&&f(i)}return[v,d]}const C=e},655846(M,t,n){n.r(t),n.d(t,{default:()=>b});const b={container:"command-bar_container__O6tVu",commandBarVisible:"command-bar_commandBarVisible__9A3Dc",commandBar:"command-bar_commandBar__4KY20",searchBoxItem:"command-bar_searchBoxItem__nyzV5",title:"command-bar_title__-8Rcx",description:"command-bar_description__3pX+x",keys:"command-bar_keys__kHQUL"}},519698(M,t,n){n.r(t),n.d(t,{default:()=>b});const b={optionButton:"option-button_optionButton__AvMYq",active:"option-button_active__s2wxM"}},825009(M,t,n){n.r(t),n.d(t,{default:()=>b});const b={input:"autocomplete-input_input__d4OO-"}},469909(M,t,n){n.r(t),n.d(t,{default:()=>b});const b={commandBarOption:"command-bar-item_commandBarOption__lr6gX"}},415153(M,t,n){n.r(t),n.d(t,{default:()=>b});const b={commandBar:"command-bar_commandBar__UPKbO",visible:"command-bar_visible__yty9l",shadow:"command-bar_shadow__+Coob",input:"command-bar_input__rTnO4",results:"command-bar_results__ErSzs"}},253928(M,t,n){n.r(t),n.d(t,{default:()=>b});const b={keyCombo:"key_keyCombo__roUf9",keycap:"key_keycap__wnlAm",keySequence:"key_keySequence__S8C06",thenSep:"key_thenSep__KdByd"}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.