@brilo/base-blocks 0.1.36 → 0.1.38

package/src/blocks/event/event-detail-header/icon.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2" y="3" width="16" height="4" rx="1" stroke="black" fill="none" />
+    <line x1="2" y1="10" x2="14" y2="10" stroke="black" />
+    <line x1="2" y1="13" x2="18" y2="13" stroke="black" />
+    <line x1="2" y1="16" x2="10" y2="16" stroke="black" />
+  </svg>
+)

package/src/blocks/event/event-detail-header/index.ts

@@ -0,0 +1,9 @@
+export type {EventDetailHeaderAttributes, EventDetailHeaderOptions} from './types'
+export {createEventDetailHeaderBlock} from './factory'
+
+import type {EventDetailHeaderOptions} from './types'
+
+export const eventDetailHeaderDefaults: EventDetailHeaderOptions = {
+  name: 'brilo/event-detail-header',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/event/event-detail-header/types.ts

@@ -0,0 +1,9 @@
+import type {BriloBlockType} from '~/types'
+
+export interface EventDetailHeaderAttributes extends Record<string, unknown> {
+  showDate: boolean
+  showPlace: boolean
+  showPrice: boolean
+}
+
+export interface EventDetailHeaderOptions extends BriloBlockType {}

package/src/blocks/event/event-list-group/constants.ts

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const DEFAULT_EMPTY_MESSAGE = __('Nebyly nalezeny žádné události.', 'brilo-blocks')
+export const EVENTS_PER_PAGE_MIN = 1
+export const EVENTS_PER_PAGE_MAX = 18
+export const EVENTS_PER_PAGE_DEFAULT = 6

package/src/blocks/event/event-list-group/edit.tsx

@@ -0,0 +1,84 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, RangeControl, SelectControl, ToggleControl, TextControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {EVENTS_PER_PAGE_DEFAULT, EVENTS_PER_PAGE_MAX, EVENTS_PER_PAGE_MIN} from './constants'
+import {EVENT_LIST_GROUP_MODES} from './types'
+import type {EventListGroupAttributes, EventListGroupMode, EventListGroupOptions} from './types'
+
+export function createEventListGroupEdit(options: EventListGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: EventListGroupAttributes
+    setAttributes: (a: Partial<EventListGroupAttributes>) => void
+  }) {
+    const {mode, selectedEvents, selectedCategories, emptyMessage, postsPerPage, showPagination} = attributes
+
+    const blockProps = useBlockProps({className: 'g-event wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení výpisu', 'brilo-blocks')} initialOpen>
+            <SelectControl
+              label={__('Režim', 'brilo-blocks')}
+              value={mode}
+              options={EVENT_LIST_GROUP_MODES.map((m) => ({label: m.label, value: m.value}))}
+              onChange={(mode) => setAttributes({mode: mode as EventListGroupMode})}
+            />
+
+            {mode !== 'manual' && (
+              <>
+                <RangeControl
+                  label={__('Počet příspěvků', 'brilo-blocks')}
+                  value={postsPerPage}
+                  onChange={(value) => setAttributes({postsPerPage: value ?? EVENTS_PER_PAGE_DEFAULT})}
+                  min={EVENTS_PER_PAGE_MIN}
+                  max={EVENTS_PER_PAGE_MAX}
+                />
+
+                {mode !== 'filter' && (
+                  <ToggleControl
+                    label={__('Zobrazit stránkování', 'brilo-blocks')}
+                    checked={showPagination}
+                    onChange={(value) => setAttributes({showPagination: value})}
+                  />
+                )}
+              </>
+            )}
+
+            <TextControl
+              label={__('Zpráva při prázdném výsledku', 'brilo-blocks')}
+              value={emptyMessage}
+              onChange={(value) => setAttributes({emptyMessage: value})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="g-event__label">{__('Seznam událostí', 'brilo-blocks')}</div>
+          <div className="g-event__instructions">
+            {mode === 'manual' && __('Ručně vybrané události.', 'brilo-blocks')}
+            {mode === 'upcoming' && __('Zobrazuje nadcházející události.', 'brilo-blocks')}
+            {mode === 'past' && __('Zobrazuje proběhlé události.', 'brilo-blocks')}
+            {mode === 'filter' && __('S filtrováním.', 'brilo-blocks')}
+          </div>
+
+          {mode !== 'manual' &&
+            mode !== 'filter' &&
+            options.renderCategoryControl?.({
+              selectedItems: selectedCategories,
+              onChange: (ids: number[]) => setAttributes({selectedCategories: ids}),
+            })}
+
+          {mode === 'manual' &&
+            options.renderEventsControl?.({
+              selectedItems: selectedEvents,
+              onChange: (ids: number[]) => setAttributes({selectedEvents: ids}),
+            })}
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/event/event-list-group/editor.scss

@@ -0,0 +1,9 @@
+@layer base {
+  .g-event {
+    padding: 32px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    text-align: center;
+  }
+}

package/src/blocks/event/event-list-group/factory.tsx

@@ -0,0 +1,33 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEFAULT_EMPTY_MESSAGE, EVENTS_PER_PAGE_DEFAULT} from './constants'
+import {createEventListGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {EventListGroupAttributes, EventListGroupOptions} from './types'
+
+export type {EventListGroupAttributes, EventListGroupOptions}
+
+export function createEventListGroupBlock(options: EventListGroupOptions): BlockConfiguration<EventListGroupAttributes> {
+  const emptyMessage = options.emptyMessage ?? DEFAULT_EMPTY_MESSAGE
+  const postsPerPage = options.postsPerPage ?? EVENTS_PER_PAGE_DEFAULT
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Seznam událostí', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {
+      mode: {type: 'string', default: 'upcoming'},
+      selectedEvents: {type: 'array', default: []},
+      selectedCategories: {type: 'array', default: []},
+      emptyMessage: {type: 'string', default: emptyMessage},
+      postsPerPage: {type: 'number', default: postsPerPage},
+      showPagination: {type: 'boolean', default: false},
+    },
+    edit: createEventListGroupEdit(options),
+    save: () => null,
+  }
+}

