diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx index 17bafe61..3c039222 100644 --- a/apps/demo-react/src/App.tsx +++ b/apps/demo-react/src/App.tsx @@ -33,13 +33,7 @@ function App() {

Another section

- { - setOpen(true) - }} - > - Search - + Search

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique diff --git a/apps/storybook/stories/public/orama-search-button.stories.tsx b/apps/storybook/stories/public/orama-search-button.stories.tsx index 5a1106a0..e2c09336 100644 --- a/apps/storybook/stories/public/orama-search-button.stories.tsx +++ b/apps/storybook/stories/public/orama-search-button.stories.tsx @@ -1,6 +1,5 @@ import type { StoryObj, Meta } from '@storybook/web-components' import type { Components } from '@orama/wc-components' -import { useArgs } from '@storybook/preview-api' import demoIndexes from '../config' import { html } from 'lit-html' @@ -49,13 +48,6 @@ export default meta type Story = StoryObj const Template = (label: string) => (args) => { - const [{ openSearchbox }, updateArgs] = useArgs() - - const searchbox = document.querySelector('orama-search-box') - searchbox?.addEventListener('searchboxClosed', () => { - updateArgs({ openSearchbox: false }) - }) - return html`

@@ -63,15 +55,11 @@ const Template = (label: string) => (args) => { label="${args.label}" .colorScheme=${args.colorScheme} .size=${args.size} - .onclick=${() => { - updateArgs({ openSearchbox: !openSearchbox }) - }} > ${label}
= {} @Prop() sourceBaseUrl?: string @@ -38,7 +38,6 @@ export class SearchBox { @State() componentID = generateRandomID('search-box') @State() systemScheme: Omit = 'light' @State() windowWidth: number - @State() isOpen = this.open @Event() searchboxClosed: EventEmitter<{ id: HTMLElement @@ -59,17 +58,7 @@ export class SearchBox { @Watch('open') handleOpenPropChange(newValue: boolean) { - this.isOpen = newValue - } - - @Watch('isOpen') - handleOpenChange(newValue: boolean) { globalContext.open = newValue - if (!newValue) { - this.searchboxClosed.emit({ - id: this.el, - }) - } } @Watch('facetProperty') @@ -99,13 +88,15 @@ export class SearchBox { modalStatusChangedHandler(event: CustomEvent<{ open: boolean; id: HTMLElement }>) { if (event.detail.id === this.modalRef) { if (!event.detail.open) { - this.isOpen = false + globalContext.open = false + this.open = false } } } private closeSearchbox = () => { - this.isOpen = false + globalContext.open = false + this.open = false } updateTheme() { @@ -160,8 +151,6 @@ export class SearchBox { } componentWillLoad() { - globalContext.open = this.isOpen - // TODO: We probable want to keep these props below whithin the respective service // instance property. I seems to make sense to pass it as initialization prop. // Same goes for any other Chat init prop. Lets talk about it as well, please. @@ -177,6 +166,9 @@ export class SearchBox { connectedCallback() { this.windowWidth = windowWidthListener.width + globalStore.onChange('open', () => { + this.open = globalContext.open + }) windowWidthListener.addEventListener('widthChange', this.updateWindowWidth) } @@ -201,7 +193,7 @@ export class SearchBox { (this.modalRef = el)} - open={this.isOpen} + open={globalContext.open} class="modal" mainTitle="Start your search" closeOnEscape={globalContext.currentTask === 'search' || this.windowWidth <= 1024} diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index f5b204ee..1fcd5dd7 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -13,7 +13,7 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `open` | `open` | | `boolean` | `false` | | `placeholder` | `placeholder` | | `string` | `undefined` | -| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` | +| `resultMap` | -- | | `{ section?: string; title?: string; description?: string; path?: string; }` | `{}` | | `searchParams` | -- | | `SearchParamsFullText, never> \| SearchParamsHybrid, never> \| SearchParamsVector, never>` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | | `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | diff --git a/packages/ui-stencil/src/components/orama-search-button/orama-search-button.tsx b/packages/ui-stencil/src/components/orama-search-button/orama-search-button.tsx index 77f55abe..a05fb2a5 100644 --- a/packages/ui-stencil/src/components/orama-search-button/orama-search-button.tsx +++ b/packages/ui-stencil/src/components/orama-search-button/orama-search-button.tsx @@ -3,6 +3,7 @@ import type { ColorScheme } from '@/types' import '@phosphor-icons/webcomponents/dist/icons/PhMagnifyingGlass.mjs' import type { TThemeOverrides } from '@/components' import { generateRandomID } from '@/utils/utils' +import { globalContext } from '@/context/GlobalContext' export type ButtonClick = { id: HTMLElement @@ -44,7 +45,6 @@ export class OramaSearchButton { handleKeyDown(event: KeyboardEvent) { if (event.key === 'k' && (event.metaKey || event.ctrlKey)) { event.preventDefault() - console.log('keydown') this.buttonRef.click() } } @@ -109,7 +109,16 @@ export class OramaSearchButton { render() { return ( - (this.buttonRef = el)} size={this.size}> + {/* biome-ignore lint/a11y/useKeyWithClickEvents: */} + (this.buttonRef = el)} + size={this.size} + onClick={() => { + globalContext.open = true + }} + > diff --git a/packages/ui-stencil/src/context/GlobalContext.ts b/packages/ui-stencil/src/context/GlobalContext.ts index 7bda4428..45317f3f 100644 --- a/packages/ui-stencil/src/context/GlobalContext.ts +++ b/packages/ui-stencil/src/context/GlobalContext.ts @@ -1,9 +1,9 @@ -import { createStore } from '@stencil/store' +import { createStore } from '@stencil/store'; -const { state: globalContext } = createStore({ +const { state: globalContext, ...globalStore } = createStore({ open: false, currentTask: 'search' as 'search' | 'chat', currentTerm: '', -}) +}); -export { globalContext } +export { globalContext, globalStore };