package/src/blocks/event/event-list-group/icon.tsx

@@ -0,0 +1,27 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 4H9V5H4V4Z" fill="black" />
+    <path d="M10 4H16V5H10V4Z" fill="black" />
+    <path
+      d="M12 2C12 1.44772 12.4477 1 13 1H14C14.5523 1 15 1.44772 15 2C15 2.55228 14.5523 3 14 3H13C12.4477 3 12 2.55228 12 2Z"
+      fill="black"
+    />
+    <path d="M5 2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3H6C5.44772 3 5 2.55228 5 2Z" fill="black" />
+    <rect x="11.5" y="14.5" width="4" height="4" stroke="black" fill="none" />
+    <path d="M17 14H20V15H17V14Z" fill="black" />
+    <path d="M17 16H19V17H17V16Z" fill="black" />
+    <path d="M18 18H20V19H18V18Z" fill="#357AB5" />
+    <rect x="0.5" y="14.5" width="4" height="4" stroke="black" fill="none" />
+    <path d="M6 14H9V15H6V14Z" fill="black" />
+    <path d="M6 16H8V17H6V16Z" fill="black" />
+    <path d="M7 18H9V19H7V18Z" fill="#357AB5" />
+    <rect x="11.5" y="7.5" width="4" height="4" stroke="black" fill="none" />
+    <path d="M17 7H20V8H17V7Z" fill="black" />
+    <path d="M17 9H19V10H17V9Z" fill="black" />
+    <path d="M18 11H20V12H18V11Z" fill="#357AB5" />
+    <rect x="0.5" y="7.5" width="4" height="4" stroke="black" fill="none" />
+    <path d="M6 7H9V8H6V7Z" fill="black" />
+    <path d="M6 9H8V10H6V9Z" fill="black" />
+    <path d="M7 11H9V12H7V11Z" fill="#357AB5" />
+  </svg>
+)

package/src/blocks/event/event-list-group/index.tsx

@@ -0,0 +1,12 @@
+export type {EventListGroupAttributes, EventListGroupOptions, EventListGroupMode} from './types'
+export {EVENT_LIST_GROUP_MODES} from './types'
+export {createEventListGroupBlock} from './factory'
+export {EventSelectModal} from '~/components/Event/EventSelectModal'
+export {EventTermSelectModal} from '~/components/Event/EventTermSelectModal'
+
+import type {EventListGroupOptions} from './types'
+
+export const eventListGroupDefaults: EventListGroupOptions = {
+  name: 'brilo/event-list-group',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/event/event-list-group/types.ts

@@ -0,0 +1,27 @@
+import {__} from '@wordpress/i18n'
+import type {BriloBlockType, SelectControlProps} from '~/types'
+
+export const EVENT_LIST_GROUP_MODES = [
+  {value: 'manual', label: __('Výběr událostí', 'brilo-blocks')},
+  {value: 'upcoming', label: __('Nadcházející', 'brilo-blocks')},
+  {value: 'past', label: __('Proběhlé', 'brilo-blocks')},
+  {value: 'filter', label: __('S filtrováním', 'brilo-blocks')},
+] as const
+
+export type EventListGroupMode = (typeof EVENT_LIST_GROUP_MODES)[number]['value']
+
+export interface EventListGroupAttributes extends Record<string, unknown> {
+  mode: EventListGroupMode
+  selectedEvents: number[]
+  selectedCategories: number[]
+  emptyMessage: string
+  postsPerPage: number
+  showPagination: boolean
+}
+
+export interface EventListGroupOptions extends BriloBlockType {
+  emptyMessage?: string
+  postsPerPage?: number
+  renderCategoryControl?: (props: SelectControlProps) => JSX.Element
+  renderEventsControl?: (props: SelectControlProps) => JSX.Element
+}

package/src/blocks/post/post-content/index.ts

@@ -5,4 +5,5 @@ import type {PostContentOptions} from './types'
 
 export const postContentDefaults: PostContentOptions = {
   name: 'brilo/post-content',
+  parent: ['brilo/base-section'],
 }

package/src/blocks/sections/base-section/controls.tsx

@@ -289,7 +289,11 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
             onChange={(next) => update({position: next as BackgroundImagePosition})}
           />
 
-          <BaseControl label={__('Překryv barvou', 'brilo-blocks')} __nextHasNoMarginBottom help={__('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks')}>
+          <BaseControl
+            label={__('Překryv barvou', 'brilo-blocks')}
+            __nextHasNoMarginBottom
+            help={__('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks')}
+          >
             <ColorPalette
               colors={paletteColors}
               value={overlayColor || undefined}

package/src/blocks/sections/base-section/edit.tsx

@@ -26,7 +26,9 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
           ? {
               backgroundImage: [tintLayer, `url(${bgImageSrc})`].filter(Boolean).join(', '),
               backgroundSize: [tintLayer ? '100% 100%' : null, backgroundImage?.fit ?? 'cover'].filter(Boolean).join(', '),
-              backgroundPosition: [tintLayer ? 'center center' : null, backgroundImage?.position ?? 'center center'].filter(Boolean).join(', '),
+              backgroundPosition: [tintLayer ? 'center center' : null, backgroundImage?.position ?? 'center center']
+                .filter(Boolean)
+                .join(', '),
               backgroundRepeat: 'no-repeat',
               padding: '16px',
             }

package/src/blocks/sections/base-section/types.ts

@@ -34,9 +34,15 @@ export interface Decoration {
 export type BackgroundImageFit = 'cover' | 'contain'
 
 export type BackgroundImagePosition =
-  | 'left top' | 'center top' | 'right top'
-  | 'left center' | 'center center' | 'right center'
-  | 'left bottom' | 'center bottom' | 'right bottom'
+  | 'left top'
+  | 'center top'
+  | 'right top'
+  | 'left center'
+  | 'center center'
+  | 'right center'
+  | 'left bottom'
+  | 'center bottom'
+  | 'right bottom'
 
 export interface BackgroundImageOverlay {
   color?: string

package/src/components/Document/DocumentTermSelectModal.tsx

@@ -0,0 +1,60 @@
+import type {View} from '@wordpress/dataviews/wp'
+import {__} from '@wordpress/i18n'
+import {createEntitySelectModal} from '~/components/Event/EntitySelectModal'
+
+type DocumentCategoryRecord = {
+  id: number
+  name: string
+  slug: string
+  count?: number
+}
+
+const DEFAULT_VIEW: View = {
+  type: 'table',
+  search: '',
+  filters: [],
+  page: 1,
+  perPage: 20,
+  sort: {field: 'name', direction: 'asc'},
+  fields: ['slug', 'count'],
+  titleField: 'name',
+}
+
+/**
+ * Manual document_category picker (table view, search, sort, checkbox
+ * selection, reorderable selection list) with name/slug/count columns. See
+ * `EntitySelectModal` for the shared DataViews wiring.
+ */
+export const DocumentTermSelectModal = createEntitySelectModal<DocumentCategoryRecord>({
+  endpoint: '/wp/v2/document_category?per_page=100&orderby=name&order=asc&_fields=id,name,slug,count',
+  defaultView: DEFAULT_VIEW,
+  buttonLabel: __('Vybrat kategorie', 'brilo-blocks'),
+  modalTitle: __('Vybrat kategorie', 'brilo-blocks'),
+  emptyLabel: __('Nevybrány žádné kategorie.', 'brilo-blocks'),
+  getItemLabel: (item) => item.name,
+  matchesSearch: (item, needle) => item.name.toLowerCase().includes(needle) || item.slug.toLowerCase().includes(needle),
+  sortValue: (item, field) => (item as Record<string, unknown>)[field] as string | number,
+  fields: [
+    {
+      id: 'name',
+      label: __('Název', 'brilo-blocks'),
+      enableHiding: false,
+      enableSorting: true,
+      render: ({item}: {item: DocumentCategoryRecord}) => item.name || __('(bez názvu)', 'brilo-blocks'),
+    },
+    {
+      id: 'slug',
+      label: __('Slug', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: DocumentCategoryRecord}) => item.slug || '—',
+    },
+    {
+      id: 'count',
+      label: __('Počet', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: DocumentCategoryRecord}) => (undefined !== item.count ? String(item.count) : '—'),
+    },
+  ],
+})
+
+export const DocumentTermSelect = DocumentTermSelectModal

package/src/components/Event/EntitySelectModal.tsx

@@ -0,0 +1,249 @@
+import apiFetch from '@wordpress/api-fetch'
+import {Button, Card, CardBody, __experimentalHStack as HStack, Modal, __experimentalVStack as VStack} from '@wordpress/components'
+import {DataViews, type Field, type View} from '@wordpress/dataviews/wp'
+import {__} from '@wordpress/i18n'
+import {arrowDown, arrowUp, close, plusCircle} from '@wordpress/icons'
+// biome-ignore lint/correctness/noUnusedImports: required in scope for classic JSX transform
+import React, {useEffect, useMemo, useState} from 'react'
+import type {SelectControlProps} from '~/types'
+
+type EntityRecord = {id: number}
+
+// `DataViews`' own prop type makes `getItemId` conditionally optional based on whether
+// `Item extends {id: string}`, which TS can't resolve for an unresolved generic `T` — so
+// re-type it here for a numeric-id `T`, where `getItemId` is always required.
+type TypedDataViewsProps<T extends EntityRecord> = {
+  data: T[]
+  fields: Field<T>[]
+  view: View
+  onChangeView: (view: View) => void
+  paginationInfo: {totalItems: number; totalPages: number}
+  isLoading: boolean
+  defaultLayouts: {table: object}
+  getItemId: (item: T) => string
+  selection: string[]
+  onChangeSelection: (ids: string[]) => void
+  actions: Array<{
+    id: string
+    label: (items: T[]) => string
+    supportsBulk: boolean
+    callback: (items: T[]) => void
+  }>
+}
+
+const TypedDataViews = DataViews as unknown as <T extends EntityRecord>(props: TypedDataViewsProps<T>) => JSX.Element
+
+export type EntitySelectModalConfig<T extends EntityRecord> = {
+  endpoint: string
+  fields: Field<T>[]
+  defaultView: View
+  getItemLabel: (item: T) => string
+  matchesSearch: (item: T, needle: string) => boolean
+  sortValue: (item: T, field: string) => string | number
+  buttonLabel: string
+  modalTitle: string
+  emptyLabel: string
+  className?: string
+}
+
+function useEntities<T extends EntityRecord>(endpoint: string) {
+  const [entities, setEntities] = useState<T[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    setIsLoading(true)
+    apiFetch<T[]>({path: endpoint})
+      .then((result) => setEntities(result))
+      .catch(() => setEntities([]))
+      .finally(() => setIsLoading(false))
+  }, [endpoint])
+
+  return {entities, isLoading}
+}
+
+function SelectedOrderList<T extends EntityRecord>({
+  items,
+  getItemLabel,
+  onChange,
+  onRemove,
+  emptyLabel,
+}: {
+  items: T[]
+  getItemLabel: (item: T) => string
+  onChange: (ids: number[]) => void
+  onRemove: (id: number) => void
+  emptyLabel: string
+}) {
+  if (0 === items.length) {
+    return <p className="i-event-select-modal__empty">{emptyLabel}</p>
+  }
+
+  const move = (index: number, direction: -1 | 1) => {
+    const target = index + direction
+
+    if (target < 0 || target >= items.length) {
+      return
+    }
+
+    const next = [...items]
+    ;[next[index], next[target]] = [next[target], next[index]]
+    onChange(next.map((item) => item.id))
+  }
+
+  return (
+    <VStack spacing={2}>
+      {items.map((item, index) => (
+        <Card size="small" className="i-event-select-modal__item" key={item.id}>
+          <CardBody>
+            <HStack alignment="center">
+              <span
+                className="i-event-select-modal__item-title"
+                style={{
+                  flexGrow: 1,
+                  minWidth: 0,
+                  textAlign: 'left',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {getItemLabel(item) || __('(bez názvu)', 'brilo-blocks')}
+              </span>
+
+              <HStack expanded={false} spacing={1}>
+                <Button
+                  size="small"
+                  icon={arrowUp}
+                  label={__('Posunout výš', 'brilo-blocks')}
+                  onClick={() => move(index, -1)}
+                  disabled={0 === index}
+                />
+                <Button
+                  size="small"
+                  icon={arrowDown}
+                  label={__('Posunout níž', 'brilo-blocks')}
+                  onClick={() => move(index, 1)}
+                  disabled={index === items.length - 1}
+                />
+                <Button size="small" icon={close} isDestructive label={__('Odebrat', 'brilo-blocks')} onClick={() => onRemove(item.id)} />
+              </HStack>
+            </HStack>
+          </CardBody>
+        </Card>
+      ))}
+    </VStack>
+  )
+}
+
+/**
+ * Generic table-view entity picker built on @wordpress/dataviews (search, sort,
+ * checkbox selection, reorderable selection list). Feed it a REST endpoint +
+ * DataViews field config to get an `EventSelectModal`/`EventTermSelectModal`-style
+ * component without duplicating the DataViews wiring per entity type.
+ */
+export function createEntitySelectModal<T extends EntityRecord>(config: EntitySelectModalConfig<T>) {
+  return function EntitySelectModal({selectedItems, onChange}: SelectControlProps) {
+    const {entities, isLoading} = useEntities<T>(config.endpoint)
+    const [isOpen, setIsOpen] = useState(false)
+    const [view, setView] = useState<View>(config.defaultView)
+
+    const selectedEntities = useMemo(
+      () => selectedItems.map((id) => entities.find((entity) => entity.id === id)).filter((entity): entity is T => undefined !== entity),
+      [selectedItems, entities],
+    )
+
+    const {data, paginationInfo} = useMemo(() => {
+      let filtered = entities
+
+      if (view.search) {
+        const needle = view.search.toLowerCase()
+        filtered = filtered.filter((entity) => config.matchesSearch(entity, needle))
+      }
+
+      if (view.sort?.field) {
+        const {field, direction} = view.sort
+        const sorted = [...filtered]
+
+        sorted.sort((a, b) => {
+          const valueA = config.sortValue(a, field)
+          const valueB = config.sortValue(b, field)
+          const result =
+            typeof valueA === 'number' && typeof valueB === 'number' ? valueA - valueB : String(valueA).localeCompare(String(valueB))
+
+          return 'desc' === direction ? -result : result
+        })
+
+        filtered = sorted
+      }
+
+      const perPage = view.perPage ?? 20
+      const page = view.page ?? 1
+      const start = (page - 1) * perPage
+
+      return {
+        data: filtered.slice(start, start + perPage),
+        paginationInfo: {totalItems: filtered.length, totalPages: Math.ceil(filtered.length / perPage) || 1},
+      }
+    }, [entities, view])
+
+    const toggleSelected = (id: number) => {
+      onChange(selectedItems.includes(id) ? selectedItems.filter((itemId) => itemId !== id) : [...selectedItems, id])
+    }
+
+    return (
+      <VStack spacing={3} className={config.className ?? 'i-event-select-modal'}>
+        <Button variant="secondary" icon={plusCircle} onClick={() => setIsOpen(true)}>
+          {config.buttonLabel}
+        </Button>
+
+        <SelectedOrderList
+          items={selectedEntities}
+          getItemLabel={config.getItemLabel}
+          emptyLabel={config.emptyLabel}
+          onChange={onChange}
+          onRemove={(id) => onChange(selectedItems.filter((itemId) => itemId !== id))}
+        />
+
+        {isOpen && (
+          <Modal title={config.modalTitle} onRequestClose={() => setIsOpen(false)} size="fill">
+            <VStack spacing={4} style={{height: '100%'}}>
+              <div style={{flexGrow: 1, minHeight: 0}}>
+                <TypedDataViews<T>
+                  data={data}
+                  fields={config.fields}
+                  view={view}
+                  onChangeView={setView}
+                  paginationInfo={paginationInfo}
+                  isLoading={isLoading}
+                  defaultLayouts={{table: {}}}
+                  getItemId={(item) => String(item.id)}
+                  selection={selectedItems.map(String)}
+                  onChangeSelection={(ids) => onChange(ids.map(Number))}
+                  actions={[
+                    {
+                      id: 'toggle',
+                      label: (items) =>
+                        items.length && selectedItems.includes(items[0].id) ? __('Odebrat', 'brilo-blocks') : __('Přidat', 'brilo-blocks'),
+                      supportsBulk: true,
+                      callback: (items) => {
+                        items.forEach((item) => {
+                          toggleSelected(item.id)
+                        })
+                      },
+                    },
+                  ]}
+                />
+              </div>
+
+              <HStack justify="flex-end">
+                <Button variant="primary" onClick={() => setIsOpen(false)}>
+                  {__('Hotovo', 'brilo-blocks')}
+                </Button>
+              </HStack>
+            </VStack>
+          </Modal>
+        )}
+      </VStack>
+    )
+  }
+}

package/src/components/Event/EventSelectModal.tsx

@@ -0,0 +1,51 @@
+import type {View} from '@wordpress/dataviews/wp'
+import {__} from '@wordpress/i18n'
+import {createEntitySelectModal} from './EntitySelectModal'
+
+type EventRecord = {
+  id: number
+  title: {rendered: string}
+  date: string
+}
+
+const DEFAULT_VIEW: View = {
+  type: 'table',
+  search: '',
+  filters: [],
+  page: 1,
+  perPage: 20,
+  sort: {field: 'title', direction: 'asc'},
+  fields: ['date'],
+  titleField: 'title',
+}
+
+/**
+ * Manual brilo_event picker (table view, search, sort, checkbox selection,
+ * reorderable selection list) with title/date columns. See `EntitySelectModal`
+ * for the shared DataViews wiring.
+ */
+export const EventSelectModal = createEntitySelectModal<EventRecord>({
+  endpoint: '/wp/v2/brilo_event?per_page=100&orderby=title&order=asc&_fields=id,title,date',
+  defaultView: DEFAULT_VIEW,
+  buttonLabel: __('Vybrat události', 'brilo-blocks'),
+  modalTitle: __('Vybrat události', 'brilo-blocks'),
+  emptyLabel: __('Nevybrány žádné události.', 'brilo-blocks'),
+  getItemLabel: (item) => item.title.rendered,
+  matchesSearch: (item, needle) => item.title.rendered.toLowerCase().includes(needle),
+  sortValue: (item, field) => ('title' === field ? item.title.rendered : ((item as never)[field] ?? '')),
+  fields: [
+    {
+      id: 'title',
+      label: __('Název', 'brilo-blocks'),
+      enableHiding: false,
+      enableSorting: true,
+      render: ({item}: {item: EventRecord}) => item.title.rendered || __('(bez názvu)', 'brilo-blocks'),
+    },
+    {
+      id: 'date',
+      label: __('Datum', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: EventRecord}) => (item.date ? new Date(item.date).toLocaleDateString() : '—'),
+    },
+  ],
+